让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.mzph.cn/news/637906.shtml

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

相关文章

【php】php去除excel导入时的空格

背景 PHPExcel_1.8.0导入excel,遇到trim无法处理的空格。 解决方案 $excelVal preg_replace(“/(\s| | |\xc2\xa0)/”, ‘’, $excelVal); 完整代码 thinkphp5代码 function readExcel($file) {require_once EXTEND_PATH . PHPExcel_1.8.0/Classes/PHPExcel.p…

靶场实战(18):OSCP备考之VulnHub MY CMSMS

打靶思路 资产发现 主机发现服务发现漏洞发现(获取权限) 80端口/HTTP服务 组件漏洞URL漏洞3306端口/MySQL服务 组件漏洞口令漏洞80端口/HTTP服务 URL漏洞URL漏洞提升权限 www-data用户 sudosuidcron内核提权信息收集armour用户 sudo 1、资产发现 1.1…

考研C语言刷编程题篇之分支循环结构基础篇(一)

目录 第一题 第二题 方法一:要循环两次,一次求阶乘,一次求和。 注意:在求和时,如果不将sum每次求和的初始值置为1,那么求和就会重复。 方法二: 第三题 方法一:用数组遍历的思想…

【大数据处理技术实践】期末考查题目:集群搭建、合并文件与数据统计可视化

集群搭建、合并文件与数据统计可视化 实验目的任务一:任务二: 实验平台实验内容及步骤任务一:搭建具有3个DataNode节点的HDFS集群集群环境配置克隆的方式创建 Slave 节点修改主机名编辑 hosts 文件生成密钥免认证登录修改 hadoop 的配置文件编…

Java并发编程: 并发编程中的ExecutionException异常

一、什么是ExecutionException 在并发编程中在执行java.util.concurrent.Future实现类的get方法时,需要捕获java.util.concurrent.ExecutionException这个异常。Future.get()方法通常是要获取任务的执行结果,当执行任务的过程中抛出了异常,就…

ThinkPad T14/T15/P14s/P15s gen2电脑原厂Win10系统镜像 恢复笔记本出厂时预装自带OEM系统

lenovo联想原装出厂Windows10系统,适用型号: ThinkPad T14 Gen 2,ThinPad T15 Gen 2,ThinkPad P14s Gen 2,ThinkPad P15s Gen 2 (20W1,20W5,20VY,20W7,20W0,20W4,20VX,20W6) 链接&#xff1…

Redis在Windows10中安装和配置

1.首先去下载Redis 这里不给出下载地址,自己可以用去搜索一下地址 下载 下载完成后解压到D盘redis下,本人用的是3.2.100 D:\Redis\Redis-x64-3.2.100 2.解压完成后需要设置环境变量,这里新建一个系统环境变量中path 中添加一个文件所…

WCP知识分享平台的容器化部署

1. 什么是WCP? WCP是一个知识管理、分享平台,支持针对文档(包括pdf,word,excel等)进行实时解析、索引、查询。 通过WCP知识分享平台进行知识信息的收集、维护、分享。 通过知识创建、知识更新、知识检索、知识分享、知识评价、知识统计等功能进行知识生命周期管理。 wcp官…

第04章_IDEA的安装与使用(上)(认识,卸载与安装,JDK相关设置,详细设置,工程与模块管理,代码模板的使用)

文章目录 第04章_IDEA的安装与使用(上)本章专题与脉络1. 认识IntelliJ IDEA1.1 JetBrains 公司介绍1.2 IntelliJ IDEA 介绍1.3 IDEA的主要优势:(vs Eclipse)1.4 IDEA 的下载 2. 卸载与安装2.1 卸载过程2.2 安装前的准备2.3 安装过程2.4 注册2…

【小笔记】算法训练基础超参数调优思路

【学而不思则罔,思维不学则怠】 本文总结一下常见的一些算法训练超参数调优思路(陆续总结更新),包括: batchsize学习率epochsdropout(待添加) Batch_size 2023.9.29 简单来说,较…

学习笔记之——3D Gaussian SLAM,SplaTAM配置(Linux)与源码解读

SplaTAM全称是《SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM》,是第一个(也是目前唯一一个)开源的用3D Gaussian Splatting(3DGS)来做SLAM的工作。 在下面博客中,已经对3DGS进行了…

基于springboot+vue的宠物领养系统(前后端分离)

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 背景及意…

C++参悟:正则表达式库regex

正则表达式库regex 一、概述二、快速上手Demo1. 查找字符串2. 匹配字符串3. 替换字符串 三、类关系梳理1. 主类1. basic_regex 2. 算法1. regex_match2. regex_search3. regex_replace 3. 迭代器4. 异常5. 特征6. 常量1. syntax_option_type2. match_flag_type3. error_type 一…

Unity animator动画倒放的方法

在Unity中, 我们有时候不仅需要animator正放的效果,也需要倒放的效果。但我们在实际制作动画的时候可以只制作一个正放的动画,然后通过代码控制倒放。 实现方法其实很简单,只需要把animator动画的speed设置为-1即为倒放&#xff…

科技护航 智慧军休打通医养结合最后一公里

“小度小度,请帮我打电话给医生。” “好的,马上呼叫植物路军休所医生。” 2023年9月25日,常年独居、家住广西南宁市植物路军休所的军休干部程老,半夜突发疾病,让他想不到的是,这个常年伴他左右的“小度”…

Centos 8 安装 Elasticsearch

简介:CentOS 8是一个基于Red Hat Enterprise Linux(RHEL)源代码构建的开源操作系统。它是一款稳定、可靠、安全的服务器操作系统,适合用于企业级应用和服务的部署。CentOS 8采用了最新的Linux内核和软件包管理系统,提供…

Vue3新特性defineModel()便捷的双向绑定数据

官网介绍 传送门 配置 要求: 版本: vue > 3.4(必须!!!)配置:vite.config.js 使用场景和案例 使用场景:父子组件的数据双向绑定,不用emit和props的繁重代码 具体案例 代码实…

考试查分场景重保背后,我们如何进行可用性测试

作者:暮角 随着通过互联网音视频与知识建立连接的新学习方式在全国范围内迅速普及,在线教育/认证考试的用户规模呈井喷式增长。但教育容不得半点马虎与妥协,伴随用户规模不断增长,保证系统稳定性、有效避免千万考生考试时遭遇故障…

Ubuntu 在更新内核后 Virtual Box 不能为虚拟电脑打开一个新任务

前言 我也不知道啥时候自动给我更新了内核,重启电脑之后我的内核升级成6.5.0-14-generic,导致Virtual Box无法找到内核文件。 解决方法 方法1 sudo apt update sudo apt install linux-headers-generic build-essential dkms sudo apt remove virtua…

Elasticsearch:将数据从 Snowflake 摄取到 Elasticsearch

作者:来自 Elastic Ashish Tiwari 为了利用 Elasticsearch 提供的强大搜索功能,许多企业在 Elasticsearch 中保留可搜索数据的副本。 Elasticsearch 是一种经过验证的技术,适用于传统文本搜索以及用于语义搜索用例的向量搜索。 Elasticsearch…