图标
图标是内联描边 SVG，绝不用图标字体。
CDN 上的图标字体加载失败的概率并不小（网络策略、沙箱、离线），而失败的样子很难看：纯图标按钮变成空框，或者退化成一枚风格完全不对的替代字形。图标出现得这么频繁，赌一个外部依赖不值得。
展开
查看全部
放大
缩小
适应画布
收起面板
重置
生成
模板
导入
关闭
已选
规格：viewBox="0 0 16 16"（加工 Tips 的灯泡用 20）；fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round。颜色始终来自父级的文本令牌——自带颜色的图标，在下一个状态里就是错的。
点击区三档
24 · 下限
32 · 默认
40 · 工具底板
纯图标控件的点击区 24 / 32 / 40，默认 32。24 以下没有档。 里面的图形可以更小：24px 底板与 32px 按钮都装 16px 图形。控件必须看起来比目标小时（开关轨道、滑块、11px 文字链接），保留视觉尺寸，用内边距把命中区补到 24，再用等量负外边距抵掉，排版不动。
三种图标，三种义务
- 装饰性图标紧挨自己的文字标签，加
aria-hidden，免得被读两遍。 - 可交互的纯图标按钮加
aria-label，说明动作而不是图形（「放大」，不是「加号」）。 - 承载状态的图标需要读屏文本——颜色和形状本身什么都传达不了。
方向性图标——箭头、撤销、缩进——需要一个 RTL 可翻转的 class。时钟、对勾、播放、logo、带时间轴的图表永不翻转。能选上下箭头就选上下箭头：它们不需要翻转，属性卡片的展开箭头因此是上下而不是左右。