准备工作
1、小程序开启使用npm模块;
2、小程序项目根目录不要有iconfont目录,否则会清空里面所有内容;
3、有nodejs环境;
第一步
在小程序项目根目录,使用npm安装mini-program-iconfont-cli插件;
// 1.Yarn方式
yarn add mini-program-iconfont-cli --dev
// 2.Npm方式
npm install mini-program-iconfont-cli --save-dev
第二步
生成json配置文件
npx iconfont-init
这个时候项目根目录会生成一个iconfont.json文件
{
"symbol_url": "//at.alicdn.com/t/xxxxxxxxxxxx.js",
"save_dir": "./iconfont",
"use_rpx": true,
"trim_icon_prefix": "icon-",
"default_icon_size": 24
}
其中symbol_url --- 复制iconfont官网你的项目的Symbol链接
symbol_url:
官网提供的项目链接。请务必看清是.js后缀而不是.css后缀。
具体操作步骤: 在我的项目中 点击Symbol => 查看在线链接 => 点击复制代码 即可
save_dir:
根据iconfont图标生成的组件存放的位置。每次生成组件之前,该文件夹都会被清空。
use_rpx:
是否使用微信提供的尺寸单位rpx还是普通的像素单位px。默认值为false,即使用px
trim_icon_prefix:
如果你的图标有通用的前缀,而你在使用的时候又不想重复去写,那么可以通过这种配置这个选项把前缀统一去掉。例如图标名是icon-wangzhan,按以上设置iconfont中的属性name则写成:name="wangzhan"。
default_icon_size:
我们将为每个生成的图标组件加入默认的字体大小,当然,你也可以通过传入props的方式改变这个size值。
第三步
生成小程序组件,注意此操作会清空并替换已有的iconfont目录,因此注意备份数据(没有此目录可忽略)
npx iconfont-wechat
第四步
注册iconfont组件并使用
可以在app.json文件中引入全局图标组件,避免每个page都去引入,这样就麻烦。
// 绝对路径
{
"usingComponents": {
"iconfont": "/iconfont/iconfont"
}
}
第五步
在wxml中的使用方法:
color:颜色,默认是字符串,当isStr设置为false时可传数组;
size:大小,默认单位为px,当iconfont.json中的use_rpx为true时单位为rpx;
isStr:color传值格式是否为字符串,默认true;
/*图片单色值*/
<iconfont name="iconwangzhan" color="#999" size="54" isStr="false"></iconfont><iconfont name="iconwangzhan" color="#999" size="54" isStr="false"></iconfont>
/*彩色图多色值*/
<iconfont name="iconwangzhan" color="{{['#FF4A38','#ffffff']}}" isStr="false"
size="54" isStr="false"></iconfont>
<iconfont name="iconwangzhan" color="#999" size="54" isStr="false"></iconfont>
更新iconfont图标操作
每次更新图片会生成新的js,因此你需要在json替换掉这个新的js地址,然后执行:
npx iconfont-wechat