当前位置：首页 > news >正文

引用阿里图标库，不知道对应的图标是什么，可在本地显示图标ui,再也不要担心刚来不知道公司图标对应的是什么了

news 文章来源：https://blog.csdn.net/weixin_41277748/article/details/135001984 2025/1/11 5:23:04

项目中使用了阿里的图标库，但是无法看到对应显示什么，每次都要去阿里图标库里面找

在下载下来的文件中会发现有两个文件一个是iconfont.css和iconfont.json，
这两个文件的数据可以拿到然后显示在页面上
有两个问题：
1：如何获取处理iconfont.css的数据
2：如何获取处理iconfont.json的数据

iconfont.css
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&#xff1a…...

编程日记 2023/12/18 10:25:03

HandlerMethodArgumentResolver用于统一获取当前登录用户

这里记录回顾一些知识，不然就快忘记啦。环境：SpringBoot 2.0.4.RELEASE需求：很多Controller方法，刚进来要先获取当前登录用户的信息，以便做后续的用户相关操作。准备工作：前端每次请求都传token&#xff0…...

编程日记 2023/12/18 10:24:02

记录 | 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 那就把终端默…...

编程日记 2023/12/18 10:23:01

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…...

编程日记 2023/12/18 10:19:58

Golang 链表的创建和读取小记

文章目录链表的相关知识链表的创建:模拟方式建立链表的**递归创建** 链表的读取遍历读取递归读取完整代码链表的相关知识链表有时会具有头节点，头节点的指针指向第一个节点的地址，其本身的数据域可以根据自己的选择进行赋值接下来我将以将int转…...

编程日记 2023/12/18 10:16:56

实验记录：深度学习模型收敛速度慢有哪些原因

深度学习模型收敛速度慢有哪些原因？ 学习率设置不当： 学习率是算法中一个重要的超参数，它控制模型参数在每次迭代中的更新幅度。如果学习率过大，可能会导致模型在训练过程中的振荡，进而影响到收敛速度；如果…...

编程日记 2023/12/18 10:15:55

Arris VAP2500 list_mac_address未授权RCE漏洞复现

0x01 产品简介 Arris VAP2500是美国Arris集团公司的一款无线接入器产品。 0x02 漏洞概述 Arris VAP2500 list_mac_address接口处命令执行漏洞，未授权的攻击者可通过该漏洞在服务器端任意执行代码，写入后门，获取服务器权限，进而控制整个web服务器。 0x03 复现环境 FOFA…...

编程日记 2023/12/18 10:14:54

【Jenkins】节点 node、凭据 credentials、任务 job

一、节点 node Jenkins在安装并初始化完成后，会有一个主节点（Master Node），默认情况下主节点可以同时运行的任务数是2，可以在节点配置中修改（系统管理/节点和云管理）。 Jenkins中的节点&#…...

编程日记 2023/12/18 10:13:53

华为OD机试 - 高效货运（Java JS Python C）

题目描述老李是货运公司承运人，老李的货车额定载货重量为 wt。现有两种货物：货物 A 单件重量为 wa，单件运费利润为 pa货物 B 单件重量为 wb，单件运费利润为 pb老李每次发车时载货总重量刚好为货车额定的载货重量 wt，车上必须同时有货物 A 和货物 B ，货物A、B不可切割…...

编程日记 2023/12/18 10:11:51

基于python netmiko去ssh备份网络设备配置

自己为了便利写出来的基于python netmiko去ssh备份网络设备配置，用过secureCRT的脚本去备份设备配置，但是它没有图形化界面，使用不方便，自己就重新用python开发了一个，同时用pyinstaller打包成可执行程序（这…...

编程日记 2023/12/18 10:09:49

【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 Slover 部分

【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 Slover 部分概述Solver 在多模态发言人识别中的作用Solver 在多模态发言人识别中的重要性Solver 的工作原理二次规划二次规划的基本形式二次规划的特点二次规划在多模态发言中的应用 (我的理解) 代码详解数…...

编程日记 2023/12/18 10:05:45

爬虫工作量由小到大的思维转变---＜第十二章 Scrapy之sql存储与爬虫高效性的平衡艺术＞

前言: (本文仅属于技术性探讨,不属于教文) 刚好，前阵子团队还在闲聊这个问题呢。你知道吗，在数据收集这个行当里，怎么存数据这问题就跟“先有鸡还是先有蓝”一样，没完没了的循环往复。老规矩，咱们先搞清楚我们的“鸡…...

编程日记 2023/12/18 10:02:42

修改Docker0和容器的地址

修改Docker0和容器的地址 1. 需求默认服务器安装完Docker-ce后会给docker0分配172.17.0.1/16地址. 公司新接入一个网段正好与172.17.0.1/16冲突,此时访问这台服务器的容器时就会发生网络不可达. 2. 解决方法修改/etc/docker/daemon.json 加入一个自定义网段 vim /etc/d…...

