安装
npm install vite-plugin-svg-icons -D
在 vite.config.ts 中配置插件：
import { createSvgIconsPlugin} from 'vite-plugin-svg-icons';
import path from 'path';plugins: [createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]'})],
在入口文件进行配置：
import 'virtual:svg-icons-register'
使用方法
在assets/icons/ 下引入 svg 格式的文件，并给图标命名。
只需在需要的地方，使用 svg 引入图标即可。需要注意的点是：xlink:href用哪个图标，其属性值必须是 #icon-图标名字。
<svg width="100" height="100"><use xlink:href="#icon-music"></use></svg>
组件封装
<template><svg><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><script setup lang="ts">
defineProps({// xlink:href 前缀prefix: {type: String,default: '#icon'},// 图标的名字name: String,// 图标颜色color: String
})
</script>
组件的使用
import SvgIcon from '@/components/SvgIcon/index.vue'<svg-icon name="music" color="pink"></svg-icon>
