关于iconfont的梳理维护

咖妃
735 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

前言

hi，all～，不知大家有没有碰到这种问题，某一天呢，老大们突然找你，说有个项目交给你维护。你打开项目看了看，嗯，里面很多地方用到了iconfont。但是，又有一个问题。项目经手的人比较多，以前维护项目的人并未留下关于iconfont库的一些信息。那在该项目上迭代碰到一些svg时我们应该怎么搞呢？

svg-icon

首先，比较笨的方法就是找UI要两张不同状态的图，一张用来正常展示，一张用来hover展示。但是这样做会有个问题，以后颜色变化的话，又得找UI换不同颜色的图，太麻烦了。

除了笨方法，还有一种呢就是直接使用svg-icon，将svg文件改为随文字颜色变幻即可（通常讲，是在svg的path中添加fill="currentColor"即可）。

这种方法呢，也不是很方便，就svg修改来说可能就比较费事。那还有没有更简单的方法呢？有，接下来介绍对base64字体文件进行逆向转换，上传了阿里icon库维护。

逆向转换

项目base64字体文件逆向转化为单个svg图片

base64 => ttf文件 

复制base64后的部分到 base64.guru/converter/d… 网站，进行转换

image.png

ttf => svg合集文件

在cloudconvert.com/ttf-to-svg网站上传刚刚生成的ttf文件，点击convert生成svg合集文件

image.png

svg合集文件 => 单个svg子文件

在icomoon.io/app/#/selec…上传svg合集文件，点击需要分解的子svg文件进行下载

image.png

svg上传阿里icon库

image.png

字体文件下载 可以选择自己需要的文件格式

image.png

项目内预览icon字体

项目内添加ttf文件 VsCode 的插件 iconfont-preview 可以直接预览。

总结

avatar
文章
阅读
粉丝