图标

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	根节点样式类