frontend / zui

icon.md 2.32 KB

Icon 图标

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

39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/icon.md#">基础用法

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

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

:::

39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/icon.md#">多色图标

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

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

:::

39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/icon.md#">图片图标

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

<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>

:::

39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/icon.md#">大小

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

<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>

:::

39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/icon.md#">颜色

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

<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 | - | -