symbol 必须置于 use 之前且同文档，id 严格匹配、viewbox 必填且与路径坐标一致，图形元素 fill 必须为 currentcolor，use 外层需包裹 svg 并由其控制样式与尺寸。
symbol 必须放在 use 之前，且共处同一文档
浏览器解析 <use></use> 时会立即查找目标 <symbol></symbol> 的 ID，如果还没解析到、或不在当前 HTML 文档内，就静默失败——页面空白，控制台也不报错。
常见错误：把 <symbol></symbol> 放在 底部、JS 动态插入、或单独存为 icons.svg 后用 <use href="icons.svg#icon-home"></use> 引用（部分浏览器不支持跨文件引用）。
- 正确做法：所有
<symbol></symbol>集中放在开头一个隐藏的<svg style="display:none"></svg>里 - ID 必须严格匹配：
icon-home✅，icon_home❌，ICON-HOME❌（区分大小写） - 不能用
xlink:href（已废弃），统一用href="#icon-home"
symbol 必须带 viewBox，且值要和图形坐标匹配
<symbol></symbol> 的 viewBox 不是可选项，它定义了图标的原始坐标系。没有它，<use></use> 渲染时会拉伸、裁剪或留白；设错（比如 viewBox="0 0 100 100" 但路径 d 坐标只在 0–24 范围）也会导致偏移或截断。
- 每个
<symbol></symbol>都要显式写viewBox="0 0 24 24"（按设计稿实际画布尺寸填） - 删掉
<symbol></symbol>上的width/height属性——它们无效，还可能干扰渲染 - 检查内部
<path d="..."></path>的坐标是否落在viewBox范围内（例如不要出现d="M100 100"）
颜色必须由 currentColor 驱动，不能写死在 path 里
如果 <path fill="#333"></path> 锁死了颜色，外部 CSS 或 fill="currentColor" 都无法覆盖。真正起效的是路径自身声明 fill="currentColor"，再靠父级容器的 color 或 fill 控制。
-
<symbol></symbol>内所有图形元素（<path></path>、<circle></circle>等）都显式写fill="currentColor" -
<use></use>外层建议包一层<svg class="icon"></svg>，CSS 中统一设.icon { fill: currentColor; width: 1em; height: 1em; } - 伪类交互（如 hover）必须作用于父容器：
.icon:hover { color: #007bff; }，<use>:hover { fill: red }</use>无效
use 不直接渲染，尺寸靠外层控制
<use></use> 本身不接受样式继承，也不响应伪类，它只是引用模板的“占位符”。最终尺寸、颜色、交互都得交给它的父容器（通常是 <svg></svg>）来管。
- 避免在
<use></use>上直接写fill或width/height（旧浏览器兼容性差，且破坏 CSS 控制流） - 推荐用 em 单位：
.icon { font-size: 1.2em; width: 1em; height: 1em; }，适配缩放和深色模式 - 高 DPI 屏幕下别用固定像素值（如
width="16"），否则模糊；也别用transform: scale()，那不是矢量缩放
<symbol></symbol> 没被提前解析、viewBox 和路径坐标对不上、或者路径自己锁死了颜色——这三处出错，图标就彻底消失，连报错都不会给你。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
