m-icon 图标

简述

基于自定义字体图标，支持引入您自己的图标库。

注意

请以 uni_modules/m-unix 与本文为准；各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力（相册、定位、剪贴板、手机号等）需在 manifest 与后台完成配置。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/icon/icon
线上 H5（hash）	打开演示

基本使用

<template>
	<view>
		<m-icon name="arrow-right" color="#333333" size="40"></m-icon>
	</view>
</template>

Props

参数	说明	类型	默认值
name	图标名称，对应字体图标里的 class，自动添加 .iconfont.icon-${name}	string	''
size	图标大小，单位 rpx	number	40
color	图标颜色	string	-
bold	是否加粗	boolean	false

Events

事件名	说明
click	点击图标时触发

插槽

名称	说明
default	自定义图标内容

示例

基础用法

<m-icon name="search" size="32" color="#909399"></m-icon>

不同颜色

<m-icon name="close" color="#f56c6c" size="40"></m-icon>

说明

在项目中引入自定义字体图标

项目中已内置了字体文件，存放于项目根目录 font_5145617_po0co0ipc2/。

使用步骤：

1. iconfont.ttf 放到宿主工程 static/iconfont/iconfont.ttf（与样式里引用的路径一致；若使用本库自带字库，需与 m-icon 内 Unicode 映射匹配，详见 uni_modules/m-unix/readme.md「图标字体」）。
2. 在 App.uvue（或根样式）中引入 @import '@/uni_modules/m-unix/index.scss';（已包含 .iconfont 等基础样式）。若改用自己下载的阿里 iconfont，可在全局样式中额外声明 @font-face，例如：

@font-face {
  font-family: "iconfont"; /* Project id 5145617 */
  src: url('/static/iconfont/iconfont.woff2?t=1774251161162') format('woff2'),
       url('/static/iconfont/iconfont.woff?t=1774251161162') format('woff'),
       url('/static/iconfont/iconfont.ttf?t=1774251161162') format('truetype');
}

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

3. App / H5：字体加载 uni.loadFontFace。小程序端对 /static 等路径限制多，包内已通过 libs/css/mp.scss 的 @font-face 引用 TTF，一般无需在 App.uvue 再调 loadFontFace。非小程序请在 App.uvue 的 onLaunch（或等价入口）中配合 #ifndef MP 调用，例如：

onLaunch(() => {
  // #ifndef MP
  uni.loadFontFace({
    family: 'iconfont',
    source: 'url("/static/iconfont/iconfont.ttf")',
    success: () => {
      console.log('图标字体加载成功')
    },
    fail: (err) => {
      console.log('图标字体加载失败', err)
    }
  })
  // #endif
})

4. 完整图标映射表见本仓库 docs/mms-unix/mms-icon-font/iconfont.css（或 iconfont.json）。与安装顺序、main.uts 等配套的完整约定以 uni_modules/m-unix/readme.md「图标字体（m-icon / iconfont）」为准。

已下载的图标清单（部分示例）

Class 名称	Unicode
icon-add	\e665
icon-arrow-down	\e66a
icon-arrow-right	\e66c
icon-arrow-left	\e66f
icon-ashbin (删除)	\e66b
icon-close	\e679
icon-calendar	\e67b
icon-camera	\e675
icon-delete	\e683
icon-download	\e68d
icon-edit	\e693
icon-home	\e6a2
icon-search	\e6ca
icon-setting	\e6d4
icon-success	\e6d1
icon-user	\e6e0
icon-upload	\e6e1
icon-warning	\e6e4

完整列表请查看 font_5145617_po0co0ipc2/iconfont.css 文件。

确保你的 css 类名规则是 .iconfont.icon-name，m-icon 组件会自动拼出正确的类名。