ant-design/components/icon/index.en-US.md

category	type	title	toc
Components	General	Icon	false

Semantic 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 one，but it's distinguished by -o, for example, question-circle (a full circle) and question-circle-o (an empty circle);
• Naming sequence：[name]-[shape?]-[outline?]-[direction?].

? means is optional.

See more design detail at here.

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

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

Application Icons

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

Brand and Logos

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

API

Icon

Property	Description	Type	Default
type	Type of ant design icon	string	-
style	Style properties of icon, like fontSize and color	CSSProperties	-
svgStyle	Inline style to apply to the SVG element	CSSProperties	-
svgClassName	Extra class name for the SVG element	string	-
spin	Rotate icon with animation	boolean	false
component	The component used for the root node. This will override the type property.	ComponentType<CustomIconComponentProps>	-

All the icons will render to <svg>. You can still set style and className for size and color of icons.

<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} />

You can import svg icon as an react component by using webpack and @svgr/webpack. @svgr/webpack's options reference.

// webpack.config.js
{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
        icon: true,
      },
    },
  ],
}

import { Icon } from 'antd';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.

ReactDOM.render(
  <Icon component={MessageSvg} />,
  mountNode
);

CustomIconComponentProps

The following properties are available fot the component:

Property	Description	Type	Default
width	The width of the svg element	string | number	'1em'
height	The height of the svg element	string | number	'1em'
fill	Define the color used to paint the svg element	string	'currentColor'
className	The computed class name of the svg element	string	-
style	The computed style of the svg element	CSSProperties	-

Icon.createFromIconfontCN(options)

This method is

const MyIcon = Icon.createFromIconfontCN({
  namespace: 'foo', // identifier
  url: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi', // generated by iconfont.cn
  prefix: 'icon-',
});

ReactDOM.render(<MyIcon type="example" />, mountedNode);

其本质上是创建了一个使用 <use> 标签来渲染图标的组件。

The following options are available:

Property	Description	Type	Default
prefix	设置图标的前缀，通常以短横线结尾，如 icon-、foo-	string	''
extraCommonProps	给所有的 svg 图标 <Icon /> 组件设置额外的属性	{ [key: string]: any }	{}
namespace	图标集合的名字空间，在 url 也设置的情况下有效，用于区分已导入的图标符号集合	string	-
url	iconfont.cn 项目在线生成的 js 地址，在 namespace 也设置的情况下有效	string	-

在 namespace 和 url 都设置有效的情况下，组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集，无需手动引入。

见 iconfont.cn 使用帮助 查看如何生成 js 地址。