应使用<symbol>+<use>组合实现单次定义、多处复用：将图标集中定义在页面顶部隐藏<svg>中，每个<symbol>设唯一ID和viewBox，通过<use href="#icon-name">引用，确保DOM顺序正确、ID严格匹配、样式用fill="currentColor"配合外部color控制。
SVG图标直接内联时如何避免重复代码
直接把<svg>标签复制粘贴到每个页面里，看着简单，实际维护成本极高：改一个图标得全局搜索替换，样式不统一，还拖慢HTML体积。真正高效的复用，核心是让SVG只定义一次，但能被任意元素调用。
推荐方案：用<symbol> + <use>组合。把所有图标集中写在页面顶部或独立svg-sprite.svg文件中，每个图标用<symbol id="icon-home">包裹，之后 anywhere 都可用<use href="#icon-home">引用。
- 必须给
<symbol>加id，且id值不能含点、空格或特殊字符（如icon.user会失效） -
<use>的href属性在现代浏览器支持良好，但IE需用xlink:href兼容（可同时写两个） - 内联时
<symbol>块建议放在<body>最开头或<footer>末尾，避免阻塞渲染
外部SVG Sprite文件加载失败怎么办
把svg-sprite.svg作为外部文件引入（比如<use href="icons.svg#icon-search">），看似干净，但容易因CORS、MIME类型或路径错误导致图标不显示，且无法通过CSS控制颜色——因为外部SVG里的<use>内容不在当前DOM树中。
关键判断：如果项目已用构建工具（Webpack/Vite），优先走构建时内联；纯静态页且必须外链，则要确认三件事：
立即学习“前端免费学习笔记（深入）”；
- 服务器返回
icons.svg的Content-Type必须是image/svg+xml（Nginx需配置types { svg svg; }） - 路径必须绝对正确，
href中的#icon-x部分大小写敏感，且id必须与<symbol>完全一致 - 跨域请求时，服务端需返回
Access-Control-Allow-Origin: *，否则<use>读不到内容
SVG图标如何继承父级文字颜色
默认SVG内部fill写死为#000或currentColor没生效？常见原因是图标里显式设置了fill属性，覆盖了CSS继承。
解决方式很直接：在<symbol>内部的所有<path>、<circle>等图形元素上，删掉fill和stroke属性，或者统一设为fill="currentColor"和stroke="currentColor"。这样父容器设置color: #3498db，图标就自动变蓝。
- 不要依赖
<svg>根节点的fill——它不会向下继承到子元素 - 如果图标含多色（如微信图标红+白），则不能全用
currentColor，需保留部分固定色，并用CSS变量隔离可变色区域 - 使用
currentColor后，font-size也能控制图标大小（配合width/height: 1em）
Vue/React中动态插入SVG图标要注意什么
框架里用v-html或dangerouslySetInnerHTML注入SVG字符串，看似方便，实则危险且低效：XSS风险、无法复用、样式隔离失效、SSR下<use>可能不解析。
更稳妥的做法是封装成组件，例如Vue中：
<template>
<svg :class="className" :aria-label="label">
<use :xlink:href="`#icon-${name}`" :href="`#icon-${name}`" />
</svg>
</template>
注意两点：
- 必须同时写
:xlink:href和:href，否则IE11及部分旧版Safari不识别 - 确保
<symbol>已提前注入DOM（比如在App根组件mounted时一次性加载），否则use找不到目标 - 不要在循环中反复请求同一份
svg-sprite.svg，应预加载并缓存到内存
复杂点在于，图标ID命名冲突、构建时路径处理、SSR下document不可用——这些不是语法问题，而是工程链路里容易漏掉的环节。
