## 19 · 图标 Icon

### 19.1 用途
用一个字形表达状态或动作（选中、警告、返回、更多）。移动端与桌面端的差别在**尺寸基线**：手指操作要求图标更大、且图标自身从不承担点击 —— 点击由包裹它的 44px 按钮提供。

### 19.2 结构（anatomy）
- `icon`：根元素，一个固定边长的内联盒子，负责尺寸与颜色
- `glyph`：字形节点，纯符号或内联 SVG，不带语义
- `label`：可选的无障碍名称，有值时图标成为「有语义的图」，无值时对读屏隐藏
- `size`：四档边长（small 16 / default 20 / large 24 / xlarge 32）
- `tone`：颜色来源（继承父级或取语义色）

### 19.3 变体维度
- `size`：`small` / `default` / `large` / `xlarge`
- `tone`：`default` / `brand` / `secondary` / `danger`
- `spin`：`false` / `true`

### 19.4 状态
- default：常态（静态图）
- spinning：持续旋转，仅表示「进行中」，不表示成功
- disabled：无独立禁用态 —— 由父级按钮 / 单元格置灰，图标继承其颜色

### 19.5 交互与触控
- 图标自身不是热区；可点时由父级按钮提供不小于 44×44 的点击区
- 图标与相邻文字的间距取 4px（与按钮内图标一致）
- `spin=true` 在 `prefers-reduced-motion: reduce` 下停止旋转（无障碍硬要求）
- 同一行内图标与文字基线对齐（`vertical-align: -0.125em`），避免文字被顶高

### 19.6 无障碍
- `label` 有值时 `role="img"` + `aria-label`，读屏读出该名称
- `label` 为空时 `aria-hidden="true"`，纯装饰不进读屏序列
- 图标不得作为唯一信息载体：颜色变化必须伴随文字或 label
- 语义色图标与背景的对比度不低于 3:1（WCAG 1.4.11 非文本对比）

### 19.7 doNotInvent
- 图标资源清单（本仓库不引图标字体，字形由各端内置表或内联 SVG 提供）
- 图标更换 / 过渡动画
- 点击图标自身触发动作

### 19.8 unknowns
- 业务侧自定义字形的注册方式
- 图标与文字组合时的推荐最小间距（本实现取 4px）