基础 · Icon
图标
语义化的矢量图形。

图标列表

Accessibility  
Alert  
Arrow  
Basic  
Brands  
Building  
Business  
Code  
Communication  
Device  
Files&Folder  
Interface  
Layout  
Music  
Objects  
Photo&Video  
Time  
User  
Writing  

代码演示

如何引入

基础使用

@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尺寸,支持inheritextra-smallsmalldefaultlargeextra-largestringdefault
spin旋转动画boolean
style图标样式CSSProperties
svg图标内容ReactNode

Accessibility

ARIA

  • Icon 组件 role 为 img,它的 aria-label 默认为组件的文件名。例如 IconHome 的 aria-label 为 home,如果你有更好的语义化名字,可以通过 aria-label 传入。
  • Icon 内部的 svg 元素为装饰元素,默认设置了 aria-hidden 以不被屏幕阅读器阅读

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED