图标列表
代码演示
如何引入
基础使用
从
@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 以不被屏幕阅读器阅读
