图标库必须用定义在内并设唯一id，才能被引用；否则无法复用、不可访问、不可样式化。
<symbol></symbol> 必须放在 <svg></svg> 内且带 id，否则 <use></use> 无法引用——这是图标库能复用的底线，不是可选项。
为什么不用 <img src="icon.svg" alt="如何利用HTML构建可扩展的图标库组件" > 做图标库
单个图标用 <img alt="如何利用HTML构建可扩展的图标库组件" > 看似简单，但实际会立刻卡在三个地方：
– 每个图标一次 HTTP 请求（哪怕同名图标重复出现）；
– 无法用 CSS 控制 fill 或 stroke（外部 SVG 文件被当作图片隔离）；
– 屏幕阅读器读不到 alt 以外的语义，<img alt="如何利用HTML构建可扩展的图标库组件" > 里塞再多 title 或 aria-label 都不生效。
真正可扩展的图标库必须让图标“活”在 DOM 里，而不是当资源加载。
<symbol></symbol> 定义要满足四个硬条件
一个可维护的 <symbol></symbol> 不是随便写个 id 就完事：
– 必须包裹在 <svg></svg> 标签内（推荐放在 开头或 里的隐藏 <svg></svg>）；
– 每个 <symbol></symbol> 必须有唯一、合法的 id（只含字母数字、短横线、下划线，不能以数字开头，不能含点号或斜杠）；
– 必须声明 viewBox（如 "0 0 24 24"），否则缩放失真、CSS em 单位失效；
– 必须包含 <title></title>（非 aria-label），这是屏幕阅读器识别图标的唯一可靠依据。
<use></use> 引用时常见失效原因
<use href="#icon-home"></use> 报错或不显示，90% 是以下之一：
– href 值写成 xlink:href 但没加命名空间（HTML5 中直接用 href 即可，IE 需 polyfill）；
– <symbol id="icon-home"></symbol> 还没加载完，JS 就执行了 document.querySelector('use')（得等 DOMContentLoaded 或用 document.getElementById('icon-home') 确认存在）；
– 图标路径用了相对 URL（如 href="icons/sprite.svg#icon-home"），跨域或路径错误导致静默失败；
– <use></use> 上写了 fill，但原始 <path></path> 里也写了 fill="red"（冲突时以 <path></path> 为准，应统一用 fill="currentColor"）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
动态切换图标状态要绕开两个坑
做图标选择器或状态反馈时，别直接操作 <use></use> 的 href：
– use.href.baseVal = '#icon-check' 在某些浏览器中不触发重绘；
– 更稳妥的是替换整个 <use></use> 节点，或用 class 控制显示（比如 <span class="icon icon--success"><use href="#icon-check"></use></span>，再通过 .icon--success use { display: inline } 控制）；
– 如果图标需响应深色模式，别依赖 JS 切换 fill，而应在 CSS 里用 @media (prefers-color-scheme: dark) + currentColor 自动适配；
– 所有图标类名必须可预测（如 icon-pdf、icon-folder-open），避免运行时拼字符串出错。
立即学习“前端免费学习笔记（深入）”；
真正难的不是把图标画出来，而是让每个<use></use> 都能被键盘聚焦、被屏幕阅读器朗读、被 CSS 变量控制大小、被 localStorage 记住状态——这些能力全靠 <symbol></symbol> 的结构契约撑着，缺一不可。 
