微信小程序中如何使用矢量库

  随着微信小程序的发展,越来越多的公司在微信小程序中开始进行一个好的应用。在这里作为一个菜鸟,向大家分享我的在微信小程序中时遇到的问题。

  在微信小程序的文档中并没有使用图标的文档,当然你还可以使用框架,这里向大家介绍如何使用阿里矢量库。

  首先,登陆阿里矢量图官网,选中你需要你矢量图加入购物车。

微信小程序中如何使用矢量库

然后下载选中的矢量图的代码(记住时下载代码)

微信小程序中如何使用矢量库

打开你下载的代码文档,你将会看到iconfont-css

微信小程序中如何使用矢量库

打开iconfont-css将会看到如下代码

微信小程序中如何使用矢量库

将iconfont-css中的代码在微信小程序中app.wxss中引用,还可以自定义图标的颜色,大小

微信小程序中如何使用矢量库

在.wxml中代码中class的名称直接换成iconfont icon-XXXX就可以使用了

微信小程序中如何使用矢量库

这是我自己做的一个小例子

微信小程序中如何使用矢量库

这样就可以了。*-*