svg-sprite CLI可自动生成合法icons.svg，自动清理冗余属性、校验ID唯一性、剔除script/style、统一viewBox，并确保根svg含xmlns且无width/height；引用时需绝对路径、正确MIME类型及fill="currentColor"显式声明。
用 svg-sprite CLI 生成 icons.svg，别手拼
手动合并上千个 SVG 文件几乎必然出错：ID 重复、xmlns 缺失、<style></style> 残留、viewBox 不一致。直接放弃手写，用 svg-sprite CLI 自动生成合法文件：svg-sprite --symbol --symbol-dest ./dist/icons.svg ./src/icons/**/*.svg
它会自动：清理冗余属性、校验 ID 唯一性（只允许字母数字和短横线）、剔除 <script></script> 和内联 <style></style>、统一 viewBox 格式。生成的根 <svg></svg> 一定带 xmlns="http://www.w3.org/2000/svg" 且无 width/height —— 这是浏览器识别为合法 sprite 的硬性要求。
href 必须用绝对路径，且服务必须返回 image/svg+xml
控制台报 Failed to load resource: net::ERR_ABORTED？90% 是路径或 MIME 类型问题：
• href 必须以斜杠开头：/static/icons.svg#icon-search，不能写 ./icons.svg 或 icons.svg（子路由下 404）
• 双击 HTML 打开（file:// 协议）时 <use></use> 直接失效，必须走 HTTP 服务
• Nginx 需加配置：types { image/svg+xml svg; }；Apache 要启用 AddType image/svg+xml .svg
• 服务器响应头必须含 Content-Type: image/svg+xml，否则 Chrome/Firefox 拒绝加载
所有 必须设 fill="currentColor"，别依赖默认值
<use></use> 引用的内容不继承外部 CSS，除非你主动约定：
• 每个 <symbol></symbol> 内部的 <path></path>、<circle></circle> 等图形元素，必须显式写 fill="currentColor"（不能留空，也不能写 fill="#000"）
• 外层 <svg></svg> 加 class：<svg class="icon"><use href="/icons.svg#icon-home"></use></svg>
• CSS 控制：.icon { width: 1em; height: 1em; color: #333; } —— 颜色和尺寸全靠这个组合生效
• hover 变色写法：.icon:hover { color: #007bff; }，不是 use:hover（无效）
避免
<svg></svg> 这种写法会导致整个 <use></use> 渲染失败，必须写成完整标签：<svg class="icon"><use href="/icons.svg#icon-x"></use></svg>
另外，<use></use> 不触发 DOM 加载事件，图标没显示时：
• 先检查控制台是否报资源加载失败（路径/MIME 问题）
• 再确认 <svg></svg> 是否被包裹在 <template></template>、<noscript></noscript> 或 中 —— 这些位置浏览器不会执行 <use></use> 解析
• 最稳妥的位置是 开头，紧贴 <header></header> 或第一个内容块之前
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是“怎么加一个图标”，而是当图标数突破三位数后，id 冲突、路径跳转失效、颜色突然不响应、构建产物里图标集体消失——这些都源于早期对 fill="currentColor" 的忽略、对绝对路径的侥幸，以及把 <svg></svg> 当成省事写法。 
