# Icon

- category: UI
- chinese: 图标
- type: UI组件

---

<a href="http://nuke.alibaba-inc.com/" target="_blank"> Nuke UI </a>


![nuke-icon@ALINPM](http://web.npm.alibaba-inc.com/badge/v/nuke-icon.svg?style=flat-square)  ![nuke-icon@ALINPM](http://web.npm.alibaba-inc.com/badge/d/nuke-icon.svg?style=flat-square)

## 设计思路

Icon 组件 是对 Image 组件的一个封装，预置了4个尺寸的图片，方便我们在开发中使用方形的图片。

考虑到使用便捷性，还额外加入了 Iconfont 图标的支持，内置的 icon 库是：[iconfont.cn 上的千牛官方库](http://www.iconfont.cn/collections/detail?cid=4491)，所有支持的 icon 以及对应的 name 值，可以扫码看 demo 。

## API

| 参数    | 说明                                                                     | 类型     | 默认值   |
| ------- | ------------------------------------------------------------------------ | -------- | -------- |
| type    | 新增 type 字段，标识是 iconfont 还是图片,可选 `image` `iconfont`         | string   | 'image'  |
| size    | type= image 时有效，定义了 icon 的尺寸：'xs', 'small', 'medium', 'large' | string   | 'medium' |
| onPress | 当传入name时失效，Press事件                                              | Function | 无       |
| src     | 图片链接地址或 iconfont url                                              | string   | 无       |
| name    | iconfont name 值                                                         | string   | 无       |
| version | 如果使用新版千牛官方图标，则需传入v2                                     | string   | default  |