前言

继上次写完《9012年了你还在用单色图标？(iconfont多色图标详解)》之后,有一些小伙伴又问了我是否能在微信小程序中使用多色图标呢?

em....

查阅了一些资料,发现小程序本身是不支持svg的.这样就否定了我想直接使用svg引入多色图标的想法.

网上大多都只有对单色iconfont字体引入的介绍,这里贴上一篇我自己对小程序中引用多色图标的方案.要是您又更好的解决方案请在评论处留言一起学习一下😊,谢谢.

mini-program-iconfont-cli

方案的主角就是这名 mini-program-iconfont-cli 开源库.其实你只要知道有这么个东西然后按照里面的README.md一步一步就可以实现效果了.

第一步

在终端打开你的项目根目录,然后使用npm或者yarn进行安装.

npm install mini-program-iconfont-cli --save-dev

yarn add mini-program-iconfont-cli --dev

第二步

继续使用命令生成配置文件:

npx iconfont init

(这里是npx,不是npm)

此时会发现项目目录生成了一个iconfont.json文件:

{
  "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
  "save_dir": "./iconfont", // 生成的组件保存的路径
  "use_rpx": false, // 是否使用微信提供的尺寸单位rpx还是普通的像素单位px
  "trim_icon_prefix": "icon-",
  "default_icon_size": 18 // 默认字体大小
}

这里的trim_icon_prefix属性做下解释:

如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。

比如我项目中所有的图标的类名都是以icon-开头,这样我在后面使用图标类名的时候就可以将icon-这段给省略.

第三步

打开你iconfont上的项目,并找到Symbol的外部链接:

将这个链接替换到iconfont.json的symbol_url下:

{
    "symbol_url": "//at.alicdn.com/t/font_872514_tfvlfiqme6.js",
    "save_dir": "./iconfont",
    "use_rpx": false,
    "trim_icon_prefix": "icon-",
    "default_icon_size": 18
}

第四步

使用命令生成小程序组件

npx iconfont

此时项目目录中会多出一个iconfont的文件夹,它里面存放的就是生成的图标组件.

第五步

既然上面生成的是组件的话,那么我们就可以将其当成小程序中其它的组件一样来使用:

局部引用
全局引用

全局引用,在app.json中加上配置:

"usingComponents": {
   "iconfont": "./iconfont/iconfont"
}

第六步

页面上使用起来也是非常简单,这里我就直接贴上了:

// 原色彩
<iconfont name="alipay" />

// 单色：红色
<iconfont name="alipay" color="red" />

// 多色：红色+橘色
<iconfont name="alipay" color="{{['red', 'orange']}}" size="300" />

我自己也新建了一个项目测试了一下是能实现效果的:

但是发现图标好像是block类型的,这样就照成了会换行的情况,于是我在全局的wxss中加上:

iconfont {
  display: inline-block;
}

好像可以了.

若是后面,你的项目需要更新图标的话,只需要重新配置一下iconfont.json中的symbol_url,然后执行:

npx iconfont

重新生成iconfont组件就可以了.

-----------华丽的分割线--------------

说到这里基本就可以在项目中使用多色的iconfont,后面的内容主要是对这种实现方式的扩展,感兴趣的小伙伴可以接着往下看.

因为我在前言中也提到了,小程序中暂时是不支持svg的,所以同样是一段代码,你将它放在.html中是可以正常显示成一个图标的,但是放在wxml中却没有效果:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
</svg>

虽然我们不能像在web中一样直接使用svg，但是我们可以通过css，设置背景图片的方式来设置。因此mini-program-iconfont-cli的作用应该是将svg转化为Base64格式。然后生成一个个可以在小程序中使用的组件.

同时我们打开iconfont文件夹下的iconfont.wxml文件,也可以发现里面就是生成了一个个view标签然后设置上背景图片.

这里贴上一个将svg转换为Base64的网址:

https://codepen.io/jakob-e/pen/doMoML

后语

我这里使用的方案可能也不是最合理的,希望能起到抛砖引玉的作用.另外看了一下,我添加了2个多色,一个单色的图标,生成的iconfont文件夹就有16KB了,还算是比较大的.另外我把iconfont官网上的图标下载到本地比较了一下大小:

参考文章:

mini-program-iconfont-cli

微信小程序开发之SVG的使用

知识无价，支持原创.