直接内联多个SVG变慢是因为每个独立<svg>标签都会触发一次DOM解析、样式计算和布局重排，100个图标即100次重复开销；而<symbol>+<use>方案通过一份定义、多处引用实现零重复复用，避免性能损耗。
为什么直接内联多个 SVG 会变慢
每个独立的 <svg> 标签都会触发一次 DOM 解析、样式计算和布局重排。100 个图标就等于 100 次重复开销，尤其在循环渲染（如 v-for 或 {icons.map()}）中，页面首屏卡顿明显。
常见错误现象：Failed to execute 'use' on 'SVGElement': The provided value is not a valid URL. 或图标空白、尺寸错乱、hover 不生效——多数不是代码写错，而是结构没对齐。
-
<symbol>必须提前出现在 DOM 中，且不能包裹在<script>后或动态插入 - 所有
<symbol>应统一放在<body>开头一个隐藏的<svg style="display:none">里 - 每个
<symbol>必须带viewBox="0 0 24 24"（宽高比必须与内部路径一致） - ID 命名只允许字母、数字、连字符，
icon-home✅，icon_home❌，icon home❌
如何用 <symbol> + <use> 实现零重复复用
核心是把图标定义和实例化分离：一份定义（<symbol>），多处引用（<use href="#icon-home"></use>），避免复制粘贴路径字符串。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把所有原始 SVG 文件手动或脚本清理：删掉根
<svg>标签，保留<path>等绘图元素，补上统一viewBox - 合并进一个
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">块，每个图标包在<symbol id="icon-search">内 - 引用时用
<svg class="icon"><use href="#icon-search"/></svg>，不要裸写<use> -
<use>上不设fill或width，全部靠 CSS 控制：.icon { width: 1em; height: 1em; fill: currentColor; }
为什么 use:hover { fill: red } 不生效
<use> 元素本身不渲染图形，它只是引用模板；CSS 选择器无法穿透到被引用的 <path> 内部，所以直接给 <use> 写伪类无效。
正确做法是把交互逻辑放在父容器上：
- 所有
<path>在<symbol>内必须写fill="currentColor"，删掉硬编码颜色（如fill="#333"） - 外层
<svg class="icon">是实际参与样式的节点，.icon:hover { color: #007bff; }才能触发颜色继承 - 暗色模式切换只需改
:root或组件级color，无需动 SVG 结构 - 如果需要动画（如旋转、缩放），加
transform到.icon，别碰<use>
哪些地方最容易被忽略
不是“会不会用”，而是“用对没用对”。几个关键点常被跳过：
-
<symbol>里混入<style>或<defs>—— Safari 旧版会静默失败，图标消失无报错 - 用
img src="icon.svg"替代内联 —— 失去 CSS 控色能力，每个图标多一次 HTTP 请求，CDN 缓存还可能不更新 - 在框架中用
v-html或dangerouslySetInnerHTML注入 SVG 字符串 —— 绕过框架生命周期，<use>ID 可见性不可控 - 没加
role="img"和aria-label—— 屏幕阅读器读不出图标语义，可访问性直接不达标
