Vue3 + Vite + TypeScript SVG图标解决方案

---

前言

项目中或多或少都会使用到图标，这里介绍一下使用 vite-plugin-svg-icons 插件实现高效管理SVG图标。
方案概述：

• 使用 vite-plugin-svg-icons插件加载SVG图标
• 创建可复用的SVG图标组件
• 支持动态改变图标颜色和大小
• TypeScript类型支持
• 图标分类管理和演示页面

---

一、安装依赖

npm install vite-plugin-svg-icons -D

二、配置Vite插件 (vite.config.ts)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 指定图标文件夹路径iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// 指定symbolId格式symbolId: 'icon-[dir]-[name]',// 自定义插入位置inject: 'body-last'})]
})

三、创建SVG图标组件 (src/components/SvgIcon.vue)

<script setup lang="ts">
import { computed } from 'vue';const props = defineProps({name: {type: String,required: true},color: {type: String,default: 'currentColor'},size: {type: [String, Number],default: 16},className: {type: String,default: ''}
});const symbolId = computed(() => `#icon-${props.name}`);
const style = computed(() => {return {color: props.color,width: typeof props.size === 'number' ? `${props.size}px` : props.size,height: typeof props.size === 'number' ? `${props.size}px` : props.size};
});
</script><template><svg :class="className" :style="style"aria-hidden="true"><use :xlink:href="symbolId" /></svg>
</template>

四、在main.ts中添加SVG注册

import { createApp } from 'vue'
import App from './App.vue'
import 'virtual:svg-icons-register'; // 重要：注册SVG图标const app = createApp(App);
app.mount('#app');

五、图标使用示例

将SVG文件放入 src/assets/icons 目录下（文件名将自动作为图标名称）

<SvgIcon name="home" size="24" color="#42b883" class="icon-home" />

Vite会自动加载所有SVG文件并生成symbols

---

总结

​高性能​：SVG图标以精灵图(sprite)形式加载，减少HTTP请求
​按需使用​：只构建实际使用的图标
​类型安全​：通过TypeScript保证属性类型安全
​灵活定制​：支持动态设置颜色、大小和样式
​易于管理​：只需将SVG文件放入目录即可使用