# Icon 图标

使用iconfont图标

## 基础用法

::: snippet 设置`name`改变图标，name与`iconfont`项目中的`icon-xxx`中的内容为准

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

:::

## 大小

::: snippet 设置`size`改变图标大小，支持px与rem等css标准样式

```html
<template>
  <div>
    <zui-icon name="attachmoney" />
    <zui-icon name="accountbalancewallet" size="16px" />
    <zui-icon name="trendingup" size="2rem" />
  </div>
</template>
```

:::

## 颜色

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

```html
<template>
  <div>
    <zui-icon name="attachmoney" size="1.5rem" color="deepskyblue" />
    <zui-icon name="trendingup" size="2rem" color="red" />
  </div>
</template>
```

:::

## 标记信息

::: snippet 设置`info`改变右上角标记信息

```html
<template>
  <div>
    <zui-icon name="accountbalancewallet" size="2rem" info="1" />
    <zui-icon name="dns" size="2rem" info="新" />
  </div>
</template>
```

:::

## 标记点

::: snippet 设置`dot`在右上角显示一个标记点

```html
<template>
  <div>
    <zui-icon name="dns" size="2rem" dot />
  </div>
</template>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
name | 图标名 | String | - | -
fontFamily | 图标类型 | String | - | iconfont
classPrefix | 图标前缀 | String | - | 'icon-'
size | 大小 | String | - | -
color | 颜色 | String | - | -
info | 角标内容 | Number, String | - | -
dot | 标记点 | Boolean | - | -

## Events 事件

事件名称|说明|回调参数
-|-|-
click | 按钮点击事件 | -