微信小程序使用symbol方式使用阿里图标库

阿里图标库有三种使用方式,但前面两种都不成功,所以试试第三种。

1.在项目的根目录中打开终端比如我的:

微信小程序使用symbol方式使用阿里图标库

执行命令 npm init -y然后去看看项目多了什么 肯定会多个package.json文件

然后执行npm install mini-program-iconfont-cli --save-dev 会多出一个node_modules

然后执行npx iconfont init出现如下图

微信小程序使用symbol方式使用阿里图标库

看上图这些命令懂意思没,所以试试npx iconfont-init 会出现iconfont.json文件

微信小程序使用symbol方式使用阿里图标库

如果项目里没有iconfont.json文件 你就执行npx iconfont-wechat会报错

微信小程序使用symbol方式使用阿里图标库

所以你看看上图的usage的那张图的那些命令,不就是告诉你先要初始化一个iconfont.json文件吗

有了iconfont.json文件然后才能执行npx iconfont-wechat执行了这命令后会多出一个iconfont的文件夹

微信小程序使用symbol方式使用阿里图标库

打开iconfont.json文件配置symbol_url的路径,这路径就是

微信小程序使用symbol方式使用阿里图标库

然后到app.json中使用

微信小程序使用symbol方式使用阿里图标库

然后就是测试了。亲测

微信小程序使用symbol方式使用阿里图标库

微信小程序使用symbol方式使用阿里图标库

微信小程序使用symbol方式使用阿里图标库

以后就用这种方式了。这也是官网推荐的方式但是官方写的太简单了,按照官网的步骤没试出来。

 

微信小程序使用symbol方式使用阿里图标库

上一篇:微信小程序json对象与json字符串相互转换


下一篇:微信带场景参数的二维码生成与使用