mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 19:50:05 +08:00
145 lines
4.2 KiB
Markdown
145 lines
4.2 KiB
Markdown
---
|
||
category: Components
|
||
type: General
|
||
title: Icon
|
||
toc: false
|
||
---
|
||
|
||
Semantic vector graphics.
|
||
|
||
## Icons naming convention
|
||
|
||
We provide semantic name for every icon, and naming rules are as follows:
|
||
|
||
- Scanning line icon has the similar name with its solid one，but it's distinguished by `-o`, for example, `question-circle` (a full circle) and `question-circle-o` (an empty circle);
|
||
- Naming sequence：`[name]-[shape?]-[outline?]-[direction?]`.
|
||
|
||
> `?` means is optional.
|
||
|
||
See more design detail at [here](/docs/spec/icon).
|
||
|
||
## List of icons
|
||
|
||
> Click the icon and copy the code.
|
||
|
||
### Directional Icons
|
||
|
||
```__react
|
||
import IconSet from 'site/theme/template/IconSet';
|
||
ReactDOM.render(<IconSet className="icons" catigory="direction" />, mountNode);
|
||
```
|
||
|
||
### Suggested Icons
|
||
|
||
```__react
|
||
import IconSet from 'site/theme/template/IconSet';
|
||
ReactDOM.render(<IconSet className="icons" catigory="suggestion" />, mountNode);
|
||
```
|
||
|
||
### Application Icons
|
||
|
||
```__react
|
||
import IconSet from 'site/theme/template/IconSet';
|
||
ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);
|
||
```
|
||
|
||
### Brand and Logos
|
||
|
||
```__react
|
||
import IconSet from 'site/theme/template/IconSet';
|
||
ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
|
||
```
|
||
|
||
|
||
## API
|
||
|
||
### Icon
|
||
|
||
| Property | Description | Type | Default |
|
||
| --- | --- | --- | --- |
|
||
| type | Type of ant design icon | string | - |
|
||
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - |
|
||
| svgStyle | Inline style to apply to the SVG element | CSSProperties | - |
|
||
| svgClassName | Define extra class name for the SVG element | string | - |
|
||
| spin | Rotate icon with animation | boolean | false |
|
||
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
|
||
|
||
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' }} />
|
||
```
|
||
|
||
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
|
||
import { Icon } from 'antd';
|
||
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
|
||
|
||
ReactDOM.render(
|
||
<Icon component={MessageSvg} />,
|
||
mountNode
|
||
);
|
||
```
|
||
|
||
#### CustomIconComponentProps
|
||
|
||
The following properties are available fot 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 | - |
|
||
|
||
|
||
### Icon.createFromIconfontCN(options)
|
||
|
||
This method is specified for [iconfont.cn](http://iconfont.cn/).
|
||
|
||
```js
|
||
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 |
|
||
| --- | --- | --- | --- |
|
||
| prefix | The prefix of the icon set. It ends with `-` generally, like `icon-`、`foo-` | string | '' |
|
||
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
|
||
| namespace | The namespace of the icon set, used as identifier. | string | - |
|
||
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
|
||
|
||
The property `scriptUrl` should be set together with property `namespace`.
|
||
|
||
See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.
|