You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design/components/icon/index.en-US.md

2.6 KiB

category type title toc
Components Basic Icon false

Meaningful vector graphics.

Icons naming convention

We provide semantic name for every icon, and naming rules are as follows:

  • Scanning line icon has the similar name with its solid onebut it's distinguished by -o, for example, question-circle(a full circle) and question-circle-o(an empty circle);

  • Naming sequence[icon's name]-[shape, optional]-[Scanning line or not]-[direction, optional].

How To Use

Use tag to create an icon and set its type in the type prop, for example:

<Icon type="link" />

Finally, it will be rendered as follow:

<i class="anticon anticon-${type}"></i>

Local deployment of icons font

By default, icon components uses iconfont.cn, publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to this example

List of icons

Click the icon and copy the code。

Directional Icons

import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(<IconSet className="icons" catigory="direction" />, mountNode);

Suggested Icons

ReactDOM.render(<IconSet className="icons" catigory="suggestion" />, mountNode);

Other Icons

ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);