2018-07-19 19:24:19 +08:00
---
order: 0
title:
zh-CN: 基本用法
en-US: Basic
---
## zh-CN
2019-08-13 14:07:17 +08:00
通过 `@ant-design/icons` 引用 Icon 组件,不同主题的 Icon 组件名为图标名加主题做为后缀,也可以通过设置 `spin` 属性来实现动画旋转效果。
2018-07-19 19:24:19 +08:00
## en-US
2021-05-10 16:45:02 +08:00
Import icons from `@ant-design/icons` , component name of icons with different theme is the icon name suffixed by the theme name. Specify the `spin` property to show spinning animation.
2018-07-19 19:24:19 +08:00
2019-05-07 14:57:32 +08:00
```jsx
2019-11-28 12:34:33 +08:00
import {
HomeOutlined,
SettingFilled,
SmileOutlined,
SyncOutlined,
LoadingOutlined,
} from '@ant-design/icons';
2018-07-19 19:24:19 +08:00
ReactDOM.render(
2018-08-14 17:17:51 +08:00
< div className = "icons-list" >
2019-11-28 12:34:33 +08:00
< HomeOutlined / >
2019-08-13 14:07:17 +08:00
< SettingFilled / >
2019-11-28 12:34:33 +08:00
< SmileOutlined / >
< SyncOutlined spin / >
< SmileOutlined rotate = {180} / >
< LoadingOutlined / >
2018-07-19 19:24:19 +08:00
< / div > ,
2019-05-07 14:57:32 +08:00
mountNode,
2018-07-19 19:24:19 +08:00
);
2019-05-07 14:57:32 +08:00
```
2018-08-14 17:17:51 +08:00
2018-09-02 19:11:47 +08:00
< style >
2018-08-14 17:17:51 +08:00
.icons-list > .anticon {
margin-right: 6px;
2018-09-02 19:11:47 +08:00
font-size: 24px;
2018-08-14 17:17:51 +08:00
}
2020-05-10 22:11:09 +08:00
.ant-row-rtl .icons-list > .anticon {
margin-right: 0;
margin-left: 6px;
}
2018-09-02 19:11:47 +08:00
< / style >