图标列表
代码演示
如何引入
基础使用
从
@douyinfe/semi-icons
包中引入图标旋转
从
@douyinfe/semi-icons
包中引入图标,自带尺寸、旋转、spin功能尺寸
可以改变font-size
来更改图标大小
Icon组件封装了size属性,可以更方便地定义图标尺寸,支持
extra-small
(8x8),small
(12x12), default
(16x16), large
(20x20), extra-large
(24x24),当size指定为inherit
时,图标大小继承当前上下文字体大小颜色
图标会自动继承外部容器 CSS 的
color
属性
你还可以通过给 Icon 设置 style props 来修改图标的颜色。自定义图标
可以使用自定义图标传入Icon组件
Icon组件支持size、rotate、spining等属性
使用svgr将svg文件转成ReactComponent
如果 Semi 提供的图标不足以满足业务需求,你也可以通过@svgr/webpack引入自定义图标,并以React组件形式使用
API参考
Icon
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 类名 | string | 无 |
onClick | 单击图标的回调事件 | (e: Event) => void | 无 |
onMouseDown | 鼠标按钮按下的回调事件 >=v1.21 | (e: Event) => void | 无 |
onMouseEnter | 进入图标的回调事件 | (e: Event) => void | 无 |
onMouseLeave | 离开图标的回调事件 | (e: Event) => void | 无 |
onMouseMove | 移动鼠标的回调事件 >=v1.21 | (e: Event) => void | 无 |
onMouseUp | 鼠标按钮抬起的回调事件 >=v1.21 | (e: Event) => void | 无 |
rotate | 旋转度数 | number | |
size | 尺寸,支持inherit ,extra-small ,small , default , large , extra-large | string | default |
spin | 旋转动画 | boolean | |
style | 图标样式 | CSSProperties | 无 |
svg | 图标内容 | ReactNode | 无 |
Accessibility
ARIA
- Icon 组件 role 为 img,它的 aria-label 默认为组件的文件名。例如 IconHome 的 aria-label 为
home
,如果你有更好的语义化名字,可以通过 aria-label 传入。
- Icon 内部的 svg 元素为装饰元素,默认设置了 aria-hidden 以不被屏幕阅读器阅读