> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon 图标

> Icon 图标组件参考，介绍宜搭内置图标的选择方式与尺寸设置，为页面增加直观的视觉标识。

图标展示，用户可以使用宜搭内置的图标，并设置其尺寸。

## 何时使用

通过图标来展示一些标记，例如警告、提示、趋势等。

## 组件示例

<iframe src="https://www.aliwork.com/developer/icon-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 自定义图标使用

### 1.需要先进入<a href="https://www.iconfont.cn/">iconfont</a>

### 2.添加喜欢的图标到购物车，添加完成后进入购物车，把icon添加到新项目中（推荐新建项目）

### 3.选择Symbol，查看在线链接，复制代码到宜搭；：示例：

```
 //at.alicdn.com/t/font_3429645_pimqzpqqzps.js
```

### 4.复制icon的name到宜搭：示例：

```
 icon-liebiao
```

## 组件属性

| 属性          | 说明                                                           | 类型                                                                          | 默认值        |
| ----------- | ------------------------------------------------------------ | --------------------------------------------------------------------------- | ---------- |
| `baseType`  | 基础图标，只对应上面示例中icon下的文案                                        | `string`                                                                    | `'smile'`  |
| `otherType` | 自定义图标                                                        | `string`                                                                    | `'smile'`  |
| `size`      | 图标尺寸大小                                                       | `'xxs' \| 'xs' \| 'small' \| 'medium' \| 'large' \| 'xl' \|'xxl' \| 'xxxl'` | `'medium'` |
| `useType`   | 图标使用类型，若为true则 **otherType** 属性生效，若为false则 **baseType** 属性生效 | `boolean`                                                                   | `false`    |