Icon 图标
20×20 的描线图标:圆头、等宽、线宽 1.8,颜色跟随文字。内置一小组界面常用的图标;不够时把路径写在 children 里,笔触自动保持一致。
全部内置图标
共 78 个。点一下复制名字。
用法
尺寸、填充与颜色
size 是像素边长;filled 改为实心;颜色用 CSS 的 color。
自定义路径
有含义还是装饰
API
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | IconName | — | 内置图标名。不传时渲染 children 里的路径。 |
size | number | 20 | 边长(px)。 |
label | string | — | 有含义的图标给一个名字:渲染成 role="img" 加 aria-label。不传则 aria-hidden。 |
filled | boolean | false | 实心:用 fill 而不是描线。 |
children | ReactNode | — | 自定义的 <path> 等 SVG 内容(20×20 画布)。 |
…rest | SVGAttributes<SVGSVGElement> | — | 其余属性和 ref 透传到 <svg>。 |
无障碍
- 默认是装饰性的(aria-hidden),读屏会跳过。
- 单独表达含义时传
label;放在按钮里时把名字写在按钮上(aria-label),图标保持隐藏。 - 不要只用图标的颜色表达状态,配上文字或不同的图形。