`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button`
`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button`.
If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
Use tag `<Icon />` to create an icon and set its type in the `type` prop. Specific the `spin` property to show spinning animation and the `theme` property to switch different themes.
Use tag `<Icon />` to create an icon and set its type in the `type` prop. Specify the `spin` property to show spinning animation and the `theme` property to switch between different themes.
| rotate | Rotate degrees (added in 3.13.0, not working in IE9) | number | - | 3.13.0 |
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> |-|3.9.0|
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - | 3.9.0 |
| twoToneColor | Only supports the two-tone icon. Specify the primary color. | string (hex color) | - | 3.9.0 |
### 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 and no more empty square during downloading than no need to deploy icon font files locally either.
- 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.
It create a component that uses SVG sprites in essence.
It creates a component that uses SVG sprites in essence.
The following options are available:
@ -91,7 +91,7 @@ See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.199
### Custom SVG Icon
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).
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).