继上次写完《9012年了你还在用单色图标?(iconfont多色图标详解)》以后,有一些小伙伴又问了我是否能在微信小程序中使用多色图标呢?css
em....html
查阅了一些资料,发现小程序自己是不支持svg
的.这样就否认了我想直接使用svg
引入多色图标的想法.git
网上大多都只有对单色iconfont
字体引入的介绍,这里贴上一篇我本身对小程序中引用多色图标的方案.要是您又更好的解决方案请在评论处留言一块儿学习一下😊,谢谢.github
方案的主角就是这名 mini-program-iconfont-cli 开源库.其实你只要知道有这么个东西而后按照里面的README.md
一步一步就能够实现效果了.web
在终端打开你的项目根目录,而后使用npm
或者yarn
进行安装.npm
npm install mini-program-iconfont-cli --save-dev
复制代码
yarn add mini-program-iconfont-cli --dev
复制代码
继续使用命令生成配置文件:json
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
属性作下解释:bash
若是你的图标有通用的前缀,而你在使用的时候又不想重复去写,那么能够经过这种配置这个选项把前缀统一去掉。
好比我项目中全部的图标的类名都是以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>
复制代码
svg
,可是咱们能够经过
css
,设置背景图片的方式来设置。所以
mini-program-iconfont-cli
的做用应该是将
svg
转化为
Base64
格式。而后生成一个个能够在小程序中使用的组件.
同时咱们打开iconfont
文件夹下的iconfont.wxml
文件,也能够发现里面就是生成了一个个view
标签而后设置上背景图片.
这里贴上一个将svg
转换为Base64
的网址:
我这里使用的方案可能也不是最合理的,但愿能起到抛砖引玉的做用.另外看了一下,我添加了2个多色,一个单色的图标,生成的iconfont
文件夹就有16KB
了,还算是比较大的.另外我把iconfont
官网上的图标下载到本地比较了一下大小:
参考文章:
知识无价,支持原创.