mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
64b905e9bd
* update icons deps * update all icon ref * fix lint * update snapshot
157 lines
5.5 KiB
Markdown
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 | - | |
|