介绍
适用于各平台的小程序的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
参数 | 说明 | 类型 |
---|---|---|
name | 图标名称 | string |
src | 图片地址 | string |
dot | 是否显示图标右上角小红点 | boolean |
dotBg | 圆点颜色,或者文字提示背景色 | string |
info | 图标右上角文字提示 | string/number |
color | 图标颜色 | string |
size | 图标大小,如 20px,20rpx,默认单位为rpx | string |
loading | 是否使用加载属性 | boolean |
Event
事件名 | 说明 | 参数 |
---|---|---|
bind:click | 点击图标时触发 | - |
其他
如何使用其他iconfont图标,可用找到miniprogram_npm
目录下的miniprogram_icon
目录找到icon/iconfont.wxss
,替换即可。注意index.wxss
里的@import
路径是否正确。
如何更优雅的使用IconFont你应该知道 | 微信开放社区
https://developers.weixin.qq.com/community/develop/article/doc/0000c2b41c01901a61d86cd2156813
用iconfont有几年了,我一直用这个方法的。
楼主这个文章说的方法,看起来方便,感觉还不如原始的方便?不过这个方法提供了一种思路,不错。感谢分享。赞一个。
不错,顶,回来实践一下。