yarn add vite-plugin-svg-icons -D

// or

npm i vite-plugin-svg-icons -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            // 指定需要緩存的圖標(biāo)文件夾
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icon/svg')],
            // 指定symbolId格式
            symbolId: '[name]',
        }),
    ]
})

<template>
    <!-- aria-hidden：默認(rèn)為false，設(shè)置為true表示會(huì)把整個(gè)元素包括子元素從可訪問樹（AOM）上移除，但是在DOM樹上還是存在的 -->
    <!-- fill：如果在動(dòng)畫接收還需要保持動(dòng)畫的值，可用于設(shè)置顏色 -->
    <svg :class="'svg-icon ' + ($attrs.iconClass ? $attrs.iconClass : '')" aria-hidden="true">
        <use class="svg-use" :href="'#' + $attrs.iconName" rel="external nofollow"  />
    </svg>
</template>
 
<script setup>
import { defineComponent, computed } from 'vue'
// 可以打印所有注冊的svg圖標(biāo)
// import ids from 'virtual:svg-icons-names'
 
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

import SvgIcon from './components/icon/icon-component.vue'
import 'virtual:svg-icons-register'


const app = createApp(App);

app.component('svg-icon', SvgIcon)
app.mount('#app')

<svg-icon iconName="svg圖片的名字"></svg-icon>