安装 SVG 依赖插件
使用vite-plugin-svg-icons插件
npm i vite-plugin-svg-icons -D
添加配置
在vite.config.js中配置插件
import viteSvgIcons from 'vite-plugin-svg-icons';
import path from 'path';
export default () => {
return {
plugins: [
viteSvgIcons({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
}),
],
};
};
在 src/main.ts 内引入注册脚本
import 'virtual:svg-icons-register';
使用 svg
<svg>
<!-- xlink:href 执行用哪个图标, 属性值务必#icon-图标名字 -->
<!-- use标签fill属性可以设置图标的颜色 -->
<use xlink:href="#icon-po=hone" fill="red"></use>
</svg>