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

119 lines
3.6 KiB
Markdown
Raw Normal View History

2016-03-31 14:17:09 +08:00
---
category: Components
type: General
2016-09-08 16:53:50 +08:00
title: Icon
2016-07-26 19:45:55 +08:00
toc: false
2016-03-31 14:17:09 +08:00
---
2015-05-27 15:43:29 +08:00
2017-03-19 14:12:58 +08:00
Semantic vector graphics.
2015-06-17 19:48:17 +08:00
2016-08-20 11:58:31 +08:00
## List of icons
2015-05-27 15:43:29 +08:00
2018-08-20 14:00:51 +08:00
> Click the icon and copy the code.
2015-12-07 16:32:44 +08:00
2018-09-03 00:30:41 +08:00
We are still adding two-tone icons right now.
2016-03-07 11:58:14 +08:00
```__react
2018-09-01 16:16:11 +08:00
import IconDisplay from 'site/theme/template/IconDisplay';
ReactDOM.render(<IconDisplay />, mountNode);
2016-03-07 11:58:14 +08:00
```
2017-03-19 14:12:58 +08:00
## API
2018-08-20 14:00:51 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
2018-08-30 22:53:24 +08:00
| type | Type of the ant design icon | string | - |
2018-08-20 14:00:51 +08:00
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - |
| theme | Theme of the ant design icon | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
2018-08-20 14:00:51 +08:00
| spin | Rotate icon with animation | boolean | false |
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
2018-09-01 19:44:21 +08:00
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
2018-08-20 14:00:51 +08:00
2018-09-01 20:37:18 +08:00
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.
```jsx
<Icon type="star" theme="filled" />
```
2018-08-20 14:00:51 +08:00
All the icons will render to `<svg>`. You can still set `style` and `className` for size and color of icons.
```jsx
2018-09-01 20:37:18 +08:00
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
2018-08-20 14:00:51 +08:00
```
2018-09-02 19:32:01 +08:00
When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color.
```jsx
Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96
```
2018-08-20 14:00:51 +08:00
You can import svg icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
```js
// webpack.config.js
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'babel-loader',
},
{
loader: '@svgr/webpack',
options: {
babel: false,
icon: true,
},
},
],
}
```
```jsx
2018-08-20 14:00:51 +08:00
import { Icon } from 'antd';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
ReactDOM.render(
<Icon component={MessageSvg} />,
mountNode
);
```
2018-09-02 18:04:07 +08:00
The following properties are available for the component:
2018-08-20 14:00:51 +08:00
2017-10-25 10:25:44 +08:00
| Property | Description | Type | Default |
2018-08-20 14:00:51 +08:00
| --- | --- | --- | --- |
| 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 | - |
2018-09-02 18:04:07 +08:00
### Use custom icon with iconfont.cn
2018-09-02 17:20:28 +08:00
2018-09-02 18:04:07 +08:00
#### Icon.createFromIconfontCN(options)
2018-08-20 14:00:51 +08:00
2018-08-20 17:23:28 +08:00
This method is specified for [iconfont.cn](http://iconfont.cn/).
2018-08-20 14:00:51 +08:00
```js
const MyIcon = Icon.createFromIconfontCN({
2018-09-03 11:41:29 +08:00
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
2018-08-20 14:00:51 +08:00
});
2018-09-03 11:41:29 +08:00
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
2018-08-20 14:00:51 +08:00
```
2018-08-20 17:23:28 +08:00
It create a component that uses SVG sprites in essence.
2018-08-20 14:00:51 +08:00
The following options are available:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
2018-08-21 17:52:41 +08:00
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
2018-08-21 18:41:35 +08:00
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
2018-08-20 14:00:51 +08:00
2018-08-21 17:52:41 +08:00
The property `scriptUrl` should be set together with property `namespace`.
2018-08-20 14:00:51 +08:00
2018-08-21 17:52:41 +08:00
See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.