npm 是一个在 JavaScript 社区中使用广泛的包管理器。它允许开发者下载并在自己的项目中安装已经被其他人创建的 JavaScript 包，以便在他们的项目中使用这些包。其中一个非常有用的 npm 包是 iconic-djs。该包为开发者提供了一组方便的工具，以便他们能够实现在他们的 Web 应用程序中嵌入自己的图标。
Iconic-djs 简介
Iconic-djs 是一个 npm 包，用于在 Web 应用程序中添加图标。它为开发者提供了一种简单的方法，将图标集合添加到应用程序中。Iconic-djs 依赖于 Font Awesome 图标字体库，所以你需要先安装 Font Awesome。在你完成安装后，你就可以开始使用 Iconic-djs。
安装 Iconic-djs
你可以使用 npm 包管理器来安装 Iconic-djs。在你的控制台中运行以下命令即可：
npm install -S iconic-djs
这将会安装 Iconic-djs，并将其添加到你的项目中。接下来，你需要在你的代码中载入 Iconic-djs，以便你可以使用它。
使用 Iconic-djs
在你的代码中，你需要引入以下两个文件：
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"> <script src="node_modules/iconic-djs/iconic-djs.min.js"></script>
这将包含 Font Awesome 的样式表和 Iconic-djs 库。如果你正在处理 Web 页面开发，就将它们添加到你的 HTML 页面中即可。
接下来，你需要为你的应用程序创建一个 Iconic-djs 实例：
var icons = new Iconic({
"width": 24,
"height": 24,
"svgClass": "my-icon-svg",
});这将会创建一个名为 icons 的 Iconic-djs 实例，该实例允许你将 Font Awesome 图标作为 SVG 图像嵌入到你的 Web 页面中。在这个例子中，我们定义了一个 SVG 的默认宽度和高度，以及将作为 SVG 图像基础的 SVG 样式类名称。
接下来，你可以调用 icons.render() 方法来渲染特定的图标：
var renderedIcon = icons.render("fas fa-heart");在这个例子中，我们使用 render() 方法来渲染 Font Awesome 中的 "fas fa-heart" 图标。
渲染后，可以将渲染后的图标添加到 Web 页面中：
document.getElementById("my-svg-container").innerHTML = renderedIcon;现在你已经准备好在你的应用程序中使用图标了。
Iconic-djs 使用指南
Iconic-djs 是一个非常强大的工具，可以让你在应用程序中轻松地嵌入图标。如果你刚刚开始学习 Iconic-djs 并且你想学习如何更好地使用它来提高你的编程技能，以下是一些使用指南：
深入研究 Font Awesome 图标库。
Iconic-djs 建立在 Font Awesome 图标库之上，所以深入了解 Font Awesome 图标库中的所有图标的含义和用法是非常有用的。
创建图标集合。
有时，你可能需要在你的应用程序中使用多个图标。在这种情况下，你可以使用 Iconic-djs 创建一个图标集合，以方便你在你的应用程序中使用它们。
熟悉 Iconic-djs 的 API。
Iconic-djs 的 API 提供了一系列强大的方法和属性，可以让你轻松地实现在应用程序中嵌入图标。了解这些方法和属性将帮助你更加充分地使用 Iconic-djs。
尝试使用 Iconic-djs 的回调函数。
Iconic-djs 支持回调函数，这意味着你可以对成功渲染图标时的行为进行自定义。例如，你可以通过图标渲染成功后添加点击事件来增加一个交互式的用户界面。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------------------
----- ---------------- ----------------------------------------------------------------
------- ---------------------------------------------------------
-------
------
--------- ---------------
---- ----------------------------
--------
--- ----- - --- --------
-------- ---
--------- ---
----------- --------------
---
--- ------------ - ----------------- -----------
----------------------------------------------------- - -------------
---------
-------
-------在这段代码中，我们首先载入了 Font Awesome 的样式表和 Iconic-djs 库。然后我们创建了一个名为 icons 的 Iconic-djs 实例，然后调用 render() 方法来渲染 Font Awesome 中的 "fas fa-heart" 图标。最后，我们将渲染后的图标添加到 Web 页面中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6d50