让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 FamilyfontSize: '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实现多色图标的展示,因此需要注意在使用时,需要时块级或者行内块的标签;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/418882.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Siemens-NXUG二次开发-导入与导出(可移除参数)prt文件[Python UF][20240121]

Siemens-NXUG二次开发-导入与导出(可移除参数)prt文件[Python UF][20240121] 1.python uf函数1.1 NXOpen.UF.Part.Import1.2 NXOpen.UF.Part.ImportPartModes1.3 NXOpen.UF.Group.AskGroupData1.4 NXOpen.UF.Obj.AskTypeAndSubtype1.5 NXOpen.UF.Part.Ex…

mariadb数据库从入门到精通

mariadb数据库的安装以及安全初始化 mariadb数据库的安装以及安全初始化 mariadb数据库的安装以及安全初始化一、实验前提二、mariadb数据库的安装三、mariadb数据库安全初始化3.1 设定数据库基本的安全初始化3.2关闭对外开放端口 系列文章目录一、查看数据库二、进入库并且查看…

竞赛保研 机器视觉人体跌倒检测系统 - opencv python

0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 机器视觉人体跌倒检测系统 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数&…

Flutter 与 Android原生 相互通信:BasicMessageChannel、MethodChannel、EventChannel

前言 本文主要讲解,使用不同的 Channel 让 Flutter 和 Android原生 进行通信,由于只是讲解两端通信,所以可视化效果不好; 不过我写了一篇专门讲解 Flutter 嵌入 Android原生View的文章 Flutter 页面嵌入 Android原生 View-CSDN…

第二课:BERT

文章目录 第二课:BERT1、学习总结:为什么要学习BERT?预训练模型的发展历程BERT结构BERT 输入BERT EmbeddingBERT 模型构建BERT self-attention 层BERT self-attention 输出层BERT feed-forward 层BERT 最后的Add&NormBERT EncoderBERT 输…

BlueBunny:基于低功耗蓝牙的Bash bunny命令控制C2框架

关于BlueBunny BlueBunny是一款功能强大的命令控制框架,该工具基于低功耗蓝牙实现数据通信,可以帮助广大研究人员直接通过蓝牙将控制指令发送给Bash Bunny。 什么是Bash Bunny Bash Bunny是一款类似于USB Rubber Ducky的多功能USB攻击工具(…

Mysql 编译安装部署

Mysql 编译安装部署 环境: 172.20.26.198(Centos7.6) 源码安装Mysql-5.7 大概步骤如下: 1、上传mysql-5.7.28.tar.gz 、boost_1_59_0.tar 到/usr/src 目录下 2、安装依赖 3、cmake 4、make && make install 5、…

MyBatis 系列:MyBatis 源码环境搭建

文章目录 一、环境准备二、下载 MyBatis 源码和 MyBatis-Parent 源码三、创建空项目、导入项目四、编译 mybatis-parent五、编译 mybatis六、测试总结 一、环境准备 jdk:17 maven:3.9.5 二、下载 MyBatis 源码和 MyBatis-Parent 源码 Mybatis&#x…

外呼机器人有什么优势?

外呼机器人有什么优势?值得受到大多数电销企业的追捧! 1、电话外呼效率高: 每天可拨打的电话数量是人工的5-10倍,人工一天只能拨打200-300通电话,机器人每天能打3000通电话以上,无须休息,按照…

数学建模实战Matlab绘图

二维曲线、散点图 绘图命令:plot(x,y,’line specifiers’,’PropertyName’,PropertyValue) 例子:绘图表示年收入与年份的关系 ‘--r*’:--设置线型;r:设置颜色为红色;*节点型号 ‘linewidth’:设置线宽&#xff1…

el-upload中的before-upload不生效

我们先来看看官方对before-upload的定义 before-upload是在上传文件时触发,不是添加文件时触发,添加文件时触发 on-change。 所以如果我们要在添加文件时,对文件的大小和后缀等等进行判断,可以用 on-change 方法来实现。 checkSu…

云原生场景下,AIGC 模型服务的工程挑战和应对

作者:徐之浩、车漾 “成本”、“性能”和 “效率”正在成为影响大模型生产和应用的三个核心因素,也是企业基础设施在面临生产、使用大模型时的全新挑战。AI 领域的快速发展不仅需要算法的突破,也需要工程的创新。 大模型推理对基础设施带来…