Vue - Vue3 中使用SVG作为图标

在 Vue 3 中使用 SVG 作为图标有多种方法，以下是几种常见且推荐的方式：

---

方法 1：直接内联 SVG（推荐）

将 SVG 代码直接嵌入 Vue 组件模板中，通过 CSS 控制样式。

步骤：

1. 复制 SVG 代码（从设计工具或文件）
2. 在组件中粘贴并优化：

   <template>
     <div class="icon">
       <!-- 移除原SVG的宽高/填充，用CSS控制 -->
       <svg viewBox="0 0 24 24">
         <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor" />
       </svg>
     </div>
   </template>
   
   <style scoped>
   .icon {
     width: 24px;
     height: 24px;
     color: #42b883; /* 通过color控制图标颜色 */
   }
   </style>
   

   优点：完全控制样式，性能最佳。

---

方法 2：封装 SVG 为组件（推荐）

将每个 SVG 封装成独立的 Vue 组件，便于复用。

步骤：

1. 创建 src/components/icons/IconHome.vue：

   <template>
     <svg :width="size" :height="size" viewBox="0 0 24 24">
       <path :fill="color" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
     </svg>
   </template>
   
   <script setup>
   defineProps({
     size: { type: [Number, String], default: 24 },
     color: { type: String, default: 'currentColor' }
   })
   </script>
   

2. 在父组件中使用：

   <template>
     <IconHome size="20" color="#ff0000" />
   </template>
   
   <script setup>
   import IconHome from '@/components/icons/IconHome.vue'
   </script>
   

---

方法 3：使用 vite-svg-loader（自动化导入）

通过 Vite 插件自动将 SVG 文件转换为 Vue 组件。

步骤：

1. 安装插件：

   npm install vite-svg-loader -D
   

2. 配置 vite.config.js：

   import svgLoader from 'vite-svg-loader'
   
   export default defineConfig({
     plugins: [vue(), svgLoader()]
   })
   

3. 在组件中使用：

   <template>
     <HomeIcon class="icon-style" />
   </template>
   
   <script setup>
   import HomeIcon from '@/assets/home.svg?component' // 后缀 ?component
   </script>
   

---

方法 4：SVG Sprite（雪碧图）

合并多个 SVG 到一个文件中，通过 <use> 引用。

步骤：

1. 生成 SVG Sprite 文件（可用工具如 svg-sprite-generator）

2. 在 public/ 下放置 sprite.svg，内容如：

   <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
     <symbol id="icon-home" viewBox="0 0 24 24">
       <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
     </symbol>
   </svg>
   

3. 在组件中使用：

   <template>
     <svg class="icon">
       <use href="/sprite.svg#icon-home" />
     </svg>
   </template>
   
   <style>
   .icon {
     width: 24px;
     height: 24px;
     fill: currentColor;
   }
   </style>
   

---

方法 5：第三方图标库

使用现成的 Vue 图标库（如 @heroicons/vue、vue-icons）。

示例（Heroicons）：

1. 安装：

   npm install @heroicons/vue
   

2. 使用：

   <template>
     <HomeIcon class="h-5 w-5 text-blue-500" />
   </template>
   
   <script setup>
   import { HomeIcon } from '@heroicons/vue/outline'
   </script>
   

---

最佳实践建议

1. 优先选择内联或组件封装：直接控制 SVG 属性（如 fill="currentColor"）以便通过 CSS 染色。
2. 动态图标：通过 props 传递尺寸/颜色（见方法 2）。
3. 性能优化：
   • 避免在循环中加载大量 SVG 文件
   • 使用 vite-svg-loader 时，配合 import.meta.glob 批量导入
4. 可访问性：为图标添加 aria-label 或隐藏装饰性图标：

   <svg aria-hidden="true">...</svg>
   

根据项目需求选择最适合的方式，小型项目推荐方法 2（组件封装），大型项目推荐方法 3（vite-svg-loader）。