### HIcon 组件
介绍: 项目中引入了 [Font Awesome](http://fontawesome.io/icons/)，所以只要是 `Font Awesome` 中有的图标都可以在项目中使用，不过 `HIcon` 组件又对其进行了封装，可以非常方便的使用。比如需要使用一个 `book` 图标，我们会用一下代码
<i class="fa fa-book" aria-hidden="true"></i>
不过如果使用了 `HIcon` 组件，只需要 `<HIcon type="book"></HIcon>` 就可以了，内部使用的是 `span` 标签。`HIcon` 支持的属性如下表所示：
<table>
<caption>HIcon 属性</caption>
<thead>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</thead>
<tbody>
<tr>
<td>type</td>
<td>icon 的类型</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>size</td>
<td>icon 的大小</td>
<td>String | Number</td>
<td>28</td>
</tr>
<tr>
<td>color</td>
<td>icon 的颜色</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<table>
<caption>HIcon 事件</caption>
<thead>
<th>事件名</th>
<th>说明</th>
<th>返回值</th>
</thead>
<tbody>
<tr>
<td>onClick</td>
<td>点击事件</td>
<td>-</td>
</tr>
</tbody>
</table>
示例代码：
<template>
<div class="container">
<HIcon v-for="(icon, index) in icons" :type="icon.type" :key="index"></HIcon>
</div>
</template>
<script>
import { HIcon } from 'vuecomponent'
export default {
components: {
HIcon
},
data () {
return {
icons: [
{type: 'google'},
{type: 'safari'},
{type: 'firefox'},
{type: 'opera'},
{type: 'edge'},
{type: 'github'},
{type: 'qq'},
{type: 'renren'},
{type: 'weibo'},
{type: 'weixin'},
{type: 'windows'}
]
}
}
}
</script>
<style scoped>
.container {
width: 480px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
</style>
效果示意图：
