介绍

适用于各平台的小程序的icon自定义组件，结合iconfont使用，更加方便易扩展。关于iconfont的使用方法参考前面的文章《如何更优雅的使用IconFont你应该知道》

安装

通过npm安装

需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下

npm install miniprogram_icon

构建npm包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

使用

引入组件

只需要在app.json或index.json中配置 Icon 对应的路径即可。如果你是通过下载源代码的方式使用 miniprogram_icon，请将路径修改为项目中 miniprogram_icon 所在的目录。

// 全局引入
// app.json
"usingComponents": {
  "l-icon": "miniprogram_icon/icon/index"
}
// 单页面引入
// index.json
"usingComponents": {
  "l-icon": "miniprogram_icon/icon/index"
}

使用组件

引入组件后，可以在 wxml 中直接使用组件

<l-icon name="icon-zuanshi_o"></l-icon>

代码演示

这里有一份微信小程序的代码片段，下载开发工具打开即可预览，打开代码片段

基础用法

Icon的name属性传入图标名称

// 线性图标
<l-icon name="icon-sousuo_o" />
// 加粗图标
<l-icon name="icon-sousuo" />

图片代替

Icon的src属性传入图片地址

// 线性图标
<l-icon src="/assets/icons/shouye_o.svg" />
// 加粗图标
<l-icon src="/assets/icons/shouye.svg" />

徽标提示

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

// 圆点
<l-icon name="icon-tongzhizhongxin_o"
        dot />
// 数字
<l-icon name="icon-tongzhizhongxin_o"
        info="1" />
// 自定义数字
<l-icon name="icon-tongzhizhongxin_o"
        info="99" />
// 超长数字
<l-icon name="icon-tongzhizhongxin_o"
        info="99+" />

图标颜色

设置color属性来控制图标颜色，设置dot-bg属性来控制圆点颜色

// 自定义颜色
<l-icon name="icon-zuanshi_o"
        color="blue" />
// 16进制颜色
<l-icon name="icon-zuanshi_o"
        color="#20bf64" />
// 圆点颜色
<l-icon name="icon-xiaoxi_o"
        color="#db524a"
        dot
        dot-bg="#fba929" />
// 数字背景色
<l-icon name="icon-xiaoxi_o"
        info="123"
        dot-bg="#fba929" />

图标大小

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

// 支持像素单位px/rpx/em
<l-icon name="icon-yinliang_o"
        size="40rpx" />
<l-icon name="icon-yinliang_o"
        size="50rpx" />
<l-icon name="icon-yinliang_o"
        size="60rpx" />
<l-icon name="icon-yinliang_o"
        size="70rpx" />

加载图标

Icon的loading属性可旋转图标

// 好像iconfont的图标有点问题，旋转的时候有点晃动，可用图片来代替
<l-icon name="icon-jiazai_dan_o"
        loading />
<l-icon name="icon-jiazai_shuang_o"
        loading />

API

Props

Event

其他

如何使用其他iconfont图标，可用找到miniprogram_npm目录下的miniprogram_icon目录找到icon/iconfont.wxss，替换即可。注意index.wxss里的@import路径是否正确。