SVG 与 是构建轻量、可复用、易维护前端图标库的核心机制，通过 定义带 viewBox 和 的不可见模板，再用 实例化，支持样式控制、无障碍访问和按需渲染。
SVG <symbol></symbol> 与 <use></use> 是构建轻量、可复用、易维护的前端图标库的核心机制。它不依赖外部文件或 JS 框架，支持样式控制、无障碍访问和按需渲染，是现代 SVG 图标方案的推荐实践。
用 定义图标，统一管理
<symbol></symbol> 是一个不可见的模板容器，必须配合 id 使用。它通常放在文档顶部（如 <svg></svg> 内、 开头或单独的 <defs></defs> 区域），不直接渲染，只供后续引用。
每个 <symbol></symbol> 应设置 viewBox（定义坐标系）和语义化 title（提升可访问性）：
用
<use></use> 通过 xlink:href（HTML5 中可简写为 href）指向 <symbol></symbol> 的 id，实现零重复绘制。它支持内联样式、CSS 类、尺寸控制和伪元素交互。
立即学习“前端免费学习笔记（深入）”；
- 基础用法：
<use href="#icon-home"></use> - 设置大小：在
<use></use>上加width/height，或用 CSS 控制font-size+width: 1em - 覆盖颜色：对
<use></use>设置fill，前提是原始<path></path>未写死fill属性（推荐用fill="currentColor"） - 响应式：结合
em单位或 CSS 自定义属性，例如style="--icon-size: 1.5em"，再在<use></use>中用width="var(--icon-size)"
优化建议与常见注意点
实际项目中，几个细节决定体验和可维护性：
-
避免内联
style在<symbol></symbol>中：把颜色、描边等交给<use></use>或 CSS 控制，保持符号纯净 -
统一
viewBox尺寸：如全部设为"0 0 24 24"，方便 CSS 统一缩放，也利于设计系统对齐 -
服务端或构建时注入：不要手写大量
<symbol></symbol>；可用 Webpack 插件（如svg-sprite-loader）或 Vite 插件自动聚合 SVG 文件 -
兼容性处理：IE 不支持
href简写，需保留xlink:href（或用 polyfill）；也可通过document.createElementNS动态补全
与字体图标、雪碧图的本质区别
相比传统方案：
– 字体图标依赖字体渲染，无法精确控制路径、不支持渐变/滤镜、语义弱；
– 雪碧图需计算背景偏移、放大失真、无法单色换肤；
– <symbol>+<use></use></symbol> 是原生矢量，支持所有 SVG 特性，图标即代码，可被 JS 操作、被屏幕阅读器识别、被搜索引擎索引。
