ant-design/components/icon/index.en-US.md
二货机器人 64b905e9bd
chore: Update @ant-design/icons deps (#19979)
* update icons deps

* update all icon ref

* fix lint

* update snapshot
2019-11-28 12:34:33 +08:00

157 lines
5.5 KiB
Markdown

---
category: Components
type: General
title: Icon
toc: false
---
Semantic vector graphics.
## List of icons
```__react
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 by n degrees (not working in IE9) | number | - | |
| twoToneColor | Only supports the two-tone icon. Specify the primary color. | string (hex color) | - | |
We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
```jsx
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
<StarOutlined />
<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 (not working in IE9) | number | - | |
| component | The component used for the root node. | ComponentType<CustomIconComponentProps\> | - | |
### About SVG icons
We introduced SVG icons in version `3.9.0`, replacing font icons. This has the following benefits:
- Complete offline usage of icons, without dependency on a CDN-hosted font icon file (No more empty square during downloading and no need to deploy icon font files locally either!)
- Much more display accuracy on lower-resolution screens
- The ability to choose icon color
- No need to change built-in icons with overriding styles by providing more props in component
More discussion of SVG icon reference at [#10353](https://github.com/ant-design/ant-design/issues/10353).
> ⚠️ Given the extra bundle size caused by all SVG icons imported in 3.9.0, we will provide a new API to allow developers to import icons as needed, you can track [#12011](https://github.com/ant-design/ant-design/issues/12011) for updates.
>
> While you wait, you can use [webpack plugin](https://github.com/Beven91/webpack-ant-icon-loader) from the community to chunk the icon file.
The properties `theme`, `component` and `twoToneColor` were added in `3.9.0`. The best practice is to pass the property `theme` to every `<Icon />` component.
```jsx
import { MessageOutlined } from '@ant-design/icons';
<MessageOutlined 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.
```jsx
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
```
### Set TwoTone Color
<<<<<<< HEAD When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to spicify the primary color. ======= When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to specify the primary color.
> > > > > > > origin/master
```jsx
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](http://iconfont.cn/) in a convenient way.
> This method is specified for [iconfont.cn](http://iconfont.cn/).
```js
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](http://iconfont.cn/) project. | string | - | |
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} | |
The property `scriptUrl` should be set to import the SVG sprite symbols.
See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 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`](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
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 | Readonly | Version |
| --- | --- | --- | --- | --- |
| 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 | - | |