使用 node.js 从 iconfont.svg 文件中恢复单图标文件

时间: 2020-09-28阅读: 502标签: 图标
阿里巴巴矢量图标库 (以下称iconfont)提供了方便的图标分享和管理功能。但是由于其图标项目独立于代码仓库,往往导致同一项目更换开发人员之后,接任者不能继续管理原来的图标库,给开发带来各种不便。

由于 iconfont 生成的 svg 文件含有图标路径以及图标名数据,因此 (对于保留了此 svg 文件的项目)可以从此 svg 文件中提取出所有图标,然后上传至图标库,重新构建图标项目。


1. svg 文件模板

SVG 的相关知识可以在 SVG | MDN (mozilla.org) 学习。
为了生成完整的 svg 文件,为其准备了一个文件模板字符串:

// svg 文件模板
const svgTemplate =
`<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    t="1584762969678"
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    p-id="12392"
    width="200"
    height="200"
>
    <defs><style type="text/css"/></defs>
    <path d="__PATH__" />
</svg>`;

其中的 d 参数为 svg 路径,这里用 __PATH__占位,以便后面作字符串替换。


2. 切割 .svg 文件

iconfont 生成的 .svg 文件包含了所有图标的路径,用 /<glyph[^n]*/>/g 可以匹配到每一个图标,并借此将它们分离并存储在一个数组里:

readFile(resolve(__dirname, svgPath), 'utf8', (err, res) =>{
    const iconArray = res.match(/<glyph[^n]*/>/g);
}


3. 替换模板文件里的路径

使用正则从分离后的各图标里匹配出其对应的 name、unicode 和路径信息:

iconArray.forEach(item => {
    // 分离 unicode
    const unicode = item.match(/unicode="&#(d+);"/)[1];
    // 分离类名即图标名
    const className = item.match(/glyph-name="([w-_]+)"/)[1];
    // 分离路径
    const path = item.match(/ d="([^"]*)"/)[1]);
});


4. 写入文件

将 svg 模板字符串中的 __PATH__ 替换成匹配到的路径:

fs.writeFile(
    path.resolve(outputPath, className + '.svg'),
    svgTemplate.replace('__PATH__', path),
    function(err){if(err){throw err}}
);

本文只简述实现原理,不包含完整代码,完整代码已经上传到 一个 GitHub 仓库中,可以按照其 readme 文件使用,此处不再赘述。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/9887

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

阿里巴巴iconfont svg图标不能更改颜色的解决方法

svg图标 带有 fill 属性,如果选择的是多色图标且下载到本地的话,默认是带有颜色的。修改的话,需要在编译器里面打开 svg 然后将 fill 属性删除即可,然后在需要的时候使用 css 进行设置

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

字体图标的使用步骤

字体图标的优点:体积小,本质是字体,可以改变颜色,大小,背景等。UI人员设置svg格式交给前端人员;前端上传svg格式生成兼容性字体文件包;下载兼容性字体文件包到本地

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

font-awesome图标转为图片

font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。

css图标库_css常用的矢量图标大全

这篇文章主要介绍前端常用的css图标库有哪些?比如:阿里巴巴矢量图标库Iconfont、Font Awesome、Cikonss、Glyph Icons、Simple Line Icons等等,使用css图标,可以通过样式对他进行设置字体颜色,大小等

微信分享图标设置,以及wx.config配置

页面分享微信显示小图和描述的功能,微信就会抓取这张图片做为分享图片,微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

图标使用新姿势- react 按需引用 svg 的实现

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。

设置网页浏览器标签小图标

在线生成ICO图标制作一个16*16 的.icon文件,文件名必须要favicon.ico,然后放在服务器根目录下面,一般浏览器会自动默认在跟目录下面查找。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!