引用阿里图标库，不知道对应的图标是什么，可在本地显示图标ui,再也不要担心刚来不知道公司图标对应的是什么了
项目中使用了阿里的图标库，但是无法看到对应显示什么，每次都要去阿里图标库里面找
在下载下来的文件中会发现有两个文件一个是iconfont.css和iconfont.json，
这两个文件的数据可以拿到然后显示在页面上
有两个问题：
1：如何获取处理iconfont.css的数据
2：如何获取处理iconfont.json的数据
前端获取文件数据，我没可以用node 内置的方法fs模块的readFileSync去读取文件
首先创建需要执行的js 我这里叫 createIconfontUi.js,这个文件可以随便放在工具文件夹下，不过这些文件的目录就要修改，所以最好是所有的文件都放iconfont目录下
import fs from 'fs';
import path from "path";
import {fileURLToPath} from 'url'
//获取弄得执行命令时 传递的参数
const parms = process.argv
//获取 命令行里面的参数
//node 文件 【iconfont.css的url】 【生成的文件的link标签对应 iconfont.css的url】
const iconfontUrl = parms[2] || '/iconfont.css'
//当前文件的路径
const __filenameNew = fileURLToPath(import.meta.url)
//当前文件的文件夹路径
const __dirnameNew = path.dirname(__filenameNew)
const url = path.join(__dirnameNew, iconfontUrl)
const file = fs.readFileSync(url).toString();
在这里iconfont.css的文件路径不是固定的，不过一般在vue项目里面我没会把字体文件放到src/assets/iconfont文件夹下面，
如果你的字体文件夹不是放在这里面，你可以在执行node命令的时候传递参数,不过算了，太麻烦了路径改来改去，
由于iconfont.css里面没有对应的名字，所以先拿到iconfont.json的数据进行处理 ,获取json里面的name
//获取icon库里面的iconfont.json数据
const iconJson = fs.readFileSync(__dirnameNew + '/iconfont.json', 'utf8')
const iconObj = JSON.parse(iconJson)//获取名字map
const len=iconObj.glyphs.length,inconMap={};
for (let i = 0; i <len ; i++) {inconMap['icon-'+iconObj.glyphs[i].font_class]=iconObj.glyphs[i].name
}图标名字以获取，就开始处理iconfont.css数据,后开始创建html页面了
//根据i标签对应的class名字
const fontName = iconObj.font_family;
//把获取的字符串以"}"进行拆分生成数组 然后就可以拿到数组里面存在:before的就是图标了
const icons = file.split('}');
创建html
let html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>iconfont示例</title><link rel="stylesheet" href="./iconfont.css"><style>*{margin: 0;padding: 0;}.icon-list{display:flex;flex-wrap:wrap;padding: 16px;}.item{width: 10%;text-align:center;padding: 16px;box-sizing: border-box;}.class-name{font-size:16px;padding: 4px;box-sizing: border-box;}i{font-size: 36px !important;}</style></head><body><div class="icon-list">`;//循环拆分的数组
for (let i = 0; i < icons.length; i++) {const icon = icons[i];//拿到图标数据if (icon.includes(':before')) {//对图标字符串进行拆分，拿到图标对应的codeconst className = icon.split('.')[1].split(':')[0];//组装图标信息展示html += `<div class="item"><i class="${fontName} ${className}"></i><div class="class-name">${inconMap[className]}</div><div class="class-name">${className}</div></div>`;}
}
html += `</div></body></html>`
把组装的html 元素生成html 文件
const outputUrl = path.join(__dirnameNew, '/iconfont.html')
fs.writeFileSync(outputUrl, html)
最后到iconfont 目录下执行node node命令 生成html文件 ，直接访问该html文件就可以了
完整代码
import fs from 'fs';
import path from "path";
import {fileURLToPath} from 'url'const parms = process.argv
//获取 命令行里面的参数
//node 文件 【iconfont.css的url】 【生成的文件的link标签对应 iconfont.css的url】
const iconfontUrl = parms[2] || '/iconfont.css'//当前文件的路径
const __filenameNew = fileURLToPath(import.meta.url)
//当前文件的文件夹路径
const __dirnameNew = path.dirname(__filenameNew)
console.log(__dirnameNew)
const url = path.join(__dirnameNew, iconfontUrl)
const outputUrl = path.join(__dirnameNew, '/iconfont.html')
const file = fs.readFileSync(url).toString();//获取icon库里面的iconfont.json数据
const iconJson = fs.readFileSync(__dirnameNew + '/iconfont.json', 'utf8')
const iconObj = JSON.parse(iconJson)//获取名字map
const len=iconObj.glyphs.length,inconMap={};
for (let i = 0; i <len ; i++) {inconMap['icon-'+iconObj.glyphs[i].font_class]=iconObj.glyphs[i].name
}//根据i标签对应的class名字
const fontName = iconObj.font_family;
//把获取的字符串以"}"进行拆分生成数组 然后就可以拿到数组里面存在:before的就是图标了
const icons = file.split('}');let html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>iconfont示例</title><link rel="stylesheet" href="./iconfont.css"><style>*{margin: 0;padding: 0;}.icon-list{display:flex;flex-wrap:wrap;padding: 16px;}.item{width: 10%;text-align:center;padding: 16px;box-sizing: border-box;}.class-name{font-size:16px;padding: 4px;box-sizing: border-box;}i{font-size: 36px !important;}</style></head><body><div class="icon-list">`;for (let i = 0; i < icons.length; i++) {const icon = icons[i];if (icon.includes(':before')) {const className = icon.split('.')[1].split(':')[0];html += `<div class="item"><i class="${fontName} ${className}"></i><div class="class-name">${inconMap[className]}</div><div class="class-name">${className}</div></div>`;}
}
html += `</div></body></html>`fs.writeFileSync(outputUrl, html)
当想要看组件库的时候就不需要频繁去看阿里图库了，直接在本地项目 执行然后访问就可以了，当然也可以换成vue模板然后配置路由啥的，但是没有必要，这样还更麻烦，如有问题请大佬多多指教
问题：当图标是多色的时候 自己本地使用的还无法还原，有大佬知道如何修改，请在评论区留下方法思路 3q，我下载阿里图标库解压的demo 打开来发现页面没有颜色的
相关文章：
引用阿里图标库，不知道对应的图标是什么，可在本地显示图标ui,再也不要担心刚来不知道公司图标对应的是什么了
项目中使用了阿里的图标库，但是无法看到对应显示什么，每次都要去阿里图标库里面找 在下载下来的文件中会发现有两个文件一个是iconfont.css和iconfont.json， 这两个文件的数据可以拿到然后显示在页面上 有两个问题： 1：…...
HandlerMethodArgumentResolver用于统一获取当前登录用户
这里记录回顾一些知识，不然就快忘记啦。 环境：SpringBoot 2.0.4.RELEASE需求：很多Controller方法，刚进来要先获取当前登录用户的信息，以便做后续的用户相关操作。准备工作：前端每次请求都传token࿰…...
记录 | mac打开终端时报错：login: /opt/homebrew/bin/zsh: No such file or directory [进程已完成]
mac打开终端时报错：login: /opt/homebrew/bin/zsh: No such file or directory [进程已完成]，导致终端没有办法使用的情况 说明 zsh 没有安装或者是安装路径不对 可以看看 /bin 下有没有 zsh，若没有，肯定是有 bash 那就把终端默…...
anolisos8.8安装显卡+CUDA工具+容器运行时支持（containerd/docker）+k8s部署GPU插件
anolisos8.8安装显卡及cuda工具 一、目录 1、测试环境 2、安装显卡驱动 3、安装cuda工具 4、配置容器运行时 5、K8S集群安装nvidia插件 二、测试环境 操作系统：Anolis OS 8.8 内核版本：5.10.134-13.an8.x86_64 显卡安装版本：525.147.05 c…...
Golang 链表的创建和读取 小记
文章目录 链表的相关知识链表的创建:模拟方式建立链表的**递归创建** 链表的读取遍历读取递归读取 完整代码 链表的相关知识 链表有时会具有头节点，头节点的指针指向第一个节点的地址，其本身的数据域可以根据自己的选择进行赋值 接下来我将以将int转…...
实验记录：深度学习模型收敛速度慢有哪些原因
深度学习模型收敛速度慢有哪些原因？ 学习率设置不当： 学习率是算法中一个重要的超参数，它控制模型参数在每次迭代中的更新幅度。如果学习率过大，可能会导致模型在训练过程中的振荡，进而影响到收敛速度；如果…...
Arris VAP2500 list_mac_address未授权RCE漏洞复现
0x01 产品简介 Arris VAP2500是美国Arris集团公司的一款无线接入器产品。 0x02 漏洞概述 Arris VAP2500 list_mac_address接口处命令执行漏洞，未授权的攻击者可通过该漏洞在服务器端任意执行代码，写入后门，获取服务器权限，进而控制整个web服务器。 0x03 复现环境 FOFA…...
【Jenkins】节点 node、凭据 credentials、任务 job
一、节点 node Jenkins在安装并初始化完成后，会有一个主节点（Master Node），默认情况下主节点可以同时运行的任务数是2，可以在节点配置中修改（系统管理/节点和云管理）。 Jenkins中的节点&#…...
华为OD机试 - 高效货运（Java JS Python C）
题目描述 老李是货运公司承运人，老李的货车额定载货重量为 wt。 现有两种货物： 货物 A 单件重量为 wa，单件运费利润为 pa货物 B 单件重量为 wb，单件运费利润为 pb老李每次发车时载货总重量刚好为货车额定的载货重量 wt，车上必须同时有货物 A 和货物 B ，货物A、B不可切割…...
基于python netmiko去ssh备份网络设备配置
自己为了便利写出来的基于python netmiko去ssh备份网络设备配置，用过secureCRT的脚本去备份设备配置，但是它没有图形化界面，使用不方便，自己就重新用python开发了一个，同时用pyinstaller打包成可执行程序（这…...
【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 Slover 部分
【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 Slover 部分 概述Solver 在多模态发言人识别中的作用Solver 在多模态发言人识别中的重要性Solver 的工作原理 二次规划二次规划的基本形式二次规划的特点二次规划在多模态发言中的应用 (我的理解) 代码详解数…...
爬虫工作量由小到大的思维转变---＜第十二章 Scrapy之sql存储与爬虫高效性的平衡艺术＞
前言: (本文仅属于技术性探讨,不属于教文) 刚好，前阵子团队还在闲聊这个问题呢。你知道吗，在数据收集这个行当里，怎么存数据这问题就跟“先有鸡还是先有蓝”一样，没完没了的循环往复。老规矩，咱们先搞清楚我们的“鸡…...
修改Docker0和容器的地址
修改Docker0和容器的地址 1. 需求 默认服务器安装完Docker-ce后会给docker0分配172.17.0.1/16地址. 公司新接入一个网段正好与172.17.0.1/16冲突,此时访问这台服务器的容器时就会发生网络不可达. 2. 解决方法 修改/etc/docker/daemon.json 加入一个自定义网段 vim /etc/d…...
弹性网络优化算法
3.3、Elastic-Net算法使用 这是scikit-learn官网给出的弹性网络回归的，损失函数公式，注意，它用的矩阵表示，里面用到范数运算。 min w 1 2 n samples ∣ ∣ X w − y ∣ ∣ 2 2 α ρ ∣ ∣ w ∣ ∣ 1 α ( 1 − ρ ) 2 ∣ ∣…...
[C语言]大小端及整形输出问题
假设在一个32位little endian 的机器上运行下面的程序，结果是多少 ? 1.1先看以下三个程序 #include <stdio.h> int main() {long long a 1, b 2, c 3;printf("%lld %lld %lld\n", a, b, c); // 1 2 3printf("%d %d %d %d %d %d\n&quo…...
C# 命令行参数解析库示例
写在前面 在日常开发中，我们经常会用到命令行参数，比如cmd下的各种指令；还有C#的控制台类型的项目，在默认入口Main函数中，那个args参数，就是有系统传入到程序进程的命令行参数；在传入的参数相对…...
2020 年网络安全应急响应分析报告
2020 年全年奇安信集团安服团队共参与和处置了全国范围内 660起网络安全应急响应事件。2020 年全年应急响应处置事件行业 TOP3 分别为:政府部门行业(146 起)医疗卫生行业(90 起)以及事业单位(61 起，事件处置数分别占应急处置所有行业的 22.1%、13.6%、9.2%。2020 年…...
Git----学习Git第一步基于 Windows 10 系统和 CentOS7 系统安装 Git
查看原文 文章目录 基于 Windows 10 系统安装 Git 客户端基于 CentOS7 系统安装部署 Git 基于 Windows 10 系统安装 Git 客户端 （1）打开 git官网 ，点击【windows】 （2）根据自己的电脑选择安装，目前一般w…...
爬虫 scrapy ——scrapy shell调试及下载当当网数据（十一）
目录 一、scrapy shell 1.什么是scrapy shell？ 2.安装 ipython 3.使用scrapy shell 二、当当网案例 1.在items.py中定义数据结构 2.在dang.py中解析数据 3.使用pipeline保存 4.多条管道的使用 5.多页下载 参考 一、scrapy shell 1.什么是scrapy shell&am…...
Linux驱动（中断、异步通知）：红外对射，并在Qt StatusBus使用指示灯进行显示
本文工作： 1、Linux驱动与应用程序编写：使用了设备树、中断、异步通知知识点，实现了红外对射状态的异步信息提醒。 2、QT程序编写：自定义了一个“文本指示灯”类，并放置在QMainWidget的StatusBus中。 3、C与C混合编程与…...
开发者专属：OpenClaw调试Qwen3-32B镜像的3个高级技巧
开发者专属：OpenClaw调试Qwen3-32B镜像的3个高级技巧 1. 为什么需要调试OpenClaw与Qwen3-32B的交互 当我第一次在本地RTX 4090D上部署Qwen3-32B镜像并接入OpenClaw时，本以为开箱即用的组合会一帆风顺。但实际运行自动化任务时，发现三个典型…...
5个核心技巧：开源上采样工具OptiScaler的游戏优化实战指南
5个核心技巧：开源上采样工具OptiScaler的游戏优化实战指南 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler OptiScaler作…...
PCL2启动器游戏启动故障处理：症状分析与系统性解决方案
PCL2启动器游戏启动故障处理：症状分析与系统性解决方案 【免费下载链接】PCL 项目地址: https://gitcode.com/gh_mirrors/pc/PCL 故障现象：典型场景与表现特征 场景一：权限验证失败 启动器主界面加载正常，但点击"启…...
PHP 中的文件读写与上传
PHP 中的文件读写与上传 判断与信息获取 判断文件函数说明返回值file_exists($path)判断文件或目录是否存在boolis_file($path)判断是否是文件boolis_dir($path)判断是否是目录boolis_readable($path)判断是否可读boolis_writable($path)判断是否可写bool<?php $file ./co…...
DeepSeek-OCR-2惊艳效果展示：多栏/斜拍/模糊PDF精准识别对比图集
DeepSeek-OCR-2惊艳效果展示：多栏/斜拍/模糊PDF精准识别对比图集 1. 从机械扫描到智能理解：OCR技术的革命性突破 如果你曾经尝试过从PDF文档中提取文字，特别是那些排版复杂、图片模糊或者拍摄角度倾斜的文档，你一定会理解那种挫…...
VMware虚拟机体验FLUX.1：Windows系统免环境配置方案
VMware虚拟机体验FLUX.1：Windows系统免环境配置方案 想快速体验最新的AI绘画技术却苦于环境配置？FLUX.1作为当前最强的开源文生图模型之一，让很多Windows用户望而却步。本文介绍一种零门槛的解决方案——通过VMware虚拟机一键体验，…...
DanKoe 视频笔记：如何在7天内重置你的生活：概述与核心概念
在本节课中，我们将学习如何通过一个为期七天的系统性过程，重置你的生活状态，摆脱迷茫和低效，重新找回专注、清晰和前进的动力。我们将从理解大脑运作的比喻开始，逐步介绍具体的行动步骤。 你的大脑是一台运行生命游戏…...
OpenClaw轻量化方案实测：nanobot镜像性能与成本分析
OpenClaw轻量化方案实测：nanobot镜像性能与成本分析 1. 为什么需要轻量化OpenClaw方案 第一次听说OpenClaw时，我就被它的自动化能力吸引了——能让AI像人类一样操作我的电脑，完成各种重复性工作。但当我真正尝试在本地部署标准版OpenClaw时…...
通义千问2.5-7B-Instruct开发者指南：API调用代码实例详解
通义千问2.5-7B-Instruct开发者指南：API调用代码实例详解 1. 快速了解通义千问2.5-7B-Instruct 通义千问2.5-7B-Instruct是阿里云在2024年9月发布的70亿参数指令微调模型，属于中等体量的全能型AI助手，最大的特点是完全开源且可以商用。 这…...
解决QGroundControl或华科尔地面站因QT版本冲突导致的启动失败问题
1. 当QGroundControl或华科尔地面站打不开时该怎么办 遇到QGroundControl或华科尔地面站安装后无法启动的问题，很多用户第一反应是软件安装包损坏了。但实际上，这很可能是由于QT框架版本冲突导致的。QT是一个跨平台的C图形用户界面应用程序开发框架&…...