在 vite 项目中使用 vite-plugin-svg-icons 实现 svg 雪碧图，需安装插件、配置 icondirs 绝对路径和 symbolid 命名规则，入口文件引入 'virtual:svg-icons-register'，并封装 svgicon 组件按需调用。
在 Vite 项目中用 vite-plugin-svg-icons 实现 SVG 雪碧图，核心是让插件自动扫描图标目录、生成统一的 symbol 雪碧图，并支持组件化调用。配置不复杂，但路径、ID 格式和注入时机这几个点容易出错。
安装插件并声明依赖
插件属于开发时工具，只需作为 devDependency 安装：
npm install -D vite-plugin-svg-icons- 或
yarn add -D vite-plugin-svg-icons - 注意：不需要额外安装 SVGO 或 @types/node（除非 TypeScript 报 path 类型错误，此时再补
yarn add -D @types/node）
vite.config.ts/js 中启用插件
关键在于指定图标存放路径和 symbol ID 的命名规则，确保与后续引用方式一致：
-
iconDirs必须是绝对路径，推荐用path.resolve(process.cwd(), 'src/assets/icons') -
symbolId决定你在<use href="#xxx"></use>中填什么，常见写法有：
•'icon-[name]'→ 引用时写#icon-home
•'icon-[dir]-[name]'→ 适合多级目录，如#icon-nav-menu - 可选配
svgoOptions去除默认 fill，方便 CSS 控制颜色，例如：{ name: 'removeAttrs', params: { attrs: 'fill' } }
入口文件注册雪碧图注入逻辑
插件会在构建时自动生成一个虚拟模块，必须在主入口（如 main.ts 或 main.js）顶部显式引入：
import 'virtual:svg-icons-register'- 这行代码不能漏，也不能放在 setup 或异步逻辑里 —— 它负责把雪碧图
<svg style="display:none">...</svg>插入 DOM - 开发时实时生效；生产环境会打包进 assets，由注册逻辑自动挂载
封装 SvgIcon 组件实现按需调用
避免每次手写 <svg><use href="#..."></use></svg>，建议封装一个通用组件：
- 组件接收
name（对应 SVG 文件名）、color、size等 props -
href拼接要严格匹配symbolId规则，比如symbolId: 'icon-[name]'，则:xlink:href="'#icon-' + name" - CSS 中设
fill: currentColor，这样传color就能直接控制图标颜色 - 全局注册或局部引入均可，推荐在
main.ts中全局注册一次
配完就能直接用 <svgicon name="home" size="20px" color="#1890ff"></svgicon>，所有 SVG 自动合并、按需渲染、样式可控。
