js提取iconfont项目的图标

iconfont 可以让我们轻松使用字体图标,比如使用 iconfont 提供的 js,就可以愉快的码代码了。

//at.alicdn.com/t/c/font_xxxxx.js

通常公司会有提供一套图标供所有系统使用,比如图标库里有 1000 个图标,但某个项目只需要使用 10 个,但 js 文件包含了所有的图标,就有点浪费网络资源了。比如下面只用了第一行的图标,其他的都不需要。

另一种场景是组件库,组件库引入了 iconfont 的 js 文件,加在了全部图标,这对于组件库来说是不能接受的;
当然可以手动将需要的图标一个一个放到组件库中,这样不止费劲后,还容易出错。

所以可不可以将图标自动提取出来,然后按需引入。

图标提取实现

先来看看 js 文件里图标是怎样存在的,可以看到所有的图标都放在一个svg里面,每个图标由symbol包裹起来,并且都有id属性,咱们就可以根据这些信息将图标从字符串里弄出来。

所以,正则表达式可以这么写:

const svgReg = /<symbol[^>]*>(<path[^<]*><\/path>)+<\/symbol>/gi;

然后遍历提取出来的symbol,转成svg即可,id可以作为图标的名称。

将 iconfont 的 js 文件字符串传递进createSVGFromSymbol,替换掉symbolidfill等属性。

const createSVGFromSymbol = (str) => {// 提取图标const symbolList = str.match(svgReg);const svgList: Array<string[]> = [];symbolList.forEach((sym: string) => {const svg = sym// 替换开始标签.replace(/^<symbol/, `<svg xmlns="http://www.w3.org/2000/svg" `)// 结束标签.replace(/<\/symbol>$/, "</svg>")// 删除 id.replace(/ id="(.*?)" /, "")// 删除 fill属性.replace(/ fill="(.*?)"/g, "");});return svgList;
};

比如这个图标代码:

<symbol id="icon-close" viewBox="0 0 1024 1024"><pathd="M557.312 513.248l265.28-263.904c12.544-12.48 12.608-32.704 0.128-45.248-12.512-12.576-32.704-12.608-45.248-0.128l-265.344 263.936-263.04-263.84C236.64 191.584 216.384 191.52 203.84 204 191.328 216.48 191.296 236.736 203.776 249.28l262.976 263.776L201.6 776.8c-12.544 12.48-12.608 32.704-0.128 45.248 6.24 6.272 14.464 9.44 22.688 9.44 8.16 0 16.32-3.104 22.56-9.312l265.216-263.808 265.44 266.24c6.24 6.272 14.432 9.408 22.656 9.408 8.192 0 16.352-3.136 22.592-9.344 12.512-12.48 12.544-32.704 0.064-45.248L557.312 513.248z"></path>
</symbol>

转换之后就是这样子了

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><pathd="M557.312 513.248l265.28-263.904c12.544-12.48 12.608-32.704 0.128-45.248-12.512-12.576-32.704-12.608-45.248-0.128l-265.344 263.936-263.04-263.84C236.64 191.584 216.384 191.52 203.84 204 191.328 216.48 191.296 236.736 203.776 249.28l262.976 263.776L201.6 776.8c-12.544 12.48-12.608 32.704-0.128 45.248 6.24 6.272 14.464 9.44 22.688 9.44 8.16 0 16.32-3.104 22.56-9.312l265.216-263.808 265.44 266.24c6.24 6.272 14.432 9.408 22.656 9.408 8.192 0 16.352-3.136 22.592-9.344 12.512-12.48 12.544-32.704 0.064-45.248L557.312 513.248z"></path>
</svg>

同时可以将id提取出来,作为保存 svg 文件时的文件名,所以代码就变成下面的样子了。


