### 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>
效果示意圖：
