图标
线条型图标,1.5px 描边,三档尺寸。这是图标使用规范,不是随包附送的通用图标库—— 当前只交付尺寸与描边 token。署名标记与朱砂印章归品牌。
尺寸与描边
| Token | 值 | 用途 |
|---|---|---|
--icon-sm | 16px | 行内、密集列表 |
--icon-md | 20px | 默认 |
--icon-lg | 24px | 导航、工具栏 |
--stroke-mark | 1.5px | 签名描边 |
四条规则
- 只用线条型图标,禁止填充型——这条针对图标集的风格, 数据标记(图表柱、评分方块)不在此列
- 禁止两个图标库同页混用——描边风格不一致会立刻被看出来
- 图标不能独立承载信息——必须有可访问名称或相邻文字
- SVG 缩放时用
vector-effect: non-scaling-stroke—— 这是 1.5px 在海报尺度下仍然是 1.5px 的关键
采用者在自己的项目中选择一个符合以上规则的图标库;本包不临时混入 CDN 图标, 也不把品牌 SVG 伪装成 UI 图标。
命中区域
图标的视觉尺寸和命中盒是两件事。 一个 16px 的图标按钮仍然需要 ≥24px 的可点击区域(移动端 44/48)。 扩命中盒,不必放大文字——这是田野审计在三个生产站上都发现的问题。
本包没有随附 UI 图标资产,因此这里不拿字符或临时图形冒充图标。采用者选定单一图标库后, 让视觉尺寸为 16px 的实际图标落在 ≥24px 的可点击元素内即可。
与品牌的分界
图标和 Logo 的线宽刻意不同:图标 --stroke-mark 1.5px,
Logo 2.5px。这不是不一致——品牌标识被允许且必须偏离 UI 图标的常规设定,
以获得足够的物理重量。把 Logo 改成 1.5px 是明确的禁止项。
| UI 图标 | 品牌 Logo | |
|---|---|---|
| 线宽 | 1.5px(--stroke-mark) | 2.5px |
| 填充 | 禁止填充型 | 必须实心底座 |
| 深色模式 | 跟随主题 | 不变色 |
| 归属 | 全局样式 | 品牌 |