SVG sprite是中大型项目最实用、可维护性最强的图标方案，通过合并图标为单个icons.svg并用<use>按需调用，兼顾性能、样式控制与无障碍；推荐用svg-sprite CLI、在线生成器或手写规范实现，关键注意ID唯一性、路径正确性、MIME类型及file://协议限制。
SVG sprite 是目前最实用、可维护性最强的图标系统方案，尤其适合中大型项目。它把多个图标合并进一个 SVG 文件，用 <use> 按需调用，既减少 HTTP 请求，又保留样式控制和无障碍能力 —— 关键是，它不依赖构建工具也能跑起来。
怎么生成 icons.svg sprite 文件
手动拼接容易出错，推荐用工具生成。主流方式有三种：
- 用
svg-spriteCLI 工具：安装后执行svg-sprite --symbol --symbol-dest ./dist/icons.svg ./src/icons/*.svg，自动提取<path>并包裹进<symbol> - 用在线生成器（如
SVGOMG+SVG Sprite Generator）：上传多个 SVG，下载合并后的icons.svg，注意检查每个<symbol>的id是否唯一、无空格或特殊字符 - 手写时必须确保：根元素是
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">；每个图标用<symbol id="icon-home">...</symbol>包裹；内部不能含<style>或<script>
HTML 中怎么引用 sprite 里的图标
核心是 <use> 标签配合 href 属性，但路径写法和加载时机容易翻车：
- 绝对路径最稳：
<svg><use href="/static/icons.svg#icon-search"></use></svg>（注意开头斜杠） - 相对路径在开发服务器下可能失效，比如
./icons.svg#icon-search在子路由页会 404 -
<use>不触发 DOM 加载完成事件，若图标没显示，先检查浏览器控制台是否报Failed to load resource: net::ERR_ABORTED—— 这说明icons.svg路径不对或服务器没返回Content-Type: image/svg+xml - 不要把
<svg>写成自闭合：<svg />会导致<use>失效，必须写成<svg><use></use></svg>
怎么用 CSS 控制 sprite 图标的颜色和尺寸
内联 SVG 的优势在于能穿透到子元素，但 sprite 引用方式限制了直接选择器范围：
立即学习“前端免费学习笔记（深入）”；
- 颜色只能通过
fill: currentColor继承父级文字色，所以要在<symbol>内部所有图形上显式设fill="currentColor"（别信默认继承） - 尺寸靠外层
<svg>控制：<svg class="icon icon-lg">...</svg>，然后 CSS 写.icon { width: 1em; height: 1em; }，再用font-size调整体积 - 无法用 CSS 选中
<use>引用的内容（它是 shadow DOM-like 行为），所以不要写use:hover { fill: red }—— 改用.icon:hover > use { fill: red }无效，正确做法是给外层<svg>加 hover 样式，并确保<symbol>内图形用了fill="currentColor" - 如果需要不同颜色的同一图标，得在
<symbol>里用class区分路径，再靠外层类名控制，例如<path class="icon-fill" />→.icon-success .icon-fill { fill: #2ecc71; }
为什么本地双击打开 HTML 时 sprite 总不显示
这是最常被忽略的兼容性陷阱：Chrome/Firefox 禁止 file:// 协议下跨文件读取 SVG sprite，会静默失败，控制台只报 CORS 错误（实际不是 CORS，是协议限制）。
- 唯一可靠解法：起一个本地 HTTP 服务，哪怕只是
npx serve或 VS Code 的 Live Server 插件 - 开发阶段别用
open index.html，改用http://localhost:5000/index.html - 上线前务必确认服务器对
.svg文件返回了正确的Content-Type: image/svg+xml，Nginx 需加types { image/svg+xml svg; } - IE11 不支持
href属性（只认旧版xlink:href），如需兼容，得用 polyfill 或降级为内联 SVG
真正难的不是生成 sprite，而是让 <use> 在各种路径、协议、缓存策略下稳定工作。很多团队卡在“开发能跑，打包后白屏”，问题八成出在路径拼接或 MIME 类型配置上。