编程日记 2023/12/18 10:00:41

弹性网络优化算法

3.3、Elastic-Net算法使用这是scikit-learn官网给出的弹性网络回归的，损失函数公式，注意，它用的矩阵表示，里面用到范数运算。 min ⁡ w 1 2 n samples ∣ ∣ X w − y ∣ ∣ 2 2 α ρ ∣ ∣ w ∣ ∣ 1 α ( 1 − ρ ) 2 ∣ ∣…...

编程日记 2023/12/18 9:56:38

[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…...

编程日记 2023/12/18 9:54:35

C# 命令行参数解析库示例

写在前面在日常开发中，我们经常会用到命令行参数，比如cmd下的各种指令；还有C#的控制台类型的项目，在默认入口Main函数中，那个args参数，就是有系统传入到程序进程的命令行参数；在传入的参数相对…...

编程日记 2023/12/18 9:53:34

2020 年网络安全应急响应分析报告

2020 年全年奇安信集团安服团队共参与和处置了全国范围内 660起网络安全应急响应事件。2020 年全年应急响应处置事件行业 TOP3 分别为:政府部门行业(146 起)医疗卫生行业(90 起)以及事业单位(61 起，事件处置数分别占应急处置所有行业的 22.1%、13.6%、9.2%。2020 年…...

编程日记 2023/12/18 9:51:32

Git----学习Git第一步基于 Windows 10 系统和 CentOS7 系统安装 Git

查看原文文章目录基于 Windows 10 系统安装 Git 客户端基于 CentOS7 系统安装部署 Git 基于 Windows 10 系统安装 Git 客户端 （1）打开 git官网 ，点击【windows】 （2）根据自己的电脑选择安装，目前一般w…...

编程日记 2023/12/18 9:50:31

爬虫 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…...

编程日记 2023/12/18 9:49:30

Linux驱动（中断、异步通知）：红外对射，并在Qt StatusBus使用指示灯进行显示

本文工作： 1、Linux驱动与应用程序编写：使用了设备树、中断、异步通知知识点，实现了红外对射状态的异步信息提醒。 2、QT程序编写：自定义了一个“文本指示灯”类，并放置在QMainWidget的StatusBus中。 3、C与C混合编程与…...

编程日记 2023/12/18 9:48:29

echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图

前言最近几天用echarts做中国地图，就把以前写的demo：在vue中实现中国地图拿来用，结果到项目里直接报错了，后来发现是因为版本的问题，没办法只能从头进行踩坑了。以下内容基于vue3 和 echarts 5.32 基本使用获取地…...

编程日记 2023/12/18 9:47:28

进程间通讯-管道

介绍管道（Pipe）是操作系统提供的一种进程间通信（IPC，Inter-Process Communication）机制，它允许一个进程的输出直接作为另一个进程的输入。管道主要分为以下两种类型： 无名管道（Unn…...

编程日记 2023/12/18 9:44:25

项目总结-自主HTTP实现

终于是写完了，花费了2周时间，一点一点看，还没有扩展，但是基本功能是已经实现了。利用的是Tcp为网络链接，在其上面又写了http的壳。没有使用epoll，多路转接难度比较高，以后有机会再写&#xff0c…...

编程日记 2023/12/18 9:43:24

Java语言＋二维数组＋非递归实现五子棋游戏

以前做过一个C语言版五子棋：Ｃ语言＋二维数组＋非递归实现五子棋游戏现在做一个Java语言版五子棋，规则如下： 1､白子为O; 2､黑子为； 3､白子先手；…...

编程日记 2023/12/18 9:42:23

WordCloud—— 词云

【说明】文章内容来自《机器学习入门——基于sklearn》，用于学习记录。若有争议联系删除。 wordcloud 是python的第三方库，称为词云，也成文字云，可以根据文本中的词频以直观和艺术化的形式展示文本中词语的重要性。依赖于pillow …...

编程日记 2023/12/18 9:40:21

linux网络----UDP编程

一、函数接口: 1.socket:创建一个用来网络通信的终端节点； 参数: type：套接字类型 SOCK_STREAM 流式套接字 TCP SOCK_DGRAM 数据报套接字 UDP SOCK_RAM 原始套接字 domain: 协议族 AF_INET protocal: 默认为0 2.s…...

编程日记 2023/12/18 9:39:20

[AI工具推荐]AiRestful智能API代码生成

智能API代码示例生成工具AiRestful 一、产品介绍二、如何使用1、第一步(必须):2、第二步(可选):3、第三步(智能生成): 三、如何集成到您的网站(应用)1、开始接入2、接入案例四、注意点一、产品介绍 AiRestful是一款基于智能AI的,帮助小白快速生成任意编程语言的API接口调用示…...

编程日记 2023/12/18 9:35:17

Elasticsearch 8.10.0同义词API用法详解，支持同义词热更新

Elasticsearch 的同义词功能非常强大，如果使用得当，可以显着提高搜索引擎的效果。使用同义词功能时的一个常见问题是更新同义词集。同义词在搜索引擎领域用途同义词在搜索引擎领域的用途可概括如下：增强搜索的准确性——当用户输入一个关键词时，可能与他们实际意图相关…...

编程日记 2023/12/18 9:33:15

深度学习之模型权重

在深度学习中，模型的权重（weights）是指神经网络中的参数，这些参数用于调整和学习模型的行为，以便能够对输入数据进行有效的映射和提取有用的特征。深度学习模型通常由许多神经元和连接组成，而权重就是连接这…...

编程日记 2023/12/18 9:31:14

1 单个sheet page.js(页面中的导出方法) import { exportExcel } from ../../../utils/exportExcel.js; leadOut() {const arr [{ id: 1, name: 张三, age: 14, sex: 男 },{ id: 2, name: 李四, age: 15, sex: 女 },{ id: 3, name: 王五, age: 16, sex: 男 },];const allR…...

编程日记 2023/12/18 9:29:12

布吉附近公司做网站建设多少钱/百度指数电脑端查询

感谢“大神”的无私奉献：http://blog.csdn.net/leixiaohua1020/article/details/15811977 a) 通用选项-L license-h 帮助-fromats 显示可用的格式，编解码的，协议的...-f fmt 强迫采用格式fmt-I filename 输入文件-y 覆盖输出文件-t duration …...

编程日记 2025/1/11 0:23:27

网站建设风格/百度指数有哪些功能

想起了李雷和韩梅梅晚上下班回来，打开PPS看看最新一期的《头脑风暴》，这期的主题是“80后之结婚吗？”，开篇放了一首歌曲《李雷和韩梅梅》，听了几句觉得有意思，于是google一下这个主题，发现原来…...

编程日记 2025/1/11 0:08:13

做网站从哪方面入门/成都seo排名

开门见山。 PMP是应聘项目管理、项目经理这些岗位的敲门砖，真正引进国内是在1999年，那时候大家对这个证书了解不多，一年也就百八十人报考，随着PMP越来越被市场认可，到目前国内认证人数已经近百万，做过工程…...

编程日记 2025/1/10 23:58:03

快速建站属于saas吗/app推广拉新平台

概述线段树就是用一棵二叉树维护某一区间内的某一值（最值，和，乘积......)，主要有区间查询和区间修改两种操作，区间修改又有自上而下修改和自下而上修改两种，本人更习惯于自上而下修改。下面是百度百科对线…...

编程日记 2025/1/10 23:51:54

衡阳网站建设衡阳千度网络/友链对网站seo有帮助吗

“微软实现企业信息系统远程客户端的安全技术及应用-石家庄站活动”召开在即！热忱期待您的光临！感谢您对本次活动的热情参与！ 城市：石家庄时间：2005年11月16日 13：30-17&#xff1a…...

编程日记 2025/1/10 22:38:52

西安免费做网站公司/宁波seo快速优化课程

https://blog.csdn.net/qq_36667170/article/details/79341379...

编程日记 2025/1/10 22:32:48

项目中使用了阿里的图标库，但是无法看到对应显示什么，每次都要去阿里图标库里面找

前端获取文件数据，我没可以用node 内置的方法fs模块的readFileSync去读取文件

首先创建需要执行的js 我这里叫 createIconfontUi.js,这个文件可以随便放在工具文件夹下，不过这些文件的目录就要修改，所以最好是所有的文件都放iconfont目录下

由于iconfont.css里面没有对应的名字，所以先拿到iconfont.json的数据进行处理 ,获取json里面的name

图标名字以获取，就开始处理iconfont.css数据,后开始创建html页面了

创建html

把组装的html 元素生成html 文件

最后到iconfont 目录下执行node node命令 生成html文件 ，直接访问该html文件就可以了

完整代码

当想要看组件库的时候就不需要频繁去看阿里图库了，直接在本地项目 执行然后访问就可以了，当然也可以换成vue模板然后配置路由啥的，但是没有必要，这样还更麻烦，如有问题请大佬多多指教

问题：当图标是多色的时候 自己本地使用的还无法还原，有大佬知道如何修改，请在评论区留下方法思路 3q，我下载阿里图标库解压的demo 打开来发现页面没有颜色的

相关文章：

最后到iconfont 目录下执行node node命令生成html文件，直接访问该html文件就可以了

当想要看组件库的时候就不需要频繁去看阿里图库了，直接在本地项目执行然后访问就可以了，当然也可以换成vue模板然后配置路由啥的，但是没有必要，这样还更麻烦，如有问题请大佬多多指教

问题：当图标是多色的时候自己本地使用的还无法还原，有大佬知道如何修改，请在评论区留下方法思路 3q，我下载阿里图标库解压的demo 打开来发现页面没有颜色的