Icon图标
语义化的矢量图形。
图标的命名规范#
我们为每个图标赋予了语义化的命名，命名规则如下:
实心和描线图标保持同名，用
-o来区分，比如question-circle（实心） 和question-circle-o（描线）；命名顺序：
[图标名]-[形状?]-[描线?]-[方向?]。
?为可选。
完整的图标设计规范请访问 图标规范。
如何使用#
使用 <Icon /> 标签声明组件，指定图标对应的 type 属性，示例代码如下:
<Icon type="link" />本地部署#
图标默认托管在 iconfont.cn，默认公网可访问。如需本地部署，可参考 示例。
图标列表#
点击图标复制代码。
方向性图标#
- step-backward
- step-forward
- fast-backward
- fast-forward
- shrink
- arrows-alt
- down
- up
- left
- right
- caret-up
- caret-down
- caret-left
- caret-right
- up-circle
- down-circle
- left-circle
- right-circle
- up-circle-o
- down-circle-o
- right-circle-o
- left-circle-o
- double-right
- double-left
- verticle-left
- verticle-right
- forward
- backward
- rollback
- enter
- retweet
- swap
- swap-left
- swap-right
- arrow-up
- arrow-down
- arrow-left
- arrow-right
- play-circle
- play-circle-o
- up-square
- down-square
- left-square
- right-square
- up-square-o
- down-square-o
- left-square-o
- right-square-o
- login
- logout
- menu-fold
- menu-unfold
提示建议性图标#
- question
- question-circle-o
- question-circle
- plus
- plus-circle-o
- plus-circle
- pause
- pause-circle-o
- pause-circle
- minus
- minus-circle-o
- minus-circle
- plus-square
- plus-square-o
- minus-square
- minus-square-o
- info
- info-circle-o
- info-circle
- exclamation
- exclamation-circle-o
- exclamation-circle
- close
- close-circle
- close-circle-o
- close-square
- close-square-o
- check
- check-circle
- check-circle-o
- check-square
- check-square-o
- clock-circle-o
- clock-circle
网站通用图标#
- lock
- unlock
- area-chart
- pie-chart
- bar-chart
- dot-chart
- bars
- book
- calendar
- cloud
- cloud-download
- code
- code-o
- copy
- credit-card
- delete
- desktop
- download
- edit
- ellipsis
- file
- file-text
- file-unknown
- file-pdf
- file-excel
- file-jpg
- file-ppt
- file-add
- folder
- folder-open
- folder-add
- hdd
- frown
- frown-o
- meh
- meh-o
- smile
- smile-o
- inbox
- laptop
- appstore-o
- appstore
- line-chart
- link
- mobile
- notification
- paper-clip
- picture
- poweroff
- reload
- search
- setting
- share-alt
- shopping-cart
- tablet
- tag
- tag-o
- tags
- tags-o
- to-top
- upload
- user
- video-camera
- home
- loading
- loading-3-quarters
- cloud-upload-o
- cloud-download-o
- cloud-upload
- cloud-o
- star-o
- star
- heart-o
- heart
- environment
- environment-o
- eye
- eye-o
- camera
- camera-o
- save
- team
- solution
- phone
- filter
- exception
- export
- customer-service
- qrcode
- scan
- like
- like-o
- dislike
- dislike-o
- message
- pay-circle
- pay-circle-o
- calculator
- pushpin
- pushpin-o
- bulb
- select
- switcher
- rocket
- bell
- disconnect
- database
- compass
- barcode
- hourglass
- key
- flag
- layout
- printer
- sound
- usb
- skin
- tool
- sync
- wifi
- car
- schedule
- user-add
- user-delete
- usergroup-add
- usergroup-delete
- man
- woman
- shop
- gift
- idcard
- medicine-box
- red-envelope
- coffee
- copyright
- trademark
- safety
- wallet
- bank
- trophy
- contacts
- global
- shake
- api
- fork
品牌和标识#
- android
- android-o
- apple
- apple-o
- windows
- windows-o
- ie
- chrome
- github
- aliwangwang
- aliwangwang-o
- dingding
- dingding-o
API#
由于图标字体本质上还是文字，可以使用 style 和 className 设置图标的大小和颜色。
<Icon type="question" style={{ fontSize: 16, color: '#08c' }} />| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| spin | 是否有旋转动画 | boolean | false |
| style | 设置图标的样式，例如 fontSize 和 color | object | - |
| type | 图标类型 | string | - |