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

news/2024/7/10 1:57:19 标签: uni-app, 小程序, vue
前景:

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


http://www.niftyadmin.cn/n/5336323.html

相关文章

leetcode 151反转字符串如何原地去除多余空格

题目:https://leetcode.cn/problems/reverse-words-in-a-string/description/ 完整题解:https://leetcode.cn/problems/reverse-words-in-a-string/solutions/2611893/chu-li-kong-ge-ku-han-shu-reversefan-zhu-bioo 思路来自代码随想录,对其中的除去多…

java8 列表通过 stream流 根据对象属性去重的三种实现方法

java8 列表通过 stream流 根据对象属性去重的三种实现方法 一、简单去重 public class DistinctTest {/*** 没有重写 equals 方法*/SetterGetterToStringAllArgsConstructorNoArgsConstructorpublic static class User {private String name;private Integer age;}/*** lombo…

【咕咕送书 | 第八期】羡慕同学进了大厂核心部门,看懂这本书你也能行!

🎬 鸽芷咕:个人主页 🔥 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! ⛳️ 写在前面参与规则 ✅参与方式:关注博主、点赞、收藏、评论,任意评论(每人最多评论…

UE5 C++ Slate独立程序的打包方法

在源码版安装目录内找到已编译通过的xxx.exe,(\Engine\Binaries\Win64\xxx.exe),在需要的位置新建文件夹,拷贝源码版Engine内的Binaries、Content、Shaders文件夹到目标文件夹内,将xxx.exe放入对应位置,删除…

插入排序C++

插入排序:有序列表的匠心打造 在计算机科学中,排序算法是不可或缺的一部分。插入排序,作为其中一种经典算法,以其朴素而直接的方式,展示了如何将无序数据转化为有序状态。本文将通过生动的实例,带你领略插…

用 Golang 启动个简单的http服务器

本章通过编写功能逐渐复杂的 web 服务器来让开发者对如何运用 go 语言有一个初步的了解。web 服务的地址 http://localhost:8000。 1. 启动一个最简单的 web 服务器 package mainimport ("fmt""log""net/http" )func main() {http.HandleFunc(…

【深度挖掘RocketMQ底层源码】「底层系列」深度挖掘RocketMQ的Broker配置介绍及发送流程、异常(XX Busy)问题分析

[TOC](深度挖掘RocketMQ的Broker配置介绍及发送流程、异常(XX Busy)问题分析这里写目录标题) 参考资料 Rocketmq官网:http://rocketmq.apache.org/ Rocketmq的其它项目:https://github.com/apache/rocketmq-externals Rocketmq-console安装&#xff1…

【C语言】linux内核ipoib模块 - ipoib_start_xmit

一、ipoib_start_xmit函数定义 static netdev_tx_t ipoib_start_xmit(struct sk_buff *skb, struct net_device *dev) {struct ipoib_dev_priv *priv ipoib_priv(dev);struct rdma_netdev *rn netdev_priv(dev);struct ipoib_neigh *neigh;struct ipoib_pseudo_header *phdr…