安裝依賴

npm i vite-plugin-svg-icons -D

vite.config.ts中添加配置

主要為指定svg圖標存放路徑以及命名方式

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/assets/icons')],symbolId: 'icon-[dir]-[name]',})]
})

在main.ts中引入插件（這一步如果引入報錯說缺少依賴，那就npm安裝一下那個依賴即可）

import 'virtual:svg-icons-register'

使用

xlink:href="#icon-vue"中的icon-vue表示圖標的名稱，如此處我使用的圖標名稱為vue就直接寫#icon-vue即可，vue才是名稱，前面一截#icon-是固定標識

fill：圖標的顏色

在svg標簽里面可以書寫行內樣式，如圖標寬高等等

<svg style=""><use xlink:href="#icon-vue" fill="skyblue"></use></svg>

封裝成組件使用

<script setup lang="ts">
import { } from 'vue'defineOptions({name:"SvgName"
})defineProps({prefix:{type:String,default:'#icon-'},name:{type:String,required:true},color:{type:String,default:''},width:{type:String,default:'15px'},height:{type:String,default:'15px'}
})</script>
<template><svg :style="{width,height}"><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><style scoped lang="scss">
</style>