# Icon 图标

基于`iconfont`标准，支持`font-class`、`symbol`两种iconfont引用方式，支持引用本地或网络图片

## 基础用法

::: snippet 设置`name`改变图标，默认为`font-class`模式

```html
<template>
  <div>
    <zui-icon name="attachmoney" />
    <zui-icon name="accountbalancewallet" />
    <zui-icon name="trendingup" />
    <zui-icon name="dns" />
  </div>
</template>
```

:::

## 多色图标

::: snippet 设置`svg`转换为`symbol`模式

```html
<template>
  <div>
    <zui-icon name="tongzhi" svg />
    <zui-icon name="sousuo" svg />
    <zui-icon name="tubiaozhizuomobandefuben-" svg />
    <zui-icon name="fasong" svg />
  </div>
</template>
```

:::

## 图片图标

::: snippet 设置`src`即图片模式

```html
<template>
  <div>
    <zui-icon src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_1@1x-d1e660cf3b.png" />
    <zui-icon src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_2@1x-50e9c7fdf4.png" />
    <zui-icon src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_3@1x-676616abe1.png" />
    <zui-icon src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/mark-icon-1@1x-c1226bc3ad.png" />
  </div>
</template>
```

:::

## 大小

::: snippet 设置`size`改变图标大小，`unit`设置单位，默认`rem`

```html
<template>
  <div>
    <zui-icon name="attachmoney" />
    <zui-icon name="tongzhi" svg :size="32" unit="px" />
    <zui-icon src="/img/vue.svg" :size="2" />
    <zui-icon src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_1@1x-d1e660cf3b.png" :size="3" />
  </div>
</template>
```

:::

## 颜色

::: snippet 设置`color`改变图标颜色，支持HEX与RGB等CSS标准样式

```html
<template>
  <div>
    <zui-icon name="transaction_fill" color="#28AA91" />
    <zui-icon name="coupons_fill" color="red" />
  </div>
</template>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
name | 图标名 | String | - | -
fontFamily | 图标类型 | String | - | iconfont
classPrefix | 图标前缀 | String | - | icon-
size | 大小 | Number | - | -
unit | 单位 | String | - | rem
color | 颜色 | String | - | -
svg | 使用symbol引用svg | Boolean | - | -
src | 图片地址 | String | - | -