在前端开发中，我们经常需要在页面中使用各种图标，而 GitHub 的 octicons 无疑是开发者们的一大福音。为了让更多的人能够方便地使用 octicons，npm 上也有很多相关的包，比如 octicons-glyphsearch-crawler，本文将详细介绍如何使用这个 npm 包。
什么是 octicons-glyphsearch-crawler？
octicons-glyphsearch-crawler 是一个用于爬取 octicons 图标并生成 glyphsearch 数据文件的 npm 包。本包会自动下载最新的 octicons 图标，然后通过爬虫的方式生成一个 JSON 文件，该文件被 glyphsearch 使用，可以让你在输入关键字时，快速找到对应的 octicons 图标。
安装
你可以使用 npm 在你的项目中引入 octicons-glyphsearch-crawler。
npm install octicons-glyphsearch-crawler --save-dev
使用方法
1. 在命令行中使用
在命令行中，我们可以通过以下命令生成一个 JSON 文件（默认会在当前目录下生成“octicons.json”文件）：
$ node node_modules/octicons-glyphsearch-crawler/index.js
你也可以在命令行中使用一些额外选项：
$ node node_modules/octicons-glyphsearch-crawler/index.js -o <output-file> -v
其中，-o 选项用于自定义输出文件的路径和文件名，-v 选项则会在命令行输出一些详细信息。
2. 在脚本中使用
你也可以在自己的脚本中使用 octicons-glyphsearch-crawler 包。示例代码如下：
-- -------------------- ---- -------
----- ------- - ---------------------------------------
----- ------- - -
------- ---------------------------
-
----------------
-------- -- -
--------------------- ---- ---- --------- ---------------
--
-------------- -- -
--------------------
--注意，在使用 crawler 方法时，你需要传入一个对象作为参数。该对象可以包含以下属性：
output：自定义输出文件路径和文件名verbose：是否开启详细信息输出，可选，默认为false
3. 使用生成的 JSON 数据
在 octicons-glyphsearch-crawler 生成的 JSON 数据中，每个图标都有以下属性：
name：图标名称keywords：该图标的关键字，包含官方的和自动生成的code：该图标的 UTF-8 编码，如\f12a
你可以将生成的 JSON 数据引入到你的项目中，并使用一些搜索库（例如 fuse.js），以方便地搜索和使用 octicons。
以下是一个简单的示例，演示了如何在搜索框中输入关键字后，使用 fuse.js 搜索 octicons 并显示结果：
-- -------------------- ---- -------
--------- -----
------
------
------- ---------------------------------------------------------------------
------- --------------------------------------
-------
------
------ ----------- ----------- ------------------- -------------
--- ------------------
--------
----- ----- - -----------------------------------
----- ------- - -
----- ------------ -------
-
----- ---- - --- ----------- --------
----- -------- - ---------------------------------
----- --------- - ----------------------------------
---------------------------------- ------- -- -
----- ------------ - ------------------
----- ------- - -------------------------
------------------- - --
------------------------ -- -
----- -- - ----------------------------
----- ---- - ---------------------------
-------------- - -----------
--------------------
-------------------------
--
--
---------
-------
-------总结
如此详细的介绍，你又学到了什么呢？通过本文，你了解了 octicons-glyphsearch-crawler 这个 npm 包，学习了如何在命令行和脚本中使用该包来生成 JSON 数据文件，并了解了如何在你的项目中使用该文件，并结合搜索库快速搜索并使用 octicons。本文的指导意义也是明确的：当你需要在项目中使用 octicons 时，octicons-glyphsearch-crawler 就是一个可以让你更快、更方便地完成这一需求的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a671d7