Vite 中优化 SVG 图标引入应按场景选插件：图标多选 vite-plugin-svg-icons 实现雪碧图合并，需绝对路径配置、注册导入及封装组件；图标少选 vite-svg-loader 转为可传参组件，注意 SVGO 配置与源文件清理。
在 Vite 项目中优化 SVG 图标引入，核心是兼顾开发体验、运行时性能和样式可控性。直接用 <img> 简单但无法变色；内联原始 SVG 可控但代码冗长；而借助插件实现自动化管理才是生产级方案。关键不在“能不能用”，而在“怎么用得轻、快、稳”。
优先选 vite-plugin-svg-icons 实现雪碧图合并
适合图标数量较多（10+）、需统一管理、强调加载性能的场景。它把所有 SVG 合并为一个 <svg><symbol></symbol></svg> 雪碧图，只发一次请求或内联进 HTML，彻底避免重复加载。
-
配置要点：
iconDirs必须传绝对路径（如path.resolve('src/assets/icons')），symbolId命名要与后续引用一致（如'icon-[name]'对应#icon-home） -
必须写这行：在
main.ts顶部加import 'virtual:svg-icons-register'，否则雪碧图不会注入 DOM -
推荐封装组件：
<SvgIcon name="home" color="#1890ff" />，内部用<use href="#icon-home">，fill 统一设为currentColor，靠 CSS 控制颜色
小项目或需单图标动态控制时用 vite-svg-loader
适合图标少、强调单个图标独立变色/动画、或已有 SVG 文件需快速接入的项目。它把每个 SVG 编译成 Vue 组件，支持 props 传色、响应式尺寸、甚至 hover 变色逻辑。
-
关键配置：启用
svgoConfig中的convertColors插件，并设currentColor: true，这样 SVG 原文件里的fill="#000"会自动转为fill="currentColor" -
用法简洁：直接
import HomeIcon from '@/assets/icons/home.svg'，然后<HomeIcon color="red" /> - 注意：每个 SVG 都会生成一个组件，图标多时包体积略增，但热更新快、调试直观
规避常见坑点
很多问题不是插件不行，而是配置细节没对上：
立即学习“Java免费学习笔记（深入）”；
-
路径报错：
iconDirs写相对路径（如'src/assets/icons'）会导致扫描失败，必须用path.resolve() -
颜色不生效：SVG 源文件里自带
fill属性会覆盖currentColor，要么手动删掉，要么靠 SVGO 的removeAttrs插件自动清除 -
开发时看不到图标：检查
virtual:svg-icons-register是否在main.ts最顶部，且没被条件编译包裹 -
生产环境图标丢失：确认构建后雪碧图是否已注入 HTML 的
<body>底部（插件默认行为），或检查inject配置是否误设为'none'
补充建议：图标目录与命名规范
工具再好，也依赖结构清晰：
- 图标统一放在
src/assets/icons，按功能分文件夹（如nav/、user/），便于symbolId: 'icon-[dir]-[name]'生成语义化 ID - 文件名用短横线（
user-profile.svg），避免大驼峰或下划线，防止 ID 生成异常 - 导出 SVG 时勾选 “优化” 和 “移除填充色”，Figma/Sketch 插件通常有此选项，从源头减少手动清理
