SVG图标复用需先定义<symbol>于隐藏<svg>中并设id和viewBox，再用<use href="#id">引用；内部路径fill="currentColor"，外部class控制尺寸与颜色，确保DOM顺序及ID准确。
直接用 <symbol> 定义模板、<use> 引用调用，就能复用 SVG 图形片段。核心是“定义一次，多处使用”，不重复写路径，改一处全更新。
把 symbol 放在隐藏的 svg 里
所有 <symbol> 要提前定义，浏览器才能找到。推荐统一放在页面顶部一个不可见的 <svg> 中：
- 加
style="display:none"或aria-hidden="true"隐藏它 -
<symbol>必须有id，比如id="icon-search" - 每个
<symbol>必须带viewBox，如viewBox="0 0 24 24"，这是缩放基准 - 别把
<symbol>塞进<defs>—— 语义不符，旧版 Safari 可能出问题
use 标签引用要写对 href
<use> 是调用开关，靠 href 找到对应 <symbol>：
- 用
href="#icon-search"，不是xlink:href（已废弃） - ID 必须完全一致：区分大小写、不能有空格或下划线（
icon-home✅，icon_home❌） - 可以在
<use>上设width、height、x、y控制位置和大小 - 支持多次引用同一个 ID，每个实例互不影响
让图标随文字变色和响应式缩放
颜色和尺寸要靠配合写法才能灵活控制：
立即学习“前端免费学习笔记（深入）”；
- 在
<symbol>内部的<path>上写fill="currentColor"，别写死颜色 - 给
<use>加 class，比如<use href="#icon-search" class="icon"></use> - CSS 中写：
.icon { width: 1em; height: 1em; fill: currentColor; } - 父元素改
color，图标自动同步；伪类如.icon:hover { color: #007bff; }也生效
常见不显示的原因和检查点
图标空白？大概率是这几个地方错了：
-
<use>出现在<symbol>定义之前 —— 调整 DOM 顺序，确保 symbol 先加载 - 控制台报错
Failed to execute 'use' on 'SVGElement': The provided value is not a valid URL—— 检查 href 值是否拼错或 ID 不存在 - 图标被裁剪或拉伸 —— 确认
<symbol>的viewBox和内部路径坐标匹配 - 颜色不变 —— 查看
<path>是否写了固定颜色，删掉，只留fill="currentColor"
