SVG图标复用需先用定义模板并置于开头隐藏中，ID唯一、含viewBox和；再用引用，确保DOM顺序正确，通过currentColor和CSS控制颜色尺寸。
用 <symbol></symbol> 定义图标模板，再用 <use></use> 引用，就能实现真正意义上的 SVG 图标复用——改一处，全更新；不发请求，不重复代码；颜色、尺寸、语义、无障碍全部可控。
把 symbol 放在哪儿才有效
<symbol></symbol> 本身不渲染，必须提前定义在 DOM 中，且确保浏览器解析到它之后，<use></use> 才能引用成功。推荐统一放在 开头一个隐藏的 <svg></svg> 里：
- 加
style="display:none"或aria-hidden="true"防止占位和干扰可访问性 - 每个
<symbol></symbol>必须有唯一合法 ID（如id="icon-search"，不能是icon_search或1icon） - 必须显式写
viewBox="0 0 24 24"（按原始设计尺寸填写），这是缩放和对齐的基准 - 内部要包含
<title></title>（不是aria-label），供屏幕阅读器识别
use 标签怎么写才不出错
<use></use> 是调用开关，靠 href 找到对应 <symbol></symbol>。现代写法只用 href，不用 xlink:href（已废弃）：
- 语法是
<use href="#icon-search"></use>，开头的#不能漏 -
<use></use>必须出现在对应<symbol></symbol>的 DOM 之后，否则空白无报错 - 支持直接设
width、height、x、y控制位置和大小 - 可多次引用同一 ID，每个实例互不影响，样式也可单独控制
让颜色和尺寸真正灵活可控
颜色和尺寸不能靠写死值，而要靠分层配合：
立即学习“前端免费学习笔记（深入）”；
- 在
<symbol></symbol>内部所有路径上写fill="currentColor"（删掉任何fill="#000"） - 给
<use></use>外层包一层<svg class="icon"></svg> - CSS 中写：
.icon { width: 1em; height: 1em; fill: currentColor; } - 父元素改
color，图标自动同步；.icon:hover { color: #007bff; }也立即生效
常见不显示的原因和快速检查点
图标空白？大概率是这几个地方错了：
-
<use></use>出现在<symbol></symbol>定义之前 —— 调整 DOM 顺序，确保先定义后引用 - 控制台报错
Failed to execute 'use' on 'SVGElement': The provided value is not a valid URL—— 检查href是否拼错，或 ID 是否不存在、大小写不符 - 图标被裁剪或拉伸 —— 确认
<symbol></symbol>的viewBox和内部路径坐标匹配（比如路径不要写d="M100 100"） - 颜色不变 —— 查看
<path></path>是否写了固定颜色，删掉，只留fill="currentColor"
