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

2024-05-15 19:53:20

近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理。
但是压缩处理之后效果也没有很显著，而且再次进行压缩还需要收费。
最近研究了阿里巴巴矢量图标库的symbol使用方法。

把图标都放进一个项目点击symbol生成地址

优势

支持多色图标了，不再受单色限制。
标签自带size属性，也可以通过css调整样式（使用过程中，在电脑上打开微信小程序，样式会有偏）。不过不影响手机端使用。

使用步骤

1.到你的根目录，鼠标右键，打开终端，输入 npm init -y（会多一个package.json文件）
2.输入npm install mini-program-iconfont-cli --save-dev（会多一个node_modules，不会被上传）
3.输入npx iconfont init 会出现help提示
4.输入npx iconfont-wechat（会多一个iconfont.json）

5.配置iconfont.json文件，路径就是一开始项目选择的symbol的路径（以下报错代表路径错误，每次更新项目icon都需要重新获取路径）

5.页面使用

page里的json文件引用组件

wxml文件里使用组件

icon名字在iconfont文件夹里有写，阿里图标库项目组里的icon编辑里面也有显示和修改功能

实际大小，还是比之前小了很多！！！

微信小程序之阿里图标库icon的symbol使用方式相关推荐

微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序使用font-awesome图标库
微信小程序使用font-awesome图标库网上看到的方法,亲测成功:参考方法下载font-awesome字体包打开Transfonter网站,上传字体fontawesome-webfont.t ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
支付宝小程序使用阿里图标库
第一步:先下载阿里图标库字体第二部:https://transfonter.org/进入这个网址把iconfont.ttf文件转成base64 encode格式的编码文件,转后有三个文件只用其中两个 ...
微信小程序使用阿里图标
方法一:使用本地文件 1 下载阿里图标到本地 http://iconfont.cn/ 2.转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参数, ...
微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
微信小程序如何添加新的icon图标
微信小程序如何添加新的icon图标第一步先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个压缩包,解压压缩包里面有一个css的文件 ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...

最新文章

热门文章