微信小程序使用阿里巴巴矢量图

摘要:
1、 符号1。设置环境(打开项目根目录中的cmd窗口)npminit-y此时,package.json文件将添加到根目录中。2.迷你程序iconfont cli(PS:适用于小程序的多色解决方案)npminstall迷你程序iconfontcli--save dev提示存在高风险漏洞。不管怎样,如果您想管理它,此时可以执行npmaditfix或npmadit

一、symbol

1.搭建环境(在项目根目录打开cmd窗口)

 npm init -y

微信小程序使用阿里巴巴矢量图第1张

这时根目录会多出一个package.json文件

2.mini-program-iconfont-cli(PS:一种适合小程序的多色解决方案)

npm install mini-program-iconfont-cli --save-dev

微信小程序使用阿里巴巴矢量图第2张

 提示有个高危漏洞,不管它,要管它的话可以执行npm audit fix或npm audit

这时会生成node_modules的文件夹

3.生成配置文件

npx iconfont init

微信小程序使用阿里巴巴矢量图第3张

这时根目录会多出一个iconfont.json文件

4.生成iconfont文件夹

npx iconfont-wechat

微信小程序使用阿里巴巴矢量图第4张

 这时会多出一个 iconfont文件夹,这个是为小程序生成的组件

5.打开iconfont.json配置文件,修改symbol_url的值

微信小程序使用阿里巴巴矢量图第5张

 复制//at.alicdn.com/t/font_1872838_n9eme2nws4k.js的值放到下面的图位置

微信小程序使用阿里巴巴矢量图第6张

 6.组件在全局引用

微信小程序使用阿里巴巴矢量图第7张

"usingComponents": { "iconfont": "./iconfont/iconfont" }

7.终于可以开始用了(name的值是要去掉icon的)

微信小程序使用阿里巴巴矢量图第8张

 二、unicode(没有彩色的,就算有彩色的也会变灰色)

1.下载代码,解压

微信小程序使用阿里巴巴矢量图第9张

2.直接复制iconfont.css的代码到xxx.wxss

微信小程序使用阿里巴巴矢量图第10张

 3.在页面引入(在全局引入会比较好,我这里使用单个页面引入)

微信小程序使用阿里巴巴矢量图第11张

<view class="iconfont icon-weixin"></view>

原本是彩色的,出来就变成黑色的了

微信小程序使用阿里巴巴矢量图第12张

微信小程序使用阿里巴巴矢量图第13张

免责声明:文章转载自《微信小程序使用阿里巴巴矢量图》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Activity快速入门理解Selenium系列之--04 不同浏览器获取Xpath的方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

分享一个自用小功能--微信小程序二维码签到

签到打卡小程序简介 微信小程序“欢聚乐乐到”----为用户提供了一个全新的签到打卡服务模式,适用于培训、会议、旅游等活动现场签到,让我们可以轻松的进行签到打卡,摆脱繁琐的过程和长时间的等候,最快捷方便的操作进行签到打卡。 小程序特色内容: 为活动发起人提供创建、管理、组织签到打卡活动的工具,可以生成二维码便于现场扫码打卡签到,同时能让用户签到,打卡变得十...

微信小程序前端与myeclipse的数据交换过程(SSH)

这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具。当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后台获取数据和从前端读取数据存放到数据库的两个过程, 大家可以参考、学习一下,看代码: 首先,在微信小程序的界面中,先设两个按钮:如下图所示: 代码如下: &...

mac 小程序 helloworld

了解小程序的框架 简易版的三个页面就可以跑起来程序  pages 文件夹 index 文件夹              index.js文件        -------->配置页面入口,功能:注册一个页面                                                                      ...

(七)WebGIS中栅格、矢量图层设计之栅格、矢量图层的本质

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。 1.何为栅格数据,何为矢量数据? 在GIS中,对于数据格式的分类,我们一般会将其分为栅格数据和矢量数据两种类型。栅格数据是将空间看做离散的像元,由二维数组或者其他数据组织方式来进行表达。矢量数据恰恰相反,它将空间看成是连续的,用...

微信小程序官方示例 官方weui-wxss下载于安装 详解

1.小程序示例源码:https://github.com/wechat-miniprogram/miniprogram-demo 2.微信 weui下载地址:https://github.com/weui/weui-wxss/ weui用微信开发者工具打开步骤。 新先小程序,目录选择dist。appid可以选择测试 对WEUI css详解...

记录uniapp的APP端分享到微信好友,链接为小程序页面,分享失败的BUG

记录uni-app的APP端分享到微信好友,链接为小程序页面,分享失败的BUG 分享到微信好友,链接为小程序端报错 16:59:19.617 fail:{"errMsg":"share:fail [Share微信分享:-6]send, http://ask.dcloud.net.cn/article/287","errCode":-100,"code":-...