## BioIcon 图标显示组件
主要用于展示icon图标。

### 基本用法

:::demo 绑定`name`到一个`string`类型的变量。可以使用`size`属性与`color`属性来设置icon图形的大小和颜色。

```html
<bio-icon
  prefix="icon-"
  name="rate-face-off"
  color="#13ce66"
  size="16px">
</bio-icon>
```
:::

### 禁用状态

:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。


```html
<bio-icon
  name="logo"
  color="#409EFF"
  :disabled="value1">
</bio-icon>
<bio-icon
  name="logo"
  color="#409EFF"
  :disabled="value2">
</bio-icon>
<script>
  export default {
    data() {
      return {
        value1: true,
        value2: false
      }
    }
  };
</script>
```


:::

### 图标集合

<ul class="icon-list">
  <li v-for="item in $bioIcon" :key="name">
    <div :style="{display: 'flex',flexDirection:'column',cursor:'pointer'}">
      <bio-icon :name="item.font_class" size="22px" :style="{marginTop:'40px',marginBottom:'10px'}"></bio-icon>
      <div class="icon-name" :style="{marginBottom:'10px'}">{{ item.font_class}}</div>
      <div class="icon-name" :style="{fontSize:'12px',color:'gray'}">{{ item.name}}</div>
    </div>
  </li>
</ul>



### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| name | icon的名字             | string | — | — |
| disabled  | 是否禁用    | boolean   | — | false   |
| title | icon元素的title | string | — | — |
| prefix | icon元素的前缀名 | string   | — | bio-icon__ |
| color | icon元素的颜色 | string   | — | — |
| size | icon元素的fontSize大小 | string   | — | — |

### Events
| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| click | icon元素被点击时的回调函数 | — |_
