前言
继上次写完《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官网上的图标下载到本地比较了一下大小:
参考文章:
知识无价，支持原创.
