在前端开发中，我们常常需要使用图标来为网站和应用程序添加更加美观和易于识别的元素。而 Material Design Icons (MDI) 是一个非常流行的图标库，为前端开发提供了丰富的图标资源。mdi-json 是一个可以将 MDI 图标库以 JSON 格式导出的 npm 包，便于前端开发者的使用，本文将为大家介绍如何使用 mdi-json 这个 npm 包。
安装
首先，在终端中使用 npm 安装 mdi-json 包：
npm install mdi-json
用法
安装完成后，在项目中引入 mdi-json 包：
const mdiJson = require('mdi-json');接下来，就可以使用 mdiJson 对象中提供的 API 来获取 MDI 图标库中的图标数据。
getIconsByKeyword
getIconsByKeyword 方法可以根据关键词搜索匹配的图标，并以 JSON 格式返回图标信息数组。例如，搜索“arrow”关键词并获取匹配到的前 10 个图标数据：
const icons = mdiJson.getIconsByKeyword('arrow', 10);
console.log(icons);输出结果如下：
-- -------------------- ---- -------
-
-
------- -------------
-------- -------------
------- ------
--
-
------- -------------------------
-------- -------------
------- -------
--
-
------- ---------------------------------
-------- -------------
------- -------
--
-
------- -------------------
-------- -------------
------- ------
--
-
------- --------------
-------- -------------
------- ------
--
-
------- --------------------------
-------- -------------
------- -------
--
-
------- ----------------------------------
-------- -------------
------- -------
--
-
------- --------------------
-------- -------------
------- ------
--
-
------- -----------
-------- -------------
------- ------
--
-
------- ----------------
-------- -------------
------- ------
-
-可以看到，返回的数据中包括了每个图标的名称、所在组、Unicode 编码等信息。
getIconByName
getIconByName 方法可以根据图标名称获取对应的图标数据。例如，获取名称为“arrow-left”的图标信息：
const icon = mdiJson.getIconByName('arrow-left');
console.log(icon);输出结果如下：
{
"name": "arrow-left",
"group": "navigation",
"code": "F04A"
}getCodeByName
getCodeByName 方法可以根据图标名称获取对应的 Unicode 编码。例如，获取名称为“arrow-left”的图标编码：
const code = mdiJson.getCodeByName('arrow-left');
console.log(code);输出结果为：
F04A
示例
下面是一个示例代码，展示如何在网页中使用 mdi-json 获取并展示图标：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ---------------
-------
------
------ ------------------------- --------------
------ ----------------- ----------- ------------------------
--- ---------------------
------- ------------------------------------------
--------
----- ----------- - ----------------------------------------
----- --------- - --------------------------------------
-------- ---------------- -
------------------ -- -
----- -- - -----------------------------
----- ------- - -----------------------------------
------------------------
--------------------------
---
-
------------------------------------- ------- -- -
----- ----- - --------------------------
------------------- - ---
-- ------- -
----- ----- - ---------------------------------
-----------------
-
---
---------
-------
-------以上示例展示了一个搜索框和一个图标列表，当用户输入关键词并提交后，会显示匹配到的图标名称列表。用法上非常简单，只需要调用我们之前介绍的 getIconsByKeyword 方法就可以了。
总结
本文详细介绍了 npm 包 mdi-json 的使用方法，包括获取图标信息和 Unicode 编码，以及如何使用它来在网页中显示图标。这个小工具可以给前端开发者带来很大的效率提升，避免了手动处理 svg 图标的繁琐和复杂操作。希望本文可以对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/194783