1.安装 vite-plugin-svg-icons 依赖：

npm i vite-plugin-svg-icons -D

2.配置 vite.config.ts 文件，指定一个图标目录比如src/assets/icons。Vite 执行开发启动 / 打包构建时，插件自动扫描文件夹下全部 .svg 文件，读取每一份 SVG 的内部节点，提取 <path>/<circle> 等图形代码，自动生成唯一 ID：默认规则 icon‑文件名（文件 home.svg → id = icon‑home）。

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定存放svg图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // symbol id 格式
      symbolId: 'icon‑[name]'
    })
  ]
})

3.main.js 注册（必须的）

// 引入插件生成雪碧图的注册脚本
import 'virtual:svg-icons-register'

4.封装一个SvgIcon.vue 通用组件，颜色通过动态改变svg中的fill属性来实现，然后内部封装use的路径为#icon-${name},这样外部调用的时候只用传对应svg的名字就可以直接调用

<template>
  <svg
    :width="size"
    :height="size"
    :color="color"
    style="vertical-align: middle;fill:currentColor"
  >
    <use :href="`#icon‑${name}`" />
  </svg>
</template>

<script setup>
defineProps({
  name: { type: String, required: true },
  size: { type: [Number, String], default: 24 },
  color: { type: String, default: '#333' }
})
</script>

5.调用

<SvgIcon name="home" color="#409eff" :size="30"/>