Icon 图标

使用iconfont图标

8e89ea2d82036f4fb1542170a46dadc46117f85c/examples/views/docs/component/icon.md#">基础用法

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

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

:::

8e89ea2d82036f4fb1542170a46dadc46117f85c/examples/views/docs/component/icon.md#">大小

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

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

:::

8e89ea2d82036f4fb1542170a46dadc46117f85c/examples/views/docs/component/icon.md#">颜色

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

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

:::

8e89ea2d82036f4fb1542170a46dadc46117f85c/examples/views/docs/component/icon.md#">标记信息

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

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

:::

8e89ea2d82036f4fb1542170a46dadc46117f85c/examples/views/docs/component/icon.md#">标记点

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

<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 | true,false | -

Events 事件

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