vue3 + vite 使用 vite-plugin-svg-icons 插件显示本地 svg 图标的方法

1.安装 vite-plugin-svg-icons 插件

yarn add vite-plugin-svg-icons -D
// 或者
npm install vite-plugin-svg-icons -D
// 或者
pnpm install vite-plugin-svg-icons -D

2.使用 vite-plugin-svg-icons 插件

2.1 在项目根目录查找 vite.config.js , 进行配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir);
}
export default {
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'public/img/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[name]',
    }),
  ],
 }

2.2 vite-plugin-svg-icons 插件引入在 main.js 中

import 'virtual:svg-icons-register'

2.3 svg 图标放入对应路径 ~~~~~ 图标路径与 iconDirs 设置得路径一致

项目中使用示例:
// menu.icon 是路径里面的svg图片名称

<svg aria-hidden="true" style="width: 14px; height: 14px">
	<use :href="`#icon-${menu.icon}`" rel="external nofollow"  />
</svg>