Icon 图标

注意事项

  • 若为装饰性icon,请设置通过设置 aria-hidden 忽略;若为按钮类型icon,请务必设置 role="button"aria-label

基本

展示图标基本使用方法。

Click on the icon to copy the code.
  • align-right
  • aliyun
  • align-center
  • arrow-clock-left
  • arrow-down-o
  • apps
  • arrow-left
  • arrow-left-o-fill
  • arrow-hollow-up
  • arrow-clock-right
  • arrow-hollow-down
  • arrow-down
  • arrow-down-o-fill
  • arrow-right
  • arrow-right-o
  • arrow-left-o
  • arrow-right-o-fill
  • arrow-up
  • arrow-up-o-fill
  • arrow-roundleft
  • arrow-roundright
  • arrow-up-o
  • arrow-upline-o-fill
  • arrow-upright-o-fill
  • align-left
  • arrows-full-collapse
  • arrows-pinch
  • arrows-cycle
  • arrows-pinch-out
  • arrows-swtich-vertical
  • blockquote
  • checkbox-checked-fill
  • arrows-full-expand
  • box-plus
  • chevron-down
  • chevron-down-o-fill
  • chevron-down-o
  • checkbox
  • chevron-left-s
  • chevron-left-o
  • chevron-right-o-fill
  • bold
  • arrows-swtich-horizontal
  • chevron-right
  • chevron-right-o
  • chevron-left
  • chevron-down-s
  • chevrons-collapse-vertical
  • chevron-up-s
  • chevron-up
  • chevrons-expand-vertical
  • chevrons-expand-horizontal
  • chevron-right-s
  • chevrons-right
  • col-after
  • chevrons-left
  • chevron-up-o
  • column
  • contact
  • crop
  • douban
  • degree
  • checkbox-checked
  • client
  • chevron-left-o-fill
  • drag
  • col-before
  • expand
  • double-tick
  • dingding
  • double-box-plus
  • figma
  • evernote
  • chevron-up-o-fill
  • circle
  • dribbble
  • fangcloud
  • framer
  • facebook
  • emoji-smile
  • heading
  • info-o-fill
  • horizontal
  • h
  • collapse
  • info
  • more-o-fill
  • google
  • disable
  • h1
  • italic
  • invistion
  • github
  • dropbox
  • more
  • linkedin
  • more-o
  • minus-o
  • plus-o
  • plus-box-fill
  • office-word
  • plus-o-fill
  • emoji-frown
  • jinshuju
  • markdown
  • pinterest
  • office-excel
  • paragraph
  • line-through
  • office-powerpoint
  • pause-o
  • h2
  • plus
  • info-o
  • question-o-fill
  • processon
  • remove-o-fill
  • quote
  • remove-o
  • row-before
  • remove
  • robot
  • screenshot
  • row-after
  • rss
  • sprint
  • tick-bold
  • salesman
  • share
  • tick-o
  • scan
  • triangle-right-s
  • triangle-right
  • triangle-up
  • timeline
  • tick
  • task-tick
  • teambition-outline
  • triangle-left
  • switch
  • triangle-down
  • tex
  • triangle-down-s
  • user-add
  • tick-o-fill
  • user-fill
  • timeline-s
  • twitter
  • user-search
  • teambition
  • triangle-right-o
  • warning-o
  • user-switch
  • underline
  • xiaomi
  • users-fill
  • users-s
  • user-disable
  • user-externa
  • netease
  • user-o
  • user-question
  • triangle-left-s
  • grid
  • wechat
  • warning-o-fill
  • users
  • triangle-up-s
  • yunzhijia
  • wechat-enterprise
  • user
  • zhihu
  • zendesk
  • weibo
  • qq
  • oldman
  • wps
  • question-o
  • arrows-long-down
  • arrows-long-up
  • clock
  • calendar
  • email
  • loading
  • eye
  • filter
  • paperclip
  • picture
  • trashbin
  • eye-slash
  • star-fill
  • gear
  • search
  • paper-pen
  • starstroke
  • lightning
  • post
  • book
  • intro
  • share1
  • question-o
  • play-o
  • sort
  • pencil
  • alert-clock
  • branch
  • menu
  • copy
  • save
  • link
  • region-fill
  • region
  • ip
  • ip-box-fill
  • building
  • team-briefcase
  • team-bus
  • team-calculator
  • team-bulb
  • team-location
  • team-compass
  • team-flag
  • team-graph
  • team-camera
  • team-loudspeaker
  • team-medal
  • team-building
  • org-book
  • org-apps
  • briefcase-stroke
  • chat-group-stroke
  • permission
  • reorder
  • normal-text
  • clear
  • tree
  • team-pen
  • team-tie
  • team-terminal
  • team-stamp
  • team-talk
  • team-notebook
  • org-medal
  • org-crown

图标列表

点击图标复制代码。

  • small
  • medium
  • large
  • xl
  • xxl
  • xxxl

尺寸

ICON的尺寸包括:smallmediumlargexlxxlxxxl

This is a success message!
This is a warning message!
This is a failure message!

自定义样式

图标字体本质上还是文字,可以使用 style 和 className 设置图标的大小和颜色。

button:

decoration:

无障碍

若为装饰性icon,请设置通过设置 aria-hidden 忽略;若为按钮类型icon,请务必设置 role="button"aria-label

使用 iconfont.cn

对于使用 iconfont.cn 的用户,通过设置 createFromIconfont 方法参数对象中的 scriptUrl 和 symbolPrefix 字段, 即可轻松地使用已有项目中的图标。

API

Icon

参数说明类型默认值
size指定图标大小

可选值:
'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'
Enum'medium'
type指定显示哪种图标String-

自定义font图标

提供了createFromIconfont方法,便于开发者调用在 iconfont.cn 上自行管理的图标。

const MyIcon = Icon.createFromIconfont({
  scriptUrl: '//at.alicdn.com/t/font_1310450_o5u8npa648j.js',
  symbolPrefix: 'at-', // Iconfont 项目的图标前缀
});

ReactDOM.render(
  <div className="icons-list">
    <MyIcon type="office-word" />
    <MyIcon type="office-excel" />
    <MyIcon type="office-powerpoint" />
  </div>,
  mountNode,
);

原理详见symbol使用

createFromIconfont方法的入参对象成员如下:

参数说明类型默认值
scriptUrl必填,iconfont.cn 项目在线生成的 js 地址String-
symbolPrefix必填,iconfont.cn 项目前缀,可从项目信息中查看String-