5.4 KiB
category | type | title | toc |
---|---|---|---|
Components | General | Icon | false |
Semantic vector graphics.
List of icons
import IconDisplay from 'site/theme/template/IconDisplay';
ReactDOM.render(<IconDisplay />, mountNode);
API
Common Icon
Property | Description | Type | Default | Version |
---|---|---|---|---|
style | Style properties of icon, like fontSize and color |
CSSProperties | - | |
spin | Rotate icon with animation | boolean | false | |
rotate | Rotate degrees (added in 3.13.0, not working in IE9) | number | - | 3.13.0 |
twoToneColor | Only supports the two-tone icon. Specify the primary color. | string (hex color) | - | 3.9.0 |
We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
<Star />
<StarFilled />
<StarTwoTone twoToneColor="#eb2f96" />
Custom Icon
Property | Description | Type | Default | Version |
---|---|---|---|---|
style | Style properties of icon, like fontSize and color |
CSSProperties | - | |
spin | Rotate icon with animation | boolean | false | |
rotate | Rotate degrees (added in 3.13.0, not working in IE9) | number | - | 3.13.0 |
component | The component used for the root node. | ComponentType<CustomIconComponentProps> | - | 3.9.0 |
About SVG icons
We introduced SVG icons in 3.9.0
version replacing font icons which brings benefits below:
- Complete offline usage of icon, no dependency of CDN font icon file. No more empty square during downloading and no need to deploy icon font files locally either.
- Much more display accuracy in lower-level screens.
- Support multiple colors for icon.
- No need to change built-in icons with overriding styles by providing more props in component.
More discussion of SVG icon reference to #10353.
⚠️ About the extra bundle size brought by all SVG icons we imported in 3.9.0, we will provide new API to allow developers importing icons as your need, you can trace #12011 for further progress.
Before this, you can use webpack plugin from community to chunk the icon file.
The properties theme
, component
and twoToneColor
are added in 3.9.0
. The best practice is to pass the property theme
to every <Icon />
components.
import { Message } from '@ant-design/icons';
<Message style={{ fontSize: '16px', color: '#08c' }} />;
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" />
Set TwoTone Color
When using the two-tone icons, you can use the static methods getTwoToneColor()
and setTwoToneColor(colorString)
to spicify the primary color.
import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96
Custom Font Icon
We added a createFromIconfontCN
function to help developer use their own icons deployed at iconfont.cn in a convenient way.
This method is specified for iconfont.cn.
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
It creates a component that uses SVG sprites in essence.
The following options are available:
Property | Description | Type | Default | Version |
---|---|---|---|---|
scriptUrl | The URL generated by iconfont.cn project. | string | - | 3.9.3 |
extraCommonProps | Define extra properties to the component | { [key: string]: any } |
{} | 3.9.3 |
The property scriptUrl
should be set to import the SVG sprite symbols.
See iconfont.cn documents to learn about how to generate scriptUrl
.
Custom SVG Icon
You can import SVG icon as a 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 '@ant-design/icons';
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 | Version |
---|---|---|---|---|
width | The width of the svg element |
string | number | '1em' | 3.10.0 |
height | The height of the svg element |
string | number | '1em' | 3.10.0 |
fill | Define the color used to paint the svg element |
string | 'currentColor' | 3.10.0 |
className | The computed class name of the svg element |
string | - | 3.10.0 |
style | The computed style of the svg element |
CSSProperties | - | 3.10.0 |