在前端开发中，需要使用各种图标来美化页面或者用于业务需求。其中，Font Awesome 是一个非常优秀的图标字体库，但是默认只提供了 SVG 和 Webfont 两种格式，对于需要 PNG 格式的需求可能不太友好。好在有一个名为 font-awesome-svg-png 的 npm 包，它提供了一种将 Font Awesome 图标转换为 PNG 格式的方法。
安装 font-awesome-svg-png
使用 npm 在项目中安装 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