icon 图标

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-icon": "@retailwe/ui-icon/index"
}

代码演示

基础用法

<wr-icon name="time"/>
<wr-icon name="loading"/>

指定大小

<wr-icon name="time" size="24"/>

显示角标

<wr-icon name="time" info="99+"/>

显示红点

<wr-icon name="time" dot/>

指定颜色

<wr-icon name="time" color="blue"/>
<wr-icon name="time" color="red"/>
<wr-icon name="time" color="gray"/>

API

icon Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | name | iconfont的类名（去除前缀部分）, 也可以是图片url | string | - | - | | class-prefix | iconfont的类名前缀 | string | market | - | | size | iconfont的字体大小，决定了图标的大小 | number | string | 24 | - | | color | icfongfont的字体颜色，决定了图标的颜色 | string | - | - | | info | 需要显示的角标内容 | string | - | - | | dot | 是否需要显示右上角红点，优先级比info高 | boolean | false | - | | custom-style | 自定义样式 | string | - | - |

icon Event

| 事件名 | 说明 | 参数 | |------|------|------| | tap | 点击图标组件时触发 | - |

icon 外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点外部样式类 |

icon css var

| 类名 | 说明 | 默认值 | | --------------- | -------- | ------ | | --ui-icon-host-display | 根容器定位方式 | inline-flex | | --ui-icon-color | 颜色 | inherit | | --ui-icon-size | 字体大小 | inherit |