mView

Icon 图标

基于字体的图标集，只包含少量图标。

新增图标

mView里收集的图标只有少量，如果对于您的项目还不满足，你可以自己新增字体图标。

你可以访问uni-app字体图标open in new window了解，mView里字体图标是基于阿里字体图标open in new window实现。

mView字体图标配置：

/* 图标放置位置 mview-ui/libs/iconfont */

@font-face {
    font-family: "iconm";
    src: url('~@/uni_modules/mview-ui/libs/iconfont/iconfont.ttf');
}

.iconm {
    font-family: "iconm" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.m-arrow-right:before {
  content: "\e743";
}

.m-close:before {
  content: "\e723";
}

.m-backspace:before {
  content: "\e624";
}

.m-scan:before {
    content: "\e600";
}

.m-left:before {
    content: "\e601";
}

.m-add:before {
    content: "\e726";
}

.m-search:before {
    content: "\e78b";
}

.m-camera:before {
    content: "\e8bc";
}

.m-home:before {
    content: "\e7a7";
}

平台差异说明

App(vue)App(nvue)H5小程序
√×√√

基本使用

通过<m-icon>形式来调用，设置name参数为图标名即可。其中color默认为#606266，size默认为16px

<m-icon name="left"></m-icon>

修改图标的样式

  • 通过color参数修改图标的颜色
  • 通过size参数修改图标的大小，单位为px
<m-icon name="left" color="red" size="24"></m-icon>

API

Props

参数说明类型默认值可选值
name图标名称，见示例图标集String-参考下方图标集合
color图标颜色Stringcolor['m-content-color']-
size图标字体大小，单位默认pxString | Number16px-
bold是否显示粗体Booleanfalsetrue
index一个用于区分多个图标的值，点击图标时通过click事件传出String | Number--
stop是否阻止事件传播Booleanfalsetrue

Events

事件名说明回调参数版本
click点击图标时触发ndex: 通过props传递的index值-

图标集

  • arrow-right

  • close

  • backspace

  • scan

  • left

  • add

  • search

  • camera

  • home