微信小程序使用阿里iconfont

安装npm
验证：npm -i

删除原始宽高

文件：node_modules/mini-program-iconfont-cli/libs/generateWechatComponent.js

27行，换成：

svgTemplates.push("<!--" + iconIdAfterTrim + "-->\n<view wx:if=\"{{name === '" + iconIdAfterTrim + "'}}\" style=\"background-image: url({{quot}}data:image/svg+xml, " + generateCase(item) + "{{quot}});" +' " class="icon" />');

设定原始宽高

文件：node_modules/mini-program-iconfont-cli/templates/wechat.wxss.template

.icon {background-repeat: no-repeat;width: var(--iconfont-width);height: var(--iconfont-height);background-size: 100% auto;
}

替换根目录下iconfont.json文件链接内容：

{"symbol_url": "https://at.alicdn.com/t/font_26mnvjep.js","save_dir": "./iconfont","use_rpx": false,"trim_icon_prefix": "","default_icon_size": 18
}

运行命令：npx iconfont-wechat

微信小程序使用阿里iconfont相关推荐

微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
【物联网】微信小程序接入阿里云物联网平台
微信小程序接入阿里云物联网平台一阿里云平台端 1.登录阿里云阿里云物联网平台点击进入公共实例,之前没有的点进去申请 2.点击产品->创建产品 3.产品名称自定义,按项目选择类型,节点类型 ...
在微信小程序中使用iconfont
微信小程序上使用iconfont的方法一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
微信小程序之阿里图标库icon的symbol使用方式
近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理. 但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费. 最近研究了阿里巴巴矢量图标 ...
微信小程序使用阿里矢量图自定义icon
在微信小程序中使用icon 1.在阿里矢量图官网选好图标加入我的项目,在项目中点击Font class和查看在线链接, 2.然后会生成链接地址,点击进入 3.复制代码 4.在微信开发者工具中创建样式文 ...

微信小程序使用阿里iconfont

微信小程序使用阿里iconfont相关推荐

最新文章

热门文章