## BioSvg 矢量图形显示组件

主要用于展示svg图形。

### 基本用法

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

```html
<bio-svg
  name="activate"
  color="#13ce66"
  size="16px">
</bio-svg>
```
:::

### 扩展用法

:::demo 设置`width`和`height`属性，来实现对svg图形宽高的控制，设置`className`属性为svg元素添加类名实现更多样式控制。当发现组件设置color不生效时，是因为下载的svg图形设有默认的颜色 只需找到svg代码中的`fill`属性进行删除即可。


```html
<bio-svg
  name="bio-logo"
  color="#409EFF"
  width="100px"
  height="20px"
  class-name="bio-logo">
</bio-svg>
```

:::

### 禁用状态

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


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


### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| name | svg文件的名字 | string | — | — |
| disabled  | 是否禁用    | boolean   | — | false   |
| width  | svg元素的宽度  | string | — | — |
| height  | svg元素的高度 | string   | — | — |
| color | svg元素的颜色 | string   | — | — |
| size | svg元素的fontSize大小 | string   | — | — |
| className | svg元素的类名 | string   | — | — |

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