介绍
@svg-icons/boxicons-regular 是一款非常实用的 npm 包。它包含了一系列的精美 icon，可以帮助前端开发人员快速的实现好看的 UI 界面。
这款 npm 包中的 icon 均为矢量图标，所以可以无损放大缩小，并且不会失去清晰度，非常适合用在响应式设计或者高分辨率显示器上。
@svg-icons/boxicons-regular 包中的 icon 采用了 svg 的格式来呈现，所以可以直接嵌入到 html 中使用。
安装
要使用 @svg-icons/boxicons-regular，先要将其安装到项目中。可以使用 npm 命令将其安装到项目中。
npm install @svg-icons/boxicons-regular
也可以通过 yarn 命令将其安装到项目中。
yarn add @svg-icons/boxicons-regular
使用
安装完成后，在代码中可以通过引入这个包来使用其中的 icon。以下是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-------
------
----------- ---------
-- --------- -----------------
-------
-------在这个示例中，我们使用了其中的一个名为 bxl-twitter 的 icon。可以看到，我们给它的元素设置了 class="bx bxl-twitter"，其中 bx 是这个 npm 包的默认类名，bxl-twitter 则是 icon 的名称。
在这个示例中，我们使用了一个 i 元素并给它设置了 bx 类名。这样就可以在这个元素中使用 icon 了。注意，需要给 icon 设置合适的宽度和高度才能正常显示。
示例代码
下面是一个实际使用的示例，可以参考其中的代码来使用该 npm 包：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-----
----------------
---------------------------------------------------------------------------------------------------
--
-------
----- -
-------- -------------
------ -----
------- -----
------------ --
-
---- -
-------- -------------
-------- ---- -----
------- -----
-------------- ----
----------------- --------
------ -----
---------- -----
------- --------
-
--------
-------
------
----------- ---------
------- ------------
----- ----------- -- -----------------
----- ---
---------
------- -----------------------------------------------------------
-------
-------在这个示例中，我们将 icon 的 css 文件引入到了 html 代码中。引入完成后，我们在代码中使用 span 元素来包含 icon，并给它设置适当的类名。最后将这个 span 元素放到按钮里面即可。
这个示例演示了如何使用这个 npm 包中的 icon 来美化页面，并且使用了 jQuery 来处理点击事件。可以在这个基础上进一步扩展功能。
总结
@svg-icons/boxicons-regular 是一个非常实用的 npm 包，可以帮助前端开发人员快速的实现好看的 UI 界面。在使用这个包的时候，我们需要将其安装到项目中，并且使用适当的类名来引用其中的 icon。同时要注意给 icon 设置合适的宽度和高度才能正常显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2534f13b0ab45f74a8b96a