vue3 中使用 svg-icons

1、在项目中安装 vite-plugin-svg-icons 

npm install vite-plugin-svg-icons

2、打开 vite.config.ts 文件，添加注释为【svg-icons相关】的代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'  
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 【svg-icons相关】
import { resolve } from 'path'  // 【svg-icons相关】

export default defineConfig({
  plugins: [
    vue(),
    // 【svg-icons相关】
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    })
  ],
  resolve: {
    alias: {
      // 设置文件./src路径为 @
      '@': resolve(__dirname, './src')
    }
  },
  base: './', // 打包路径
  server: {
    host: '0.0.0.0',
    port: 4000, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  }
})

3、打开 tsconfig.json 文件，添加注释为【svg-icons相关】的代码

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "./src/*",
        "./dist/*"
      ]
    },
    "types": [
      "vite-plugin-svg-icons/client", // 【svg-icons相关】
      "node"  // 【svg-icons相关】
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

4、打开 main.ts 文件，添加注释为【svg-icons相关】的代码

import { createApp } from 'vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'virtual:svg-icons-register'    // 【svg-icons相关】
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)

app.use(router)
app.use(ElementPlus)
app.use(createPinia())

// 全局注册使用 element plus 的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.mount('#app')

5、在 src/assets/ 目录中添加一个 icons 的目录，并将收集到的 svg 图标添加到刚刚添加的 icons 目录中

6、在 src/components/ 目录中

6.1 添加一个 SvgIcon 目录

6.2 在刚刚添加的 SvgIcon 目录中添加一个 index.vue 文件，并添加以下代码

<template>
  <svg aria-hidden="true" class="svg-icon">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  iconClass: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: ''
  }
})

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script>

<style scoped>
.svg-icon {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  margin-right: 10px;
  vertical-align: -0.15em;
  overflow: hidden;
  fill: currentColor;
}
</style>

7、在 vue 文件中使用

<template>
  <SvgIcon icon-class="bug" />
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
</script>