前言
随着前端技术的不断发展，前端工程师们经常会使用到各种各样的工具，npm 包无疑是其中比较重要的一种。而在前端开发过程中，我们经常会用到 svg 图标，那么如何快速地将图标生成 svg 字体呢？我们可以使用 fontello-svg 这个 npm 包。本文将详细介绍如何使用 fontello-svg。
步骤
安装 fontello-svg
安装 fontello-svg，只需要在终端输入以下命令即可：
npm install fontello-svg --save-dev
获取图标资源
进入 Fontello 官网，点击“Choose font”按钮，选择需要的图标。选择完成后，点击“Download”按钮将图标资源下载到本地。
生成 svg 字体
将下载后的压缩包解压缩，在解压后的文件夹下找到“config.json”文件，将其复制到你的项目根目录下。然后在终端中进入到项目根目录，输入以下命令即可生成 svg 字体文件：
npx fontello-svg
生成成功后，你会在项目根目录下看到一个“font”文件夹，其中就包含了你所选图标的 svg 字体。
使用 svg 字体
将生成的 svg 字体引入到项目中，然后在对应的元素中使用相应图标的 Unicode 号码即可。示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- --- ------------
----- ---------------- ---------------------------
-------
----- -
------------ -----------
----------- -------
------------ -------
------ -----
-------- -------------
----------- -------
---------- -----
------------ --
----------------------- ------------
------------------------ ----------
-
-------------------- -
-------- --------
-
--------
-------
------
----- ----------- ---------------------
-------
-------总结
使用 fontello-svg 可以快速生成 svg 字体，使得使用 svg 图标变得更为方便。今天我们介绍了它的安装、使用、示例代码，相信读者已经对其有了一个基本的认识。希望读者们在前端开发过程中都可以使用到它，提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae53b5cbfe1ea0610e0f