## Icon 图标

**包含了常用的 Icon**

### 基本用法

#### 按钮类型
通过设置不同的name，显示不同的图标

```html
<v-icon name="plus"></v-icon>
```

通过设置style, 我们可以控制图标的样式。

```html
<v-icon name="plus" style="width: 100px; height: 100px"></v-icon>
```

#### 图标大小
通过设置size, 可以选择不同的图标大小，默认'base', 可选值'xs', 'sm', 'base', 'lg'
```html
  <v-icon name="comment" size="xs"></v-icon>
  <v-icon name="comment" size="sm"></v-icon>
  <v-icon name="comment"></v-icon>
  <v-icon name="comment" size="lg" ></v-icon>
```

#### 图标颜色
通过设置color, 可以设置图标颜色，默认'#000'
```html
  <v-icon name="comment" color="red"></v-icon>
  <v-icon name="comment" color="blue"></v-icon>
  <v-icon name="comment" color="pink"></v-icon>
```

#### demo应用

```html
  <icon-wrap>
    <v-icon name="plus" slot="icon"></v-icon>
    <div slot="name" class="icon-name">plus</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="home" slot="icon"></v-icon>
    <div slot="name" class="icon-name">home</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="minus" slot="icon"></v-icon>
    <div slot="name" class="icon-name">minus</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="blocked" slot="icon"></v-icon>
    <div slot="name" class="icon-name">blocked</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="cross" slot="icon"></v-icon>
    <div slot="name" class="icon-name">cross</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="checkmark" slot="icon"></v-icon>
    <div slot="name" class="icon-name">checkmark</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="share" slot="icon"></v-icon>
    <div slot="name" class="icon-name">share</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="warn" slot="icon"></v-icon>
    <div slot="name" class="icon-name">warn</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="设置" slot="icon"></v-icon>
    <div slot="name" class="icon-name">设置</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="待评价" slot="icon"></v-icon>
    <div slot="name" class="icon-name">待评价</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="描述" slot="icon"></v-icon>
    <div slot="name" class="icon-name">描述</div>
  </icon-wrap>
  <icon-wrap>
    <v-icon name="已完成" slot="icon"></v-icon>
    <div slot="name" class="icon-name">已完成</div>
  </icon-wrap>
```

### 使用自定义图标

- 使用自己的 iconfont 文件
- 如果是webpack的工程且自定义的图标为svg格式，则需要引入[svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader)，用来处理svg图标。参考配置如下：

``` javascript
{
  test: /\.svg$/,
  loader: 'svg-sprite-loader'
}
```

然后使用如下
``` javascript
<v-icon name="自定义的svg文件名"></v-icon>
```

### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| name  | Icon类型    | string   |  参考demo应用  | - |
| size  | Icon大小    | string   |  'xs', 'sm', 'base', 'lg'  | 'base' |
| color  | Icon颜色  | string   |  | '#000' |