微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用

安装iconfont-tools

npm i -g iconfont-tools

全局安装工具

下载iconfont并使用工具

  • 在下载iconfont下
# 下载的iconfont.js目标文件下, 一直回车即可
iconfont-tools

生成iconfont-wapp文件
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cET7eQsc-1633339111405)(/微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用2.png)]

一直回车, 默认是t-icon前缀

  • 非sass小程序用.wxss即可,sass小程序和uniapp可以用.css

添加到项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7BvPx7wS-1633339111407)(/微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用3.png)]

  • 效果
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6bmTxeJ2-1633339111410)(/微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用4.png)]
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