1 | <h1 align="center">
|
2 | Ant Design Icons for React
|
3 | </h1>
|
4 |
|
5 | <div align="center">
|
6 |
|
7 | [![NPM version](https://img.shields.io/npm/v/@ant-design/icons-react.svg?style=flat)](https://npmjs.org/package/@ant-design/icons-react)
|
8 | [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/icons-react.svg?style=flat)](https://npmjs.org/package/@ant-design/icons-react)
|
9 |
|
10 | </div>
|
11 |
|
12 | ## Install
|
13 |
|
14 | ```bash
|
15 | yarn add @ant-design/icons
|
16 | yarn add @ant-design/icons-react
|
17 | ```
|
18 |
|
19 | ## Basic Usage
|
20 |
|
21 | First, you should add the icons that you need into the library.
|
22 |
|
23 | ```ts
|
24 | import { AntDesignOutline, DashboardOutline, TwitterOutline } from '@ant-design/icons';
|
25 | import AntdIcon from '@ant-design/icons-react';
|
26 | AntdIcon.add(AntDesignOutline, DashboardOutline);
|
27 | ```
|
28 |
|
29 | After that, you can use antd icons in your React components as simply as this:
|
30 |
|
31 | ```jsx
|
32 | <AntdIcon type="ant-design-o" />
|
33 | <AntdIcon type="dashboard-o" />
|
34 | <AntdIcon type={TwitterOutline} />
|
35 | ```
|
36 |
|
37 | ## Component Interface
|
38 |
|
39 | ```ts
|
40 | interface AntdIconProps {
|
41 | type: string | IconDefinition;
|
42 | className?: string;
|
43 | onClick?: React.MouseEventHandler<SVGSVGElement>;
|
44 | style?: React.CSSProperties;
|
45 | }
|
46 | ```
|