小程序开发框架

# mx-icon 图标

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-icon": "/miniprogram_npm/m-ui/mx-icon/index"
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

Icon的name属性支持传入图标名称或图片链接。

<mx-icon name="close" />
<mx-icon name="https://pic.midea.cn/h5/img/mall/category_sub/category_10007.png?x-oss-process=image/format,webp/quality,Q_90&@32w_32h_90Q.png&t=20220516" />

# 提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<mx-icon name="chat" dot />
<mx-icon name="chat" info="9" />
<mx-icon name="chat" info="99+" />

# 图标颜色

设置color属性来控制图标颜色。

<mx-icon name="chat" color="red" />

# 图标大小

设置size属性来控制图标大小。

<mx-icon name="chat" size="50px" />

# 设置前缀

通过class-prefix 设置类名前缀，默认是mx-icon,我们后期需要统一添加维护的为mx-iconfont

<mx-icon name="{{ demoIcon }}" classPrefix="mx-iconfont" size="32px" custom-class="icon" color="#1989fa" />

# 自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\e626';
}

/* 引入第三方或自定义的字体图标样式 */
<!-- 通过 class-prefix 指定类名为 my-icon -->
<mx-icon class-prefix="my-icon" name="extra" />

# API

# Props

参数 说明 类型 默认值
name 图标名称或图片链接 string -
dot 是否显示图标右上角小红点 boolean false
info 图标右上角文字提示 string、 number -
color 图标颜色 string inherit
size 图标大小，如 20px，2em，默认单位为px string、number inherit
custom-style 自定义样式 string ''
overlay-style 自定义遮罩层样式 string ''
class-prefix 类名前缀 string mx-icon

# Event

事件名 说明 参数
bind:click 点击图标时触发 -

# 外部样式类

名称 说明
custom-class 根节点样式类

← 图片（image） →