图标列表
点击图标即可复制代码。
新版图标可能略有缺失，我们还在持续补充中。
选择图标主题风格
<label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" style="box-sizing: border-box; touch-action: manipulation; margin: 0px; height: 32px; line-height: 30px; color: rgb(24, 144, 255); display: inline-block; transition: all 0.3s ease 0s; cursor: pointer; border-width: 1.02px 1px 1px; border-style: solid; border-color: rgb(24, 144, 255); border-image: initial; background: rgb(255, 255, 255); padding: 0px 15px; position: relative; box-shadow: none !important; z-index: 1; border-radius: 4px 0px 0px 4px;"><input type="radio" class="ant-radio-button-input" value="outlined" style="box-sizing: border-box; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; overflow: visible; padding: 0px; touch-action: manipulation; opacity: 0; width: 0px; height: 0px;"> 线框风格</label><label class="ant-radio-button-wrapper" style="box-sizing: border-box; touch-action: manipulation; margin: 0px; height: 32px; line-height: 30px; color: rgba(0, 0, 0, 0.65); display: inline-block; transition: all 0.3s ease 0s; cursor: pointer; border-width: 1.02px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgb(217, 217, 217); border-right-color: rgb(217, 217, 217); border-bottom-color: rgb(217, 217, 217); border-image: initial; border-left-style: initial; border-left-color: initial; background: rgb(255, 255, 255); padding: 0px 15px; position: relative;"><input type="radio" class="ant-radio-button-input" value="filled" style="box-sizing: border-box; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; overflow: visible; padding: 0px; touch-action: manipulation; opacity: 0; width: 0px; height: 0px;"> 实底风格</label><label class="ant-radio-button-wrapper" style="box-sizing: border-box; touch-action: manipulation; margin: 0px; height: 32px; line-height: 30px; color: rgba(0, 0, 0, 0.65); display: inline-block; transition: all 0.3s ease 0s; cursor: pointer; border-width: 1.02px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgb(217, 217, 217); border-right-color: rgb(217, 217, 217); border-bottom-color: rgb(217, 217, 217); border-image: initial; border-left-style: initial; border-left-color: initial; background: rgb(255, 255, 255); padding: 0px 15px; position: relative; border-radius: 0px 4px 4px 0px;"><input type="radio" class="ant-radio-button-input" value="twoTone" style="box-sizing: border-box; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; overflow: visible; padding: 0px; touch-action: manipulation; opacity: 0; width: 0px; height: 0px;"> 双色风格</label>
方向性图标
- 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
- double-right
- double-left
- vertical-left
- vertical-right
- forward
- backward
- rollback
- enter
- retweet
- swap
- swap-left
- swap-right
- arrow-up
- arrow-down
- arrow-left
- arrow-right
- play-circle
- up-square
- down-square
- left-square
- right-square
- login
- logout
- menu-fold
- menu-unfold
- border-bottom
- border-horizontal
- border-inner
- border-left
- border-right
- border-top
- border-verticle
- pic-center
- pic-left
- pic-right
- radius-bottomleft
- radius-bottomright
- radius-upleft
- fullscreen
- fullscreen-exit
提示建议性图标
- question
- question-circle
- plus
- plus-circle
- pause
- pause-circle
- minus
- minus-circle
- plus-square
- minus-square
- info
- info-circle
- exclamation
- exclamation-circle
- close
- close-circle
- close-square
- check
- check-circle
- check-square
- clock-circle
- warning
- issues-close
- stop
编辑类图标
- edit
- form
- copy
- scissor
- delete
- snippets
- diff
- highlight
- align-center
- align-left
- align-right
- bg-colors
- bold
- italic
- underline
- strikethrough
- redo
- undo
- zoom-in
- zoom-out
- font-colors
- font-size
- line-height
- colum-height
- dash
- small-dash
- sort-ascending
- sort-descending
- drag
- ordered-list
- radius-setting
数据类图标
- area-chart
- pie-chart
- bar-chart
- dot-chart
- line-chart
- radar-chart
- heat-map
- fall
- rise
- stock
- box-plot
- fund
- sliders
网站通用图标
- lock
- unlock
- bars
- book
- calendar
- cloud
- cloud-download
- code
- copy
- credit-card
- delete
- desktop
- download
- ellipsis
- file
- file-text
- file-unknown
- file-pdf
- file-word
- file-excel
- file-jpg
- file-ppt
- file-markdown
- file-add
- folder
- folder-open
- folder-add
- hdd
- frown
- meh
- smile
- inbox
- laptop
- appstore
- link
- mobile
- notification
- paper-clip
- picture
- poweroff
- reload
- search
- setting
- share-alt
- shopping-cart
- tablet
- tag
- tags
- to-top
- upload
- user
- video-camera
- home
- loading
- loading-3-quarters
- cloud-upload
- star
- heart
- environment
- eye
- eye-invisible
- camera
- save
- team
- solution
- phone
- filter
- exception
- export
- customer-service
- qrcode
- scan
- like
- dislike
- message
- pay-circle
- calculator
- pushpin
- 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
- dashboard
- table
- profile
- alert
- audit
- branches
- build
- border
- crown
- experiment
- fire
- money-collect
- property-safety
- read
- reconciliation
- rest
- security-scan
- insurance
- interation
- safety-certificate
- project
- thunderbolt
- block
- cluster
- deployment-unit
- dollar
- euro
- pound
- file-done
- file-exclamation
- file-protect
- file-search
- file-sync
- gateway
- gold
- robot
- shopping
品牌和标识
- android
- apple
- windows
- ie
- chrome
- github
- aliwangwang
- dingding
- weibo-square
- weibo-circle
- taobao-circle
- html5
- youtube
- alipay-circle
- taobao
- skype
- medium-workmark
- gitlab
- medium
- google-plus
- dropbox
- codepen
- code-sandbox
- amazon
- codepen-circle
- alipay
- ant-design
- aliyun
- zhihu
- slack
- slack-square
- behance
- behance-square
- dribbble
- dribbble-square
- yuque
- alibaba
- yahoo
基本用法 #
使用 <Icon/> 标签声明组件，指定图标对应的 type 属性。可以通过 theme 属性来设置不同的主题风格的图标，也可以通过设置 spin 属性来实现动画旋转效果。
[图片上传失败...(image-9b9995-1555835823850)]
[图片上传失败...(image-ff4ecb-1555835823850)]
自定义图标 #
利用 Icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标，以满足特定的需求。
