微信小程序使用阿里巴巴矢量图
2021/5/5 20:28:41
本文主要是介绍微信小程序使用阿里巴巴矢量图,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、symbol
1.搭建环境(在项目根目录打开cmd窗口)
npm init -y
这时根目录会多出一个package.json文件
2.mini-program-iconfont-cli(PS:一种适合小程序的多色解决方案)
npm install mini-program-iconfont-cli --save-dev
提示有个高危漏洞,不管它,要管它的话可以执行npm audit fix或npm audit
这时会生成node_modules的文件夹
3.生成配置文件
npx iconfont init
这时根目录会多出一个iconfont.json文件
4.生成iconfont文件夹
npx iconfont-wechat
这时会多出一个 iconfont文件夹,这个是为小程序生成的组件
5.打开iconfont.json配置文件,修改symbol_url的值
复制//at.alicdn.com/t/font_1872838_n9eme2nws4k.js的值放到下面的图位置
6.组件在全局引用
"usingComponents": { "iconfont": "./iconfont/iconfont" }
7.终于可以开始用了(name的值是要去掉icon的)
二、unicode(没有彩色的,就算有彩色的也会变灰色)
1.下载代码,解压
2.直接复制iconfont.css的代码到xxx.wxss
3.在页面引入(在全局引入会比较好,我这里使用单个页面引入)
<view class="iconfont icon-weixin"></view>
原本是彩色的,出来就变成黑色的了
这篇关于微信小程序使用阿里巴巴矢量图的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南
- 2024-08-21微信小程序入门:轻松打造你的第一款小程序