跳到主要内容

Icon图标

20×20 的描线图标:圆头、等宽、线宽 1.8,颜色跟随文字。内置一小组界面常用的图标;不够时把路径写在 children 里,笔触自动保持一致。

全部内置图标

共 78 个。点一下复制名字。

用法

尺寸、填充与颜色

size 是像素边长;filled 改为实心;颜色用 CSS 的 color。

自定义路径

有含义还是装饰

API

属性

属性类型默认值说明
nameIconName—内置图标名。不传时渲染 children 里的路径。
sizenumber20边长(px)。
labelstring—有含义的图标给一个名字:渲染成 role="img" 加 aria-label。不传则 aria-hidden。
filledbooleanfalse实心:用 fill 而不是描线。
childrenReactNode—自定义的 <path> 等 SVG 内容(20×20 画布)。
…restSVGAttributes<SVGSVGElement>—其余属性和 ref 透传到 <svg>。

无障碍

  • 默认是装饰性的(aria-hidden),读屏会跳过。
  • 单独表达含义时传 label;放在按钮里时把名字写在按钮上(aria-label),图标保持隐藏。
  • 不要只用图标的颜色表达状态,配上文字或不同的图形。