评论

IconFont的高阶用法,提高开发效率。

将IconFont扩展成自定义组件,方便调用提升开发效率。

介绍

适用于各平台的小程序的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路径是否正确。

最后一次编辑于  2020-07-26  
点赞 2
收藏
评论

2 个评论

  • Admin ²º²⁴
    Admin ²º²⁴
    2020-08-02

    如何更优雅的使用IconFont你应该知道 | 微信开放社区

    https://developers.weixin.qq.com/community/develop/article/doc/0000c2b41c01901a61d86cd2156813

    用iconfont有几年了,我一直用这个方法的。

    楼主这个文章说的方法,看起来方便,感觉还不如原始的方便?不过这个方法提供了一种思路,不错。感谢分享。赞一个。

    2020-08-02
    赞同
    回复
  • 微盟
    微盟
    2020-07-26

    不错,顶,回来实践一下。

    2020-07-26
    赞同
    回复 1
    • 鲤子
      鲤子
      2020-07-28
      今天还接到你们公司的电话了,什么鬼。
      2020-07-28
      回复
登录 后发表内容