<script>
  var iconList = require('@/icon.json');
  export default {
    data() {
      return {
        icons: iconList
      };
    }
  }
</script>
<style lang="less" scoped>
  @import "../assets/less/var.less";

</style>

# Icon 图标

----
```Huadao-UI``` 使用开源的阿里 Iconfont 作为图标库，并制作成了 ```icon font```。


### 使用

使用 ```class="h-icon-?"``` 来声明图标，具体图标的名称请 ```copy``` 相应的标签

<div class="demo-block">
  <i class="h-icon-lock"></i>
  <i class="h-icon-new-yd"></i>
  <i class="h-icon-shouye"></i>
  <i class="h-icon-new-xsbb"></i>
</div>

::: demo
```html

<i class="h-icon-lock"></i>
<i class="h-icon-new-yd"></i>
<i class="h-icon-shouye"></i>
<i class="h-icon-new-xsbb"></i>

```
:::

### 图标库

<ul class="icon-list">
  <li v-for="name in icons" :key="name">
    <span>
      <i :class="'h-' + name"></i>
      {{'h-' + name}}
    </span>
  </li>
</ul>
