图标不显示、颜色不变、缩放变形的根源在于dom顺序错误、id不匹配或viewbox缺失；需将置于开头隐藏svg中，id严格大小写且无特殊字符，内部路径fill必须为currentcolor，且每个须显式声明正确viewbox。
直接把 <symbol></symbol> 塞进页面就能复用，但多数人卡在图标不显示、颜色不变、缩放变形这三步上——核心不是“会不会写”，而是“DOM 顺序、ID 匹配、viewBox 是否就位”这三个硬条件没满足。
为什么 <use href="#icon-home"></use> 引用后图标空白
最常见原因：浏览器解析到 <use></use> 时，对应的 <symbol id="icon-home"></symbol> 还没出现在 DOM 里，或根本没定义。
-
<symbol></symbol>必须出现在所有<use></use>之前，推荐统一放在开头一个隐藏<svg></svg>块中：<svg xmlns="http://www.w3.org/2000/svg" style="display:none">...</svg> - ID 严格区分大小写、不能含空格或下划线（
icon-home✅，icon_home❌） - 控制台若报
Failed to execute 'use' on 'SVGElement': The provided value is not a valid URL.，说明href指向的 ID 不存在或拼写错误 -
<symbol></symbol>必须带viewBox属性（如viewBox="0 0 24 24"），否则渲染会拉伸或裁剪
怎么让 <use></use> 图标随文字颜色自动变色
关键不在 <use></use> 上设 fill，而在 <symbol></symbol> 内部路径是否用了 fill="currentColor"。
- 原始 SVG 中所有
<path></path>、<circle></circle>等图形元素，必须把内联fill="#333"改成fill="currentColor" -
<use></use>外层建议包一层<svg class="icon"></svg>，CSS 写：.icon { width: 1em; height: 1em; fill: currentColor; } - hover 或暗色模式生效靠父容器控制：
.icon:hover { color: #007bff; }，而不是use:hover { fill: red }（后者无效）
<symbol></symbol> 的 viewBox 怎么设才不拉伸变形
viewBox 不是可选项，它是缩放基准——决定了图标坐标系原点和单位尺寸。设错就会偏移、裁剪、留白。
- 每个
<symbol></symbol>都必须显式声明viewBox，值取设计稿原始画布范围，比如 Figma 导出的 24×24 图标就写viewBox="0 0 24 24" - 删掉
<symbol></symbol>上的width/height属性（它无效，还可能干扰渲染） - 检查内部
<path d="..."></path>的坐标是否落在viewBox范围内；如果图标只显示右下角，大概率是d值超出了0–24范围 -
<use></use>的尺寸由其父容器或 CSS 控制，它会按viewBox等比缩放，不需要重复写viewBox
最容易被忽略的是：所有 <symbol></symbol> 必须在 HTML 解析阶段就存在，不能靠 JS 动态插入，也不能藏在未加载的外部文件里；哪怕只漏了一个 viewBox，整个图标在 Safari 或旧 WebView 中都可能静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
