Vue3+ts+vite项目中使用vite-plugin-svg-icons插件处理svg，vue3项目vite中使用svg

1.首先插件依赖安装

yarn add vite-plugin-svg-icons -D
# or
npm install vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

---
yarn add fast-glob
# or
npm install fast-glob
# or
pnpm install fast-glob

2.vite.config.ts 中的配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
++ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
++ import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ++ createSvgIconsPlugin({
    ++   // 指定需要缓存的图标文件夹
    ++   iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
    ++   // 指定symbolId格式
    ++   symbolId: 'icon-[dir]-[name]',
    ++ }),
  ],
})

3.在main.ts 内引入注册脚本

im