图标
使用 Lucide 图标库：线性、2px 描边、24px 网格，风格与 Noto Sans SC 协调。
常用图标
examples/foundations/icons.html
尺寸
examples/foundations/icon-sizes.html
规则：图标尺寸跟随相邻文字。 12px 文字配 14px 图标，14px 文字配 16px 图标。
在项目中使用
| 项目类型 | 做法 |
|---|---|
| Vue | @lucide/vue：<ShieldCheck class="size-4" aria-hidden="true" />（v2 的做法） |
| React | lucide-react |
| 纯 HTML | 内联 SVG。在本仓库示例中写占位符，运行 pnpm icons 自动替换为 SVG |
html
<!-- 写 -->
<i data-lucide="shield-check" class="size-4 text-brand"></i>
<!-- pnpm icons 之后 -->
<svg data-lucide="shield-check" class="size-4 text-brand" … aria-hidden="true">…</svg>使用建议
推荐
- 装饰性图标一律
aria-hidden="true"；只有图标的按钮在按钮上加aria-label - 颜色用
text-*控制（图标使用currentColor），默认继承文字颜色 - 同一含义始终使用同一个图标：持牌
shield-check、即将推出clock、外链external-link
避免
- 混用其他图标库（Heroicons、Font Awesome）或 emoji
- 修改描边宽度
- 用字符代替图标（v2 多选中的
⌄、×）