# 快速上手

## 安装

``` bash
yarn add @aloudata/icons-react --save
```

## 引用图标

在组件的上方引用`@aloudata/icons-react`，并在组件的渲染函数中使用:

```typescript jsx
import {Home} from '@aloudata/icons-react';

// examples
<Home/>
<Home fill="red"/>
```

## Style Sheet

引用预设样式

```typescript
import '@aloudata/icons-react/styles/index.css';
```

## 按需加载

可以使用[babel-plugin-import](https://github.com/ant-design/babel-plugin-import)来按需加载图标

配置如下:

```json
{
    "plugins": [
        [
            "import",
            {
                "libraryName": "@aloudata/icons-react",
                "libraryDirectory": "es/icons",
                "camel2DashComponentName": false 
            }
        ]
    ]
}
```

## 使用Icon组件

我们更推荐使用按需加载的方式来加载图标，因为这样可以大幅度缩减编译后代码体积，
但是在有些类似远程加载的菜单的场景下，直接引用全部图标可以缩减开发成本。

使用方式：

```typescript jsx
import Icon, {IconType} from '@aloudata/icons-react/es/all';
import React, {Fragment} from 'react';

export function Demo(props: {type: IconType}): JSX.Element {

    const {type} = props;

    return (
        <Fragment>
            <Icon type={type} theme="filled" />
            <Icon type="People" theme="filled" />
            <Icon type="Switch" />
        </Fragment>
    )
}
```

当你不确定type是否合法时，你可以这样做

```typescript jsx
import Icon, {ALL_ICON_KEYS, IconType} from '@icon-park/react/es/all';
import React, {Fragment} from 'react';

export function Demo(props: {type: IconType}): JSX.Element {

    const {type} = props;

    if(ALL_ICON_KEYS.indexOf(type) < 0) {
        return (
            <span>图标不存在</span>
        );
    }

    return (
        <Fragment>
            <Icon type={type} theme="filled" />
            <Icon type="AddText" theme="filled" />
            <Icon type="add-text" />
        </Fragment>
    )
}
```

## 属性

|    属性名称 | 介绍  | 类型  | 默认值 | 注释 |
| ---------- | --- | --- | --- | --- |
| theme |  图标主题 | 'outline' &#124; 'filled' &#124; 'two-tone' &#124; 'multi-color' | 'outline'  |
| size | 图标的大小，宽高相同 | number &#124; string |  '1em' |
| spin |  给图标加旋转效果 | boolean | false |
| fill |  图标的颜色，不超过4个颜色，默认为当前颜色 | string &#124; string[]|  'currentColor' |
| strokeLinecap |  svg元素的stroke-linecap属性 | 'butt' &#124; 'round' &#124; 'square' |  'round' |
| strokeLinejoin |  svg元素的stroke-linejoin属性 | 'miter' &#124; 'round' &#124; 'bevel' |  'round' |
| strokeWidth |  svg元素的stroke-width属性 | number |  4 |

**其他属性**
你可以使用定义的`HTMLAttributes<HTMLSpanElement>>`上的全部属性，比如：

* className
* style
* onClick
* ...