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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

设计模式-资源库模式

设计模式专栏 模式介绍模式特点应用场景资源库模式与关系型数据库的区别代码示例Java实现资源库模式Python实现资源库模式 资源库模式在spring中的应用 模式介绍 资源库模式是一种架构模式,介于领域层与数据映射层(数据访问层)之间。它的存在…

JVM工作原理与实战(二十一):内存管理

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、不同语言的内存管理 1.C/C的内存管理 2.Java的内存管理 二、垃圾回收的对比 1.自动垃圾回收与手动垃圾回收的对比 2.优点与缺点 总结 前言 JVM作为Java程序的运行环境&#…

Vue2:全局事件总线

一、场景描述 之前我们学习了,通过props实现父子组件之间的通信。通过自定义组件,实现了子给父传递数据。 那么,兄弟关系的组件,如何通信了?任意组件间如何通信了? 这个时候,就要学习全局事件总…

5G_射频测试_发射机测量(四)

6.2 Base station output power 用于测量载波发射功率的大小,功率越大小区半径越大但是杂散也会越大 载波功率(用频谱仪测)天线口功率(用功率计测)载波功率是以RBW为单位的filter测量的积分功率不同带宽的多载波测试时…

Spring-AOP入门案例

文章目录 Spring-AOP入门案例概念:通知(Advice)切入点(Pointcut )切面(Aspect) 目标对象(target)代理对象(Proxy)顾问(Advisor)连接点(JoinPoint) 简单需求:在接口执行前输出当前系统时间Demo原始未添加aop前1 项目包结构2 创建相…

在Java中调企微机器人发送消息到群里

目录 如何使用群机器人 消息类型及数据格式 文本类型 markdown类型 图片类型 图文类型 文件类型 模版卡片类型 文本通知模版卡片 图文展示模版卡片 消息发送频率限制 文件上传接口 Java 执行语句 String url "webhook的Url"; String result HttpReque…

pxe高效批量网络装机 以及安装教程

系统装机的三种引导模式 1.pe 2光驱 3.网卡 打开本机桌面 可以看见背景图片 查看配置文件内容 文件时引导选项的功能 pxe原理: 先根据dhcp找到IP地址、和引导程序的地址,还提供客户机tftp地址,因为tftp是小文件,容量小&#…

如何用H5+CSS+JS写一个简单的招聘网站

大家好,我是猿码叔叔,一个 Java 语言开发者。应网友要求,写一个简单的招聘页面。由于技术原因,页面相对简单,朋友们可以选择性的阅读,如果对您有帮助,也可直接拿去使用,因为接下来除…

[足式机器人]Part2 Dr. CAN学习笔记- 最优控制Optimal Control Ch07-2 动态规划 Dynamic Programming

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记 - 最优控制Optimal Control Ch07-2 动态规划 Dynamic Programming 1. 基本概念2. 代码详解3. 简单一维案例 1. 基本概念 Richoard Bell man 最优化理论: An optimal policy has the …

宏景-zp_options-get_org_tree-SQL注入漏洞-未公开Day漏洞复现

0x01阅读须知 技术文章仅供参考,此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等(包括但不限于)进行检测或维护参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的…

电脑分区是使用MRB还是GPT呢?看了这篇文章,心理就有底了

在Windows 10或Windows 11上设置一个新磁盘,系统会询问你是要使用MBR(主引导记录)还是GPT(GUID分区表)。今天,我们将解释GPT和MBR之间的区别,并帮助你为PC或Mac选择合适的。 GPT带来了许多优点…

linux下vsc的自动切换输入法解决方案

前言 个人使用的是Linux开发加上vsc编辑器,这两个东西一加中国开发者大致上就消失不见了,眼馋idea那个Smartinput很久了,赶上放假了,有空搞搞,如果后期有心情会做的通用点 安装 商店搜索SmartInputLinux安装 使用…

Spring Boot 3.2.2整合MyBatis-Plus 3.5.5依赖不兼容问题

问题演示 导依赖 当你启动项目就会 抛出该异常 java.lang.IllegalArgumentException: Invalid value type for attribute factoryBeanObjectType: java.lang.String 问题原因 mybatis-plus 中 mybatis 的整合包版本不够导致的 解决方案 排除掉mybatis-plus 中 mybatis 的整合…

【Vue3】3-3 : 组件之间是如何进行互相通信的

本书目录:点击进入 一、组件之间为什么要做通信 二、组件之间通信方式 2.1、父传子:由传递属性实现 stage 1:申明 (即定义) stage 2:注册 stage 3:使用 【示例】:父组件将 tit…

Swift抓取某网站律师内容并做排名筛选

有个很要好的朋友,今天找我说他的朋友欠他钱,因为工程上面的事情,所以一直没拿到款。想让我找个靠谱的律师帮他打官司,因为这个也不是我的强项,也没有这方面的经验。随即从律师网站爬取对应律师口碑以及成功案例&#…

记录一下uniapp 集成腾讯im特别卡(未解决)

uniapp的项目运行在微信小程序 , 安卓 , ios手机三端 , 之前这个项目集成过im,不过版本太老了,0.x的版本, 现在需要添加客服功能,所以就升级了 由于是二开 , 也为了方便 , 沿用之前的webview嵌套腾讯IM的方案 , 选用uniapp集成ui ,升级之后所有安卓用户反馈点击进去特别卡,几…

数据结构代码实现 —— 单链表【Java】

单链表的概述及性质等在篇不做赘述,有需要可移步以下文章: 《数据结构 C语言版 严蔚敏 第2版》:线性表https://blog.csdn.net/weixin_43551213/article/details/134048025 以下仅展示使用 Java 实现单链表 结点结构定义: publ…

中科院罗小舟团队提出 UniKP 框架,大模型 + 机器学习高精度预测酶动力学参数

作者:李宝珠 编辑:三羊 中国科学院深圳先进技术研究院罗小舟团队提出了,基于酶动力学参数预测框架 (UniKP),实现多种不同的酶动力学参数的预测。 众所周知,生物体内的新陈代谢是通过各种各样的化学反应来实现的。这…

USB转SPI USB转IIC 串口转SPI串口转IIC SPI I2C模块

一款支持USB转SPI、USB转I2C、USB转GPIO、USB转PWM、USB转ADC的模块。提供上位机工具,开发协议。 资料下载,链接:https://pan.baidu.com/s/1sw3RCMwjhrMO4qzUBq9bjA 提取码:qzjp 概述 串口转多协议模组为了客户调试一些功能…

Linux搭建主从DNS服务器

DNS简介: DNS(Domain Name System)是互联网上的一项服务,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网。 DNS产生的原因: 互联网的不同计算机之间通信是通过IP地址来进行…