uniapp小程序使用symbol格式图标（阿里图标库）

参考这个博主小程序的写法https://blog.csdn.net/qq_42001842/article/details/103959394，
总结uniapp的写法如下，做个记录：

一、安装mini-program-iconfont-cli
npm install mini-program-iconfont-cli

然后运行npx iconfont-init

之后项目根目录会生成一个iconfont.json文件；
内部参数说明
symbol_url：’//at.alicdn.com/t/c/font_1152748_3z7l7amspal.js‘，//图标库地址
trim_icon_prefix： ’icon‘，//前缀，根据项目约定填写，可以为空

二、修改symbol_url
从阿里图标库symbol格式下复制//at.alicdn.com/t/c/font_1152748_3z7l7amspal.js，也可以下载到本地

三.生成小程序组件
先执行npx iconfont-wechat，生成iconfont目录后，将iconfont目录放入根目录wxcomponents下，如果是更新，将iconfont目录替换
如图：

四.pages.json设置
全局：
“globalStyle”:{“mp-weixin”: {“usingComponents”: {“iconfont”: “/wxcomponents/iconfont/iconfont”}}}
单页面：
“pages”: [{“path”: “pages/index/index”,“style”: {“mp-weixin”: {“usingComponents”: {“iconfont”: “/wxcomponents/iconfont/iconfont”}}}}]

五.页面使用
size可修改为需要的大小
如图：

六.图标更新
图标更新时3、4重复操作一遍

uniapp小程序使用symbol格式图标（阿里图标库）相关推荐

uni-app更新某个组件版本；uni-app更新插件版本；uni-app更新uni_modules插件；uni-app小程序更新某一个组件的版本库
uni-app官方介绍的更新某一个组件的uni_modules方法注意:本篇只是记录更新uni-app的组件库下某一个组件的版本.不是更新微信小程序版本. 场景原因:项目最初是去年开发的,当时下载了 ...
uniapp小程序如何通过虚拟列表配合节流，完成上拉刷新下拉加载，避免页面卡顿，提升性能呢？
本文将介绍uniapp小程序中如何使用虚拟列表和节流两种技术实现上拉刷新下拉加载功能,同时避免因渲染大量数据导致的页面卡顿问题. 一.虚拟列表在uniapp小程序开发中,当我们需要渲染大量列表数据时 ...
uni-app小程序阿里巴巴字体图标兼容ios
问题描述提示:uni-app 小程序阿里巴巴字体图标库不兼容 <icon class="iconfont icon-xuanze"></icon> 解决 ...
前端上传图片到阿里云（pc端和uniapp小程序）
1.pc端直接传文件官方文档JavaScript客户端签名直传如果前端是原生的html写的话,就去官网下载示例来看,把文件里面的配置修改成子阿里云的配置就好 ![在这里插入图片描述](https: ...
uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式
文章目录 uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式一.手写板 1.H5代码 2.JS代码总结 uniapp 小程序 APP 实现手写板签名画图 can ...
uniapp小程序底部tabbar图标大小设置
小程序底部tabbar图标大小设置在uniapp中小程序的tabbar没有设置图标大小的属性,导致小程序在不同平台打开时图标大小显示的不一样,特别是在电脑微信打开小程序时,底部的图标就会特别大,使得 ...
uni-app 小程序开发项目搭建
前言官网(搭建指南):https://uniapp.dcloud.io/quickstart-cli 在上手开发小程序之前,先去uni-app官网浏览下,熟悉下官网.然后重点来了,阅读大佬的文章,可 ...
uni-app 小程序使用腾讯地图完成搜索功能
前言使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下. 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用. 由于 ...
uniapp ----小程序上下滑动页面，视频自动播放（完整代码）
uniapp ----小程序上下滑动页面,视频自动播放(完整代码) <template><view class="box"><f-navbar tit ...

uniapp小程序使用symbol格式图标（阿里图标库）

uniapp小程序使用symbol格式图标（阿里图标库）相关推荐

最新文章

热门文章