SVG <symbol> 与 <use> 构建图标管理系统，实现一次定义、多处复用、样式可控、语义清晰；图标集中定义于隐藏 <svg> 的 <defs> 内，通过唯一 ID 调用，支持 CSS 控制、可访问性及分类按需加载。
用 SVG <symbol> 和 <use> 构建图标管理系统，核心是“一次定义、多处复用、样式可控、语义清晰”。它不依赖外部字体或 JS 框架，所有图标集中管理，改一处全站同步更新。
把图标统一定义在 <symbol> 里
<symbol> 是不可见的模板容器，只负责定义图形结构。每个图标必须有唯一 id，并建议设置 viewBox（如 "0 0 24 24"）保证缩放一致，加上 <title> 提升可访问性。
- 推荐放在页面顶部的隐藏
<svg>中（aria-hidden="true"），避免渲染干扰 - 不要直接写
<svg><symbol>...</symbol></svg>——<symbol>必须嵌套在<defs>或根<svg>内才有效 - 示例：
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position: absolute; width: 0; height: 0;"><br> <defs><br> <symbol id="icon-home" viewBox="0 0 24 24"><br> <title>首页</title><br> <path d="M10 20v-6h4v6h5v-8h-3V7a1 1 0 0 0-2 0v5H8v8z"/><br> </symbol><br> </defs><br></svg>
用 <use> 按需调用图标
<use href="#icon-home"> 就像“实例化”一个图标模板，支持内联样式、CSS 类、尺寸控制，且不影响原始定义。
- 可自由设置宽高：
<use href="#icon-home" width="24" height="24"/> - 可绑定 class 控制颜色或动效：
<use href="#icon-home" class="icon icon--primary"/> - 支持伪元素和 CSS 变量：
.icon { fill: var(--icon-color, currentColor); } - 避免写死尺寸，优先用
em或rem保持与文字流一致
分类管理 + 按需加载更高效
单一大图标库适合小项目；中大型系统建议按功能或业务域拆分 SVG 文件（如 icons-navigation.svg、icons-status.svg），再通过 <object> 或动态 fetch 加载。
立即学习“前端免费学习笔记（深入）”；
- 静态引入：用
<object data="icons-navigation.svg" type="image/svg+xml"></object>，加载后 DOM 可被 JS 访问 - 动态引入：JS 获取 SVG 内容后注入
document.body前部，确保后续<use>能查到定义 - 构建时可用工具（如 svg-sprite-loader）自动合并 SVG 并生成 symbol ID 映射表
兼顾可访问性与维护性
图标不是装饰，而是信息载体。系统级管理必须考虑语义和长期可维护性。
- 每个
<symbol>都应包含<title>，必要时加<desc> - 避免用图标单独表达关键操作（如仅靠垃圾桶图标表示删除），配合文字标签使用
- 命名规范很重要：用 kebab-case + 语义前缀，如
icon-download、status-error - 定期清理未使用的
<symbol>，防止图标库膨胀
