SVG 图标配置

安装 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>