让uniapp小程序支持多色图标icon:iconfont-tools-cli

前景:

uniapp开发小程序项目时,对于iconfont多色图标无法直接支持;若将多色icon下载引入项目则必须关注包体,若将图标放在oss或者哪里管理,加载又是一个问题,因此大多采用iconfont-tools工具,但是iconfont-tools使用需要下载iconfont-tools工程进行编译转换,过于繁琐,因此我在iconfont-tools工具的基础上进行了改造,yarn安装,配置,项目正常启动或打包直接执行编译。

基于iconfont-tools的改造工具:iconfont-tools-cli

安装
复制代码
yarn add iconfont-tools-cli
配置/使用

1、在项目根目录创建配置文件:config/iconfont.config.js

复制代码
module.exports = {
  iconfontUrl: '//at.alicdn.com/t/c/font_xxxxxx.js', // 矢量图标库Symbol地址
  dirName: 'iconfont', // 需要生成的css对应文件夹
  fileName: 'anterpm-symbol', // css文件名称
  icon: 'anterpm-symbol', // Font Family
  fontSize: '16px', // 默认大小
};

2、package.json中配置命令

复制代码
"update:iconfont": "node node_modules/iconfont-tools-cli/lib/cli.js --config config/iconfont.config.js --to $INIT_CWD/src/static/css",

命令中:

config/iconfont.config.js就是根目录下编译需要使用的配置文件

--to $INIT_CWD/src/static/css:就是需要生成到对应位置/文件夹

3、将编译/更新命令配置到项目启动或打包中去

4、项目启动/打包后,会看到生成的css文件,并将其引入App.vue文件中

注:iconfont-tools实现方式是通过background-image实现多色图标的展示,因此需要注意在使用时,需要时块级或者行内块的标签;

相关推荐
人工智能的苟富贵8 小时前
微信小程序直传阿里云 OSS 实践指南(V4 签名 · 秒传支持 · 高性能封装)
阿里云·微信小程序·小程序
时之彼岸Φ8 小时前
Fiddler+Yakit实现手机流量抓包和小程序抓包
智能手机·小程序·fiddler
艾小逗8 小时前
uniapp中检查版本,提示升级app,安卓下载apk,ios跳转应用商店
android·ios·uni-app·app升级
suncentwl10 小时前
为什么选择有版权的答题pk小程序
小程序·答题小程序·答题pk
小旋风0123411 小时前
uniapp自定义头部(兼容微信小程序(胶囊和状态栏),兼容h5)
微信小程序·uni-app·notepad++
耶啵奶膘12 小时前
uniapp+vue3表格样式
uni-app
GalenZhang88813 小时前
Java生成微信小程序码及小程序短链接
java·微信小程序·小程序
浮桥14 小时前
uniapp -- 实现微信小程序、app、H5端视频上传
微信小程序·uni-app·音视频
说私域16 小时前
从大众传媒到数字生态:开源AI智能名片链动2+1模式S2B2C商城小程序驱动的营销革命
人工智能·小程序·开源·零售
山河故人16320 小时前
基于 SSE 和分块传输的 Uniapp 微信小程序 实现 流式传输 对话
微信小程序·小程序·uni-app