# Icon 图标

[toc]

用于展示图标。组件预设提供的图标是基于 Webfont，可任意调整尺寸、改变颜色。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-icon": "../dist/icon/index"
  }
}

```

## 用法

### 基础用法

`name` 属性支持传入图标名称与图片链结。

```html
<tea-icon name="success"></tea-icon>
<tea-icon name="https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/image.svg"></tea-icon>
```

### 图标颜色

通过 `color` 属性设置图标颜色。

```html
<tea-icon name="success" color="#29CC85"></tea-icon>
```

### 图标大小

图标大小默认为 `24px`。可通过 `size` 属性设置图标大小，默认单位为 `px`、支持自带单位。

```html
<tea-icon name="success" size="32px"></tea-icon>
```

## Props

| 参数    | 描述                              | 类型              | 默认值    |
| ----- | ------------------------------- | --------------- | ------ |
| name  | 图标名称或图片链结                       | `String`        | -     |
| color | 图标颜色                            | `String`        | -     |
| size  | 图标大小，如20px、20rpx。默认单位为`px`，支持自带单位 | `Number,String` | `24px` |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |