使用svg图标

方式一：原生导入 SVG 内容（可改色、无插件）

步骤 1：准备 SVG

把你的图标放到：src/assets/icons/home.svg

步骤 2：直接导入 SVG 源码

利用 Vite 原生的 ?raw 导入 SVG 字符串，再用 v-html 渲染。

<template>
  <!-- 渲染 SVG -->
  <div v-html="home" class="icon-wrapper"></div>
</template>

<script setup>
// 原生导入 SVG 源码（关键：加 ?raw）
import homefrom '@/assets/icons/home.svg?raw'
</script>

<style scoped>

/* 修改颜色（必须去掉 SVG 内部的 fill） */
.icon-wrapper :deep(svg) {
  fill: #ff4d4f; /* 红色 */
  width: 100%;
  height: 100%;
}
</style>

方式二：封装成全局组件

步骤 1：创建组件：src/components/SvgIcon.vue

<template>
  <div class="svg-icon" v-html="svgContent"></div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  name: {
    type: String,
    required: true
  }
})

// 自动根据 name 导入 SVG
const svgContent = computed(() => {
  // 关键：原生导入
  return import.meta.glob('@/assets/icons/*.svg', { eager: true, as: 'raw' })[
    `/src/assets/icons/${props.name}.svg`
  ]
})
</script>

<style scoped>

</style>

步骤 2. 任意页面直接用

<template>
  <SvgIcon name="home" class="icon-wrapper"/>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon.vue'
</script>
<script setup>
.icon-wrapper{
    fill: #ffffff;
}
.icon-wrapper:hover{
    fill:#FDB2CB;
}
</script>

关键要点

1. 必须加 ?raw 作用：告诉 Vite 直接导入 SVG 文本内容，不转成图片。

2. 能改色的前提打开你的 .svg 文件，删除所有 fill="xxx"