微信小程序引入阿里矢量图标库
时间: 2023-09-22 12:07:02 浏览: 477
微信小程序里引入SVG矢量图标的方法
要在微信小程序中引入阿里矢量图标库,需要进行以下步骤:
1. 登录阿里矢量图标库(iconfont)官网,搜索需要的图标。
2. 选中需要的图标并加入购物车,然后点击购物车图标,进入购物车页面。
3. 在购物车页面中选择需要下载的图标库类型,如SVG,然后点击“下载代码”,在弹出的框中选择“下载到本地”。
4. 下载完成后,解压文件,将其中的iconfont.css和iconfont.js文件拷贝到小程序的根目录下。
5. 在小程序页面的json配置文件中引入iconfont.css文件,如下所示:
```
{
"usingComponents": {
"icon": "/iconfont/iconfont"
},
"style": "iconfont.css"
}
```
6. 在需要使用图标的页面中,使用icon组件,并设置iconfont的class和type属性,如下所示:
```
<icon class="iconfont" type="icon-xxx"></icon>
```
其中,type属性值为下载的iconfont.css文件中对应图标的类名。
7. 完成上述步骤后,保存并运行小程序即可使用阿里矢量图标库中的图标。
阅读全文