# Ico 图标
----
### 基础用法
使用```name```属性来定义 Ioc 的样式。

<div class="demo-block">
	<div class="icolist">
	    <hea-ico name='goods'></hea-ico>
	    <hea-ico name='github' color="#ff0000"></hea-ico>
	    <hea-ico name='star'></hea-ico>
	</div>
</div>

::: demo
```html

<div class="icolist">
	 <hea-ico name='goods'></hea-ico>
	 <hea-ico name='github' color="#ff0000"></hea-ico>
	 <hea-ico name='star'></hea-ico>
</div>

```
:::



### 已有图标库


<div class="demo-block">
	<div class="icolist">
	    <hea-ico name='zan' info="zan"></hea-ico>
	    <hea-ico name='clouddownload-o' info="clouddownload-o"></hea-ico>
	    <hea-ico name='cloudupload-o' info="cloudupload-o"></hea-ico>
	    <hea-ico name='areachart' info="areachart"></hea-ico>
	    <hea-ico name='vuejs' info="vuejs"></hea-ico>
	    <hea-ico name='angular' info="angular"></hea-ico>
	    <hea-ico name='sorting' info="sorting"></hea-ico>
	    <hea-ico name='eye-o' info="eye-o"></hea-ico>
	    <hea-ico name='eye-close' info="eye-close"></hea-ico>
	    <hea-ico name='icon-boss-fill' info="icon-boss-fill"></hea-ico>
	    <hea-ico name='zoom-out' info="zoom-out"></hea-ico>
	    <hea-ico name='zoom-in' info="zoom-in"></hea-ico>
	    <hea-ico name='tupian' info="tupian"></hea-ico>
	    <hea-ico name='question' info="question"></hea-ico>
	    <hea-ico name='error-c' info="error-c"></hea-ico>
	    <hea-ico name='location1' info="location1"></hea-ico>
	    <hea-ico name='left' info="left"></hea-ico>
	    <hea-ico name='location' info="location"></hea-ico>
	    <hea-ico name='right1' info="right1"></hea-ico>
	    <hea-ico name='left2-copy' info="left2-copy"></hea-ico>
	    <hea-ico name='right2' info="right2"></hea-ico>
	    <hea-ico name='down' info="down"></hea-ico>
	    <hea-ico name='top' info="top"></hea-ico>
	    <hea-ico name='loading3' info="loading3"></hea-ico>
	    <hea-ico name='info-outline' info="info-outline"></hea-ico>
	    <hea-ico name='minus1' info="minus1"></hea-ico>
	    <hea-ico name='close' info="close"></hea-ico>
	    <hea-ico name='remove' info="remove"></hea-ico>
	    <hea-ico name='ZoomIn' info="ZoomIn"></hea-ico>
	    <hea-ico name='ZoomOut' info="ZoomOut"></hea-ico>
	    <hea-ico name='loading1' info="loading1"></hea-ico>
	    <hea-ico name='heart2' info="heart2"></hea-ico>
	    <hea-ico name='heart1' info="heart1"></hea-ico>
	    <hea-ico name='head-photo' info="head-photo"></hea-ico>
	    <hea-ico name='star1' info="star1"></hea-ico>
	    <hea-ico name='color' info="color"></hea-ico>
	    <hea-ico name='add2' info="add2"></hea-ico>
	    <hea-ico name='Heart' info="Heart"></hea-ico>
	    <hea-ico name='placeholder' info="placeholder"></hea-ico>
	    <hea-ico name='loading2' info="loading2"></hea-ico>
	    <hea-ico name='pie' info="pie"></hea-ico>
	    <hea-ico name='menu' info="menu"></hea-ico>
	    <hea-ico name='sort' info="sort"></hea-ico>
	    <hea-ico name='edit' info="edit"></hea-ico>
	    <hea-ico name='mac' info="mac"></hea-ico>
	    <hea-ico name='love1' info="love1"></hea-ico>
	    <hea-ico name='add1' info="add1"></hea-ico>
	    <hea-ico name='wenti' info="wenti"></hea-ico>
	    <hea-ico name='right' info="right"></hea-ico>
	    <hea-ico name='photo' info="photo"></hea-ico>
	    <hea-ico name='loading' info="loading"></hea-ico>
	    <hea-ico name='more1' info="more1"></hea-ico>
	    <hea-ico name='github' info="github"></hea-ico>
	    <hea-ico name='goods' info="goods"></hea-ico>
	    <hea-ico name='msg1' info="msg1"></hea-ico>
	    <hea-ico name='star' info="star"></hea-ico>
	    <hea-ico name='info' info="info"></hea-ico>
	    <hea-ico name='msg' info="msg"></hea-ico>
	    <hea-ico name='news' info="news"></hea-ico>
	    <hea-ico name='admin' info="admin"></hea-ico>
	    <hea-ico name='news1' info="news1"></hea-ico>
	    <hea-ico name='warning' info="warning"></hea-ico>
	    <hea-ico name='success' info="success"></hea-ico>
	    <hea-ico name='eye' info="eye"></hea-ico>
	    <hea-ico name='buycar' info="buycar"></hea-ico>
	    <hea-ico name='heart' info="heart"></hea-ico>
	    <hea-ico name='add' info="add"></hea-ico>
	    <hea-ico name='search' info="search"></hea-ico>
	    <hea-ico name='share' info="share"></hea-ico>
	    <hea-ico name='minus' info="minus"></hea-ico>
	    <hea-ico name='more' info="more"></hea-ico>
	    <hea-ico name='file' info="file"></hea-ico>
	    <hea-ico name='nodejs' info="nodejs"></hea-ico>
	    <hea-ico name='info1' info="info1"></hea-ico>
	    <hea-ico name='28' info="28"></hea-ico>
	    <hea-ico name='back' info="back"></hea-ico>
	    <hea-ico name='date' info="date"></hea-ico>
	    <hea-ico name='more1' info="more1"></hea-ico>
	</div>
