微信小程序之阿里图标库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提示

此时插件会在项目根目录下生成配置文件 iconfont.json，内容如下

{"symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接","save_dir": "./iconfont","use_rpx": false,"trim_icon_prefix": "icon","default_icon_size": 18
}

我们需要将 symbol_url 的值修改为图标官网给的 Symbol 链接；

4.生成图标，输入npx iconfont-wechat

执行完成后，在项目根目录会生成iconfont图标目录

图标的使用

1.在页面 app.json 文件中引用组件，注意 iconfont 组件路径；

2.在页面中使用

name为图标名称，参考iconfont.wxml中的图标name配置

微信小程序之阿里图标库icon的symbol引入无需下载支持彩色图标相关推荐

微信小程序如何添加新的icon图标
微信小程序如何添加新的icon图标第一步先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个压缩包,解压压缩包里面有一个css的文件 ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
【物联网】微信小程序接入阿里云物联网平台
微信小程序接入阿里云物联网平台一阿里云平台端 1.登录阿里云阿里云物联网平台点击进入公共实例,之前没有的点进去申请 2.点击产品->创建产品 3.产品名称自定义,按项目选择类型,节点类型 ...
微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
微信小程序之阿里图标库icon的symbol使用方式
近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理. 但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费. 最近研究了阿里巴巴矢量图标 ...
微信小程序使用阿里矢量图自定义icon
在微信小程序中使用icon 1.在阿里矢量图官网选好图标加入我的项目,在项目中点击Font class和查看在线链接, 2.然后会生成链接地址,点击进入 3.复制代码 4.在微信开发者工具中创建样式文 ...
微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...