在前端开发中，需要使用各种图标来美化页面或者用于业务需求。其中，Font Awesome 是一个非常优秀的图标字体库，但是默认只提供了 SVG 和 Webfont 两种格式，对于需要 PNG 格式的需求可能不太友好。好在有一个名为 font-awesome-svg-png 的 npm 包，它提供了一种将 Font Awesome 图标转换为 PNG 格式的方法。
安装 font-awesome-svg-png
使用 npm 在项目中安装 font-awesome-svg-png：
npm install font-awesome-svg-png
安装完成后，即可使用此包提供的方法。
使用示例
初始化
使用此包需要先初始化：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- -------------------- - ---------------------------------- ----- ----------------- - -------------------------------- ----- ----- - ------------ ----------- ----------- ----- ------ - - -------- -------- ------ --------- --------- -------- ------- --------- -- ------------------------ ------ ------- ---展开代码
在初始化时，传入需要转换的图标和颜色，多个图标和颜色使用数组传入。这里以三个图标和八种颜色为例子。
转换 SVG 为 PNG
转换 SVG 为 PNG 可以使用以下方法：
-- -------------------- ---- ------- ----- -------- ------------------------- ---------- - ----- ------ - ----- ------------------------------- ----------- ----- ------- - --- ---------- ------- ------------ -------------------------- ---------- ------ -- - -- ----- ----- ---- ----- ----------- - ------------------ ----- ------ - ------------------------------- ----------------- ------------------------------------------ --- - --------------------------- ---------展开代码
在上面的代码中，使用 fontAwesomeSvgPng.get 方法获取对应图标和颜色的 SVG，并转化为 PNG 格式。最后以 Base64 编码的方式输出。
可以看到，此方法是异步的，可以通过 async 和 await 关键字来获取结果。
批量转换
在实际开发中，通常需要批量转换各个颜色的图标，以下是一种批量转换的方法：
-- -------------------- ---- ------- ----- -------- ----------------- - --- ---- - - -- - - ------------- ---- - --- ---- - - -- - - -------------- ---- - ----- -------- - --------- ----- --------- - ---------- ----- ------------------------- ----------- - - - ------------------展开代码
在上面的代码中，使用双重循环遍历每个图标和颜色，调用 convertSVGToPNG 方法进行转换。
指导意义
通过学习 font-awesome-svg-png 的使用方法，我们可以更方便地将 Font Awesome 图标转换为 PNG 格式，适应更多的场景需求。此外，此方法也可以用于其他 SVG 图标的转换，可以根据需要进行更改。
此外，本文中的方法均为异步操作，适合在 Node.js 环境中使用，也可以在浏览器端进行适当更改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80700
