# HroIcon 图标

### 介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

同时也支持图片 url

## 代码演示

### 基础用法

通过 `name` 属性来指定需要使用的图标，支持 `vant icon` 、`hron icon` 自定义 `icon` 以及网络图

```html
<ul class="list">
  <li>
    <hor-icon name="hor-version" />
  </li>
  <li>
    <hor-icon name="hor-version" dot />
  </li>
  <li>
    <hor-icon name="hor-version" badge="9" />
  </li>
  <li>
    <hor-icon name="hor-version" badge="v0.0.1" />
  </li>
</ul>
```

### Horn Icon 写法

```html
<ul class="list">
  <li>
    <hor-icon name="hor-version" />
  </li>
  <li>
    <hor-icon class-prefix="hor-icon" name="version" />
  </li>
</ul>
```

### Vant Icon

```html
<ul class="list">
  <li>
    <hor-icon name="chat-o" />
  </li>
  <li>
    <hor-icon name="van-chat-o" />
  </li>
  <li>
    <hor-icon class-prefix="van-icon" name="chat-o" />
  </li>
</ul>
```

### 支持URL
```html
<ul class="list">
  <li>
    <hor-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />
  </li>
</ul>
```


## API

### Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horIconProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorIcon, horIconProps } from '.'
  import { parseType } from '../utils'
</script>