图标 Icon(纯 H5)

对齐 IconSpec v1:name 查表渲染内联 SVG,描边 1.5px,尺寸 16/20/24/32,语义色与旋转,label 决定读屏语义。

1. 尺寸档位(关键字 + 任意 CSS 长度)

size 只驱动 CSS 变量 --kole-icon-size(落地为 font-size),SVG 边长恒为 1em,故关键字与任意 CSS 长度走同一条路径。

2. 语义色 tone

语义色只改 color(图标描边/填充走 currentColor);color 属性优先于 tone。图标不作为唯一信息载体:颜色变化一律伴随文字或 label。

3. 旋转 spin

spin 表示「进行中」;样式表在 prefers-reduced-motion: reduce 下把动画置 none(不会旋转)。

4. 无障碍:label 有值 / 无值

同一张图标:有 label 时是「有语义的图」,无 label 时是装饰。判据只看 label 是否有值,与 name 无关。

5. 图标名查找(core 层内联 + 别名折叠)

查找只认注入表里的名字(别名在注入时已折叠成终态表);查不到时用默认插槽兜底,不抛错、不显示错误图标。

6. 实际场景

图标自身不是热区:按钮 / 排序表头由原生 button 提供键盘可达与焦点环,图标只负责图形语义。

7. 历史兼容(icon 字形字符)

既有 icon(字形字符,默认 ★)继续可用;name 有值时 name 优先,故旧调用点不破、新调用点用 name。