vite构建的vue3项目中如何使用svg图标？

1、安装插件：vite-plugin-svg-icons 

// 通过命令安装2个插件
npm i vite-plugin-svg-icons -D
npm i fast-glob -D

 如图所示

//package.json
 "devDependencies": {
    "@types/node": "^18.7.13",
    "@vitejs/plugin-vue": "^3.0.3",
    "fast-glob": "^3.2.12",
    "sass": "^1.54.5",
    "typescript": "^4.6.4",
    "vite": "^3.0.7",
    "vite-plugin-svg-icons": "^2.0.1",
    "vue-tsc": "^0.39.5"
  }

2、配置插件： 在 vite.config.ts中配置 createSvgIconsPlugin 

//vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { join, resolve } from "path";
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'


// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
      symbolId: 'icon-[dir]-[name]',
    }),
    
  ],
  resolve: {
    alias: {
      '@': join(__dirname, 'src'),
    }
  },
})

 存放文件路径 ：src/assets/svg

- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg

然后就在 main.ts 引入下面代码：

//main.ts
import 'virtual:svg-icons-register'

 3、封装成组件：SvgIcon.vue

 4、使用方法：

转载至：vite构建的vue3项目中如何使用svg图标？ - 简书 (jianshu.com)