</div>

::: demo
```html

<div class="icolist">
    <hea-ico name='zan' info="zan"></hea-ico>
    <hea-ico name='clouddownload-o' info="clouddownload-o"></hea-ico>
    <hea-ico name='cloudupload-o' info="cloudupload-o"></hea-ico>
    <hea-ico name='areachart' info="areachart"></hea-ico>
    <hea-ico name='vuejs' info="vuejs"></hea-ico>
    <hea-ico name='angular' info="angular"></hea-ico>
    <hea-ico name='sorting' info="sorting"></hea-ico>
    <hea-ico name='eye-o' info="eye-o"></hea-ico>
    <hea-ico name='eye-close' info="eye-close"></hea-ico>
    <hea-ico name='icon-boss-fill' info="icon-boss-fill"></hea-ico>
    <hea-ico name='zoom-out' info="zoom-out"></hea-ico>
    <hea-ico name='zoom-in' info="zoom-in"></hea-ico>
    <hea-ico name='tupian' info="tupian"></hea-ico>
    <hea-ico name='question' info="question"></hea-ico>
    <hea-ico name='error-c' info="error-c"></hea-ico>
    <hea-ico name='location1' info="location1"></hea-ico>
    <hea-ico name='left' info="left"></hea-ico>
    <hea-ico name='location' info="location"></hea-ico>
    <hea-ico name='right1' info="right1"></hea-ico>
    <hea-ico name='left2-copy' info="left2-copy"></hea-ico>
    <hea-ico name='right2' info="right2"></hea-ico>
    <hea-ico name='down' info="down"></hea-ico>
    <hea-ico name='top' info="top"></hea-ico>
    <hea-ico name='loading3' info="loading3"></hea-ico>
    <hea-ico name='info-outline' info="info-outline"></hea-ico>
    <hea-ico name='minus1' info="minus1"></hea-ico>
    <hea-ico name='close' info="close"></hea-ico>
    <hea-ico name='remove' info="remove"></hea-ico>
    <hea-ico name='ZoomIn' info="ZoomIn"></hea-ico>
    <hea-ico name='ZoomOut' info="ZoomOut"></hea-ico>
    <hea-ico name='loading1' info="loading1"></hea-ico>
    <hea-ico name='heart2' info="heart2"></hea-ico>
    <hea-ico name='heart1' info="heart1"></hea-ico>
    <hea-ico name='head-photo' info="head-photo"></hea-ico>
    <hea-ico name='star1' info="star1"></hea-ico>
    <hea-ico name='color' info="color"></hea-ico>
    <hea-ico name='add2' info="add2"></hea-ico>
    <hea-ico name='Heart' info="Heart"></hea-ico>
    <hea-ico name='placeholder' info="placeholder"></hea-ico>
    <hea-ico name='loading2' info="loading2"></hea-ico>
    <hea-ico name='pie' info="pie"></hea-ico>
    <hea-ico name='menu' info="menu"></hea-ico>
    <hea-ico name='sort' info="sort"></hea-ico>
    <hea-ico name='edit' info="edit"></hea-ico>
    <hea-ico name='mac' info="mac"></hea-ico>
    <hea-ico name='love1' info="love1"></hea-ico>
    <hea-ico name='add1' info="add1"></hea-ico>
    <hea-ico name='wenti' info="wenti"></hea-ico>
    <hea-ico name='right' info="right"></hea-ico>
    <hea-ico name='photo' info="photo"></hea-ico>
    <hea-ico name='loading' info="loading"></hea-ico>
    <hea-ico name='more1' info="more1"></hea-ico>
    <hea-ico name='github' info="github"></hea-ico>
    <hea-ico name='goods' info="goods"></hea-ico>
    <hea-ico name='msg1' info="msg1"></hea-ico>
    <hea-ico name='star' info="star"></hea-ico>
    <hea-ico name='info' info="info"></hea-ico>
    <hea-ico name='msg' info="msg"></hea-ico>
    <hea-ico name='fenxiang' info="fenxiang"></hea-ico>
    <hea-ico name='news' info="news"></hea-ico>
    <hea-ico name='admin' info="admin"></hea-ico>
    <hea-ico name='news1' info="news1"></hea-ico>
    <hea-ico name='warning' info="warning"></hea-ico>
    <hea-ico name='success' info="success"></hea-ico>
    <hea-ico name='eye' info="eye"></hea-ico>
    <hea-ico name='buycar' info="buycar"></hea-ico>
    <hea-ico name='heart' info="heart"></hea-ico>
    <hea-ico name='add' info="add"></hea-ico>
    <hea-ico name='search' info="search"></hea-ico>
    <hea-ico name='share' info="share"></hea-ico>
    <hea-ico name='minus' info="minus"></hea-ico>
    <hea-ico name='more' info="more"></hea-ico>
    <hea-ico name='file' info="file"></hea-ico>
    <hea-ico name='nodejs' info="nodejs"></hea-ico>
    <hea-ico name='info1' info="info1"></hea-ico>
    <hea-ico name='28' info="28"></hea-ico>
    <hea-ico name='back' info="back"></hea-ico>
    <hea-ico name='date' info="date"></hea-ico>
    <hea-ico name='more1' info="more1"></hea-ico>
</div>

```
:::


### Attributes
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|----------|-------- |---------- |-------------  |-------- |
| name     | 图标名称   | string  | 已有图标库名称 |    —     |
| info     | 图标文字   | string    | -  |     —    |
| color    | 图标颜色   | string    | - |  -   |

