# i-icon

> igola-weex-ui 图标组件

## [Demo](https://h5.m.taobao.com/trip/wx-detection-demo/button/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwx-detection-demo%2Fbutton%2Findex.weex.js)

<img src="https://gw.alipayobjects.com/zos/rmsportal/lGbrTEnxmgxmNdgHJhbA.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1b0tMhf6H8KJjy0FjXXaXepXa-200-200.png" width="160"/>

## 使用方法


```vue
<template>
  <i-icon name='icon-flights-home' size='30px' color='red' @onclick='iconClick'></i-icon>
</template>

<script>
  import { iIcon } from 'weex-ui'
  export default {
    components: { iIcon },
    methods: {
      iconClick (e) {
        console.log(e)
      }
    }
  }
</script>

```
更详细代码可以参考 [这里](https://github.com/alibaba/weex-ui/blob/master/example/button/index.vue)

### 可配置参数
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| **`name`** | `String` | `Y` | `-` | 对应icon的名字 |
| **`color`** | `String` | `N` | `#323232` | icon颜色 |
| **`size`** | `String` | `N` | `40px` | icon 大小 |
| **`padding`** | `String` | `N` | `0px` | icon  padding  样式 |
| **`margin`** | `String` | `N` | `0px` | icon margin  样式 |
| **`top`** | `String` | `N` | `0px` | icon  距离顶部  样式 |
| **`bottom`** | `String` | `N` | `0px` | icon 距离底部  样式 |
| **`left`** | `String` | `N` | `0px` | icon  距离左边  样式 |
| **`right`** | `String` | `N` | `0px` | icon 距离右边  样式 |
| **`pl`** | `String` | `N` | `0px` | icon  左边填充  样式 |
| **`pr`** | `String` | `N` | `0px` | icon 右边填充  样式 |
| **`pt`** | `String` | `N` | `0px` | icon  上边填充  样式 |
| **`pb`** | `String` | `N` | `0px` | icon 下边填充  样式 |



### 事件回调

```
// `@onclick="iconClick"`
将会返回 e
```