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

category	type	title	toc
Components	General	Icon	false

Semantic vector graphics.

List of icons

Click the icon and copy the code.

We are still adding two-tone icons right now.

import IconDisplay from 'site/theme/template/IconDisplay';
ReactDOM.render(<IconDisplay />, mountNode);

API

Property	Description	Type	Default
type	Type of the ant design icon	string	-
style	Style properties of icon, like fontSize and color	CSSProperties	-
theme	Theme of the ant design icon	'filled' | 'outlined' | 'twoTone'	'outlined'
spin	Rotate icon with animation	boolean	false
component	The component used for the root node. This will override the type property.	ComponentType<CustomIconComponentProps>	-
twoToneColor	Only support the two-tone icon. Specific the primary color.	string (hex color)	-

The properties theme, component and twoToneColor are added in antd@3.9.x. The best practice is to pass the property theme to every <Icon /> components.

<Icon type="star" theme="filled" />

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' }} theme="outlined" />

When using the two-tone icons, you can use the static methods Icon.getTwoToneColor() and Icon.setTwoToneColor(colorString) to spicify the primary color.

Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96

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
);

The following properties are available for 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	-

Use custom icon with iconfont.cn

Icon.createFromIconfontCN(options)

This method is specified for iconfont.cn.

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

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

It create a component that uses SVG sprites in essence.

The following options are available:

Property	Description	Type	Default
scriptUrl	The URL generated by iconfont.cn project.	string	-
extraCommonProps	Define extra properties to the component	{ [key: string]: any }	{}

The property scriptUrl should be set together with property namespace.

See iconfont.cn documents to learn about how to generate scriptUrl.