// 将空格/- 去掉,转换成驼峰
const processSvgName = (name = ''): string[] => {return name// 替换-_.replace(/-/g, ' ').replace(/_/g, ' ').split(' ').filter((str) => !!str).map((item) => item.toLowerCase())// 转换成驼峰.map((str: string) => {if (str.length > 1) {return str[0].toUpperCase() + str.slice(1);}return str[0].toUpperCase();}).join('')
};const createSVGFromSymbol = (prefix: string, str: string): Array<string[]> => {const symbolList = str.match(svgReg);if (symbolList) {const svgList: Array<string[]> = [];symbolList.forEach((sym: string) => {const idMatchResult = sym.match(/ id="(.*?)" /);if (idMatchResult && idMatchResult.length >= 2) {const svgNameArr = processSvgName(idMatchResult[1].replace('icon-', ''),);svgList.push([svgNameArr,sym.replace(/^<symbol/, `<svg xmlns="http://www.w3.org/2000/svg" `).replace(/<\/symbol>$/, '</svg>')// remove id.replace(/ id="(.*?)" /, ''),// remove fill attribute.replace(/ fill="(.*?)"/g, '')]);}});return svgList;}return [];
};

这样所有的图标都提取出来了。

当然可以根据业务的需要再转换成对应的组件,比如我平时主要使用React开发,就可以同时生成对应的React组件,一个图标库就搞定了。
每次图标需要更新时运行脚本就即可,剩下的时间才能摸鱼。

当然我做了一个 npm 包iconfont-extract,方便在其他项目中使用。

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

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

相关文章

系列十九、Spring实例化bean的方式

一、概述 所谓实例化bean&#xff0c;大白话讲就是Spring如何把这一个个的普通的Java对象创建为Spring bean的。 二、方式 Spring中实例化bean常用的有以下四种&#xff0c;即&#xff1a; ① 构造器方式&#xff1b; ② 静态工厂方式&#xff1b; ③ 实例工厂方式&#xff1b;…

关于mybatis插入返回主键id和SpringBoot事务注解自调用演示

文章目录 一. 插入返回任意规则主键ID二. SpringBoot自调用事务2.1 场景12.2 场景2 自调用结论总结 一. 插入返回任意规则主键ID 实体对象 TableName("bank") Data public class Entity {TableId("id")Integer id;TableField("money")Integer …

超详细!Opencv人脸识别!附源码!

一、新建环境 注意&#xff01;&#xff01;确定后需要关闭项目&#xff0c;重新打开&#xff0c;终端的环境才会变化&#xff01;&#xff01; 二、下载安装包&#xff08;只需要3个即可&#xff09; 1. 下载dlib包 pip install dlib-19.19.0-cp38-cp38-win_amd64.whl.whl …

GoLang语言Map用法

目录 Map 的内部结构 Map 的操作 1. 创建和初始化 2. 添加键值对 3. 获取值 4. 删除键值对 5. 遍历 map 6. 检查键是否存在 注意事项 在Go语言中&#xff0c;map 是一种无序的键值对集合&#xff0c;其中每个键必须是唯一的。以下是关于 map 内部结构和操作的详细解释…

Linux 如何在文件中查找指定内容,grep的用法

Linux 如何在文件中查找指定内容 1、 如我们 查找 log_file_catalina.out 文件中&#xff0c;包含 ‘总数&#xff1a;900’ 的字符内容 2、 在日志中查看 83910_law_21CFBC7EB25B1FF60255FE7F4BE1BCCF1CE726F6_0.bdyhf 的相关内容 grep 83910_law_21CFBC7EB25B1FF60255FE7…

互联网协议入门( 通俗易懂的网络协议层次结构讲解)

转载&#xff1a;互联网协议入门&#xff08; 通俗易懂的网络协议层次结构讲解&#xff09;-CSDN博客 我们每天使用互联网&#xff0c;你是否想过&#xff0c;它是如何实现的&#xff1f; 全世界几十亿台电脑&#xff0c;连接在一起&#xff0c;两两通信。上海的某一块网卡送…

人工智能概论

一、关键技术 人工智能包含了七项关键技术: 1. 机器学习: 机器学习是研究计算机怎样模拟或实现人类的学习行为&#xff0c;以获取新的知识或技能&#xff0c;重新组织已有的知识结构使之不断改善自身的性能&#xff0c;是人工智能技术的核心。 从学习模式划分&#xff0c;分…

浅谈java中的锁

根据标准锁的分类 偏向锁 / 轻量级锁 / 重量级锁&#xff1b;可重入锁 / 非可重入锁&#xff1b;共享锁 / 独占锁&#xff1b;公平锁 / 非公平锁&#xff1b;悲观锁 / 乐观锁&#xff1b;自旋锁 / 非自旋锁&#xff1b;可中断锁 / 不可中断锁。 偏向锁 / 轻量级锁 / 重量级锁…

【管理运筹学】背诵手册(六)| 图与网络分析(最大流问题,最小费用最大流问题)

六、图与网络分析 最大流问题 最大流问题的数学规划模型为&#xff1a; max ⁡ v f 12 f 13 { f 12 f 13 − f 57 − f 67 0 f 13 f 23 f 34 f 35 . . . 0 ≤ f i j ≤ c i j \max vf_{12}f_{13}\\ \begin{cases} f_{12}f_{13}-f_{57}-f_{67}0 \\ f_{13}f_{23}f_{34}f…

虚拟数据生成_以Python为工具

生成虚拟数据_以Python为工具 生成虚拟数据技术在现实生活中具有多个重要的应用领域。它为数据隐私保护、机器学习算法开发、数据处理和可视化等方面提供了实用且有价值的解决方案。尤其是能满足定制化需求的虚拟数据&#xff0c;在预期的方向上让数据定向随机。 &#x1f339…

原生GPT本地及云端部署方式保姆级教程

前提条件 部署必须要有一个超过1年的Github账号 本地服务部署 运行效果 部署方法 下载安装包 暂时无法在飞书文档外展示此内容 GitHub授权登录&#xff1a; https://dash.pandoranext.com/ 登录后是这个样子&#xff1a; 复制下面红框里面这个License Id 编辑Config.js…

flutter开发实战-轮播Swiper更改Custom_layout样式中Widget层级

flutter开发实战-轮播Swiper更改Custom_layout样式中Widget层级 在之前的开发过程中&#xff0c;需要实现卡片轮播效果&#xff0c;但是卡片轮播需要中间大、两边小一些的效果&#xff0c;这里就使用到了Swiper。具体效果如视频所示 添加链接描述 这里需要的效果是中间大、两边…

面试问题--Linux网络编程

Linux网络编程涉及在Linux操作系统上使用套接字&#xff08;socket&#xff09;等工具进行网络通信。以下是一些与Linux网络编程相关的主题&#xff1a; 套接字编程&#xff1a; 在Linux中&#xff0c;套接字是网络编程的基础。可以使用C语言中的socket库来创建套接字。套接字…

【人工智能Ⅰ】实验3:蚁群算法

实验3 蚁群算法的应用 一、实验内容 TSP 问题的蚁群算法实现。 二、实验目的 1. 熟悉和掌握蚁群算法的基本概念和思想&#xff1b; 2. 理解和掌握蚁群算法的参数选取&#xff0c;解决实际应用问题。 三、实验原理 1&#xff0e;算法来源 蚁群算法的基本原理来源于自然界…

C++学习 --谓词

目录 1&#xff0c; 什么是谓词 1-1&#xff0c; 一元谓词 1-2&#xff0c; 二元谓词 1&#xff0c; 什么是谓词 返回bool类型的仿函数&#xff0c; 叫着谓词&#xff0c; 分为一元谓词和二元谓词 1-1&#xff0c; 一元谓词 operator()接收一个参数&#xff0c;叫着一元谓…

python第1天之常识及环境安装

前言&#xff1a; 当谈到编程语言的流行度时&#xff0c;Python绝对是其中之一。Python是一种高级编程语言&#xff0c;其语法简单易懂&#xff0c;适用于各种不同的应用领域&#xff0c;包括Web开发、数据分析、人工智能等。在本文中&#xff0c;我们将探讨一些关于Pyth…

【JavaScript】3.2 JavaScript性能优化

文章目录 1. 避免全局查找2. 避免不必要的属性查找3. 使用快速的JavaScript方法4. 避免不必要的DOM操作5. 使用Web Workers进行后台处理总结 性能优化是任何编程语言的重要组成部分&#xff0c;JavaScript也不例外。在这个章节中&#xff0c;我们将探讨如何优化JavaScript代码&…

GAN:WGAN

论文&#xff1a;https://arxiv.org/pdf/1701.07875.pdf 发表&#xff1a;2017 WGAN 算法流程 从GAN 到 WGAN 的转变 相比于原始 GAN&#xff0c;WGAN 只需要修改以下几点&#xff0c;就能使得训练更稳定&#xff0c;生成质量更高&#xff1a; 1. 此时的判别器相当于做回归…

【DDD】领域驱动设计总结——如何构造领域模型

文章目录 一 分离领域二 领域对象分类2.1 实体(ENTITY)2.2 值对象(VALUE OBJECT)2.3 服务(SERVICE)2.4 模块&#xff08;&#xff2d;ODULE&#xff09; 三 管理领域对象的生命周期3.1 聚合&#xff08;AGGREGATE&#xff09;3.2 工厂&#xff08;FACTORY&#xff09;3.3 存储库…

记i18n ally工具检测语言失败的一则思路

情况 只有某个文件检测不到汉字&#xff0c;其余都可以检测出来&#xff0c;困扰许久&#xff0c;发个博客记一下思路 解决方法&#xff1a; 1、肯定不是i18n ally工具的问题&#xff0c;因为其他的vue都能检测成功 2、是这个文件的问题 采用排除法 先删掉所有代码&#…