简介
在前端开发中，我们常常需要使用各种图标来美化页面或者辅助用户理解信息。而本文要介绍的 npm 包 topolr-module-icon，是一个提供了多种图标的工具库。在使用该工具库之前，我们需要了解以下几个概念：
SVG：可缩放矢量图形，是一种用于描述二维图形的一种 XML 格式。
iconfont：一个使用 SVG 图标制作字体的工具，可以将 SVG 图标转化为字体，然后可以像使用字体一样使用图标。
npm：Node.js 的包管理器，是世界上最大的软件注册表之一，开发者可以在其中找到各种功能的软件包。
顾名思义，topolr-module-icon 是一个提供 SVG 图标和 iconfont 的库，可以方便开发者快速引用并使用。下面我们将详细介绍使用方法。
安装
在安装 topolr-module-icon 之前，需要先安装 Node.js 和 npm。安装好之后，在终端中输入以下命令即可安装 topolr-module-icon：
npm install topolr-module-icon
使用
引用
在需要使用 topolr-module-icon 的页面中引入库文件，可以通过import或者require的方式引入。
import TopolrIcon from 'topolr-module-icon'
或
var TopolrIcon = require('topolr-module-icon')使用 SVG 图标
topolr-module-icon 提供了多种 SVG 图标可以直接使用，可以在需要的地方直接使用TopolrIcon对象调用，例如：
<span>{TopolrIcon.mail}</span>
<span>{TopolrIcon.heart}</span>其中，mail表示邮箱图标，heart表示心形图标。可供调用的所有 SVG 图标可以在 topolr-module-icon 的 GitHub 仓库中查看。
使用 iconfont
如果需要使用 iconfont，可以通过调用TopolrIcon.font方法获取字体文件：
var font = TopolrIcon.font()
获取到字体文件之后，需要将字体文件与 CSS 样式文件放在同一目录下，并在 HTML 文件中引入：
<link href="./iconfont.css" rel="stylesheet" type="text/css" />
然后在需要的地方添加对应的类名即可使用 iconfont，例如：
<span class="iconfont icon-email"></span> <span class="iconfont icon-heart"></span>
其中，icon-email和icon-heart为 CSS 类名，可供调用的所有 iconfont 类名可以在 topolr-module-icon 的 GitHub 仓库中查看。
示例代码
下面是一个完整的示例代码，演示了如何使用 topolr-module-icon：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ----------
----- --------------------- ---------------- --------------- --
-------
------
------ --- -------
------------------------------
-------------------------------
----
------ -------------
----- --------------- -------------------
----- --------------- -------------------
------- --------------------------
-------
-------其中，index.js 文件内容如下：
import TopolrIcon from 'topolr-module-icon' console.log(TopolrIcon.mail) // 这里会输出 mail 对应的 SVG 图标 console.log(TopolrIcon.heart) // 这里会输出 heart 对应的 SVG 图标
结语
本文介绍了 npm 包 topolr-module-icon 的使用方法，其中包括如何引用、使用 SVG 图标和 iconfont，以及完整的示例代码。希望本文对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd2e5