用 svg-sprite cli 生成 icons.svg，不可手动拼接：它自动清理冗余属性、校验id唯一性（仅字母数字和短横线）、剔除 script/style、统一 viewbox、确保根 svg 含 xmlns 且无 width/height；引用需绝对路径、image/svg+xml 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重复时自动重命名） - 校验 ID 唯一性（只允许字母、数字和短横线）
- 剔除
<script></script>和内联<style></style> - 统一
viewBox格式（如0 0 24 24） - 确保根
<svg></svg>含xmlns="http://www.w3.org/2000/svg"且无width/height——这是浏览器识别为合法 sprite 的硬性要求
href 必须用绝对路径，且服务必须返回 image/svg+xml
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 拒绝加载
所有 <path></path> 必须显式写 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（无效）
避免自闭合，且不能放在 <template></template> 或 <noscript></noscript> 中
这种写法会导致整个 <use></use> 渲染失败，必须写成完整标签：
<svg class="icon"><use href="/icons.svg#icon-x"></use></svg>
另外，<use></use> 不触发 DOM 加载事件，图标没显示时：
- 先检查控制台是否报资源加载失败（路径/MIME 问题）
- 再确认
<svg></svg>是否被包裹在<template></template>、<noscript></noscript>或<iframe></iframe>中——这些位置浏览器不会执行<use></use>解析
最易被忽略的是：每个 <symbol></symbol> 内部图形元素的 fill 属性必须是 "currentColor" 字面量，哪怕你全局设了 color，漏掉一个就整个图标变黑或透明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
