当前位置: 首页 > Web前端 > HTML

uni-app使用阿里矢量库导入图标彩色黑白

时间:2023-03-28 15:50:52 HTML

阿里巴巴矢量图标库地址:https://www.iconfont.cn/第一步:输入你想要的图标,加入购物车步骤2:点击右上角的购物车第三步:点击添加到项目第四步:点击更新代码,然后点击下载到本地第五步:Windows+R,cmd打开dos窗口,执行命令npminstall-giconfont-tools,会生成一个iconfont-tools第六步:然后解压在阿里巴巴矢量库中下载的压缩包,取出里面的iconfont.js,放入iconfont-tools文件夹,step7:在DOS窗口执行命令iconfont-tools,然后一直按回车键,执行后会生成iconfont-weapp文件夹。第八步:取出iconfont-weapp的css,放到uniapp项目的common文件夹下第九步:在uniapp项目的App.vue中添加@importurl("common/iconfont.css");(黑白使用)@importurl("common/iconfont-weapp-icon.css");(颜色使用)如下图:第十步:引用颜色图标:打开common文件夹下的iconfont-weapp-icon.css,参考到引用黑白图标:打开common文件夹下的iconfont.css,参考三个原生小程序如下:清风工具小程序表情包小程序手机翻页时钟小程序微信公众号:清风