Heroicons 是一个基于 SVG 的图标库，提供了广泛的图标选择，适用于任何前端项目。该库是开源的，通过 npm 包管理器供应。
本教程将向你介绍使用 npm 包管理器在前端项目中集成 heroicons 的方法。
安装
在你的项目文件夹中打开终端，输入以下命令：
--- ------- ---------
这将安装 heroicons npm 包到你的项目中。
集成
普通集成
集成 heroicons 很简单，只需要向你的 HTML 文件中添加一个 script 标签：
------- -------------------------------------------------------
这将使你能够在你的代码中使用 heroicons 提供的所有图标。
高级集成
如果你想提高你的代码的优化程度，你可以使用 Tree Shaking 技术以保证只有你真正需要的图标会被打包到最终的代码中。
首先，确保在你的 webpack.config.js 中启用了 Tree Shaking，即使用以下配置：
-
------------- -
------------ ----
-
-然后只需要导入你需要使用的图标：
------ - ------- - ---- ----------- ----- ----- - -------------
这将使你只打包 "outline" 部分的 heroicons 资源。这样，你的代码将更加轻巧。
使用案例
下面是一个简单的示例，将一个 heroicons 最受欢迎的图标 "heart-outline" 应用于 HTML 内容。
--------- -----
------
------
---------------- ----------------
-------
------
---- ---------- --- -------------- ---------------------------------- ----------- ---------- - -- --- ----------------------
----- ---------------------- ----------------------- ---------------- ----- --- - - ---------- - - --- --------- - - ---- ----- - - -------------- -------- --- - ------ ------------------ - - ---------------- - - ---------------- - - ---------------- - - ---------------- ---- -------- --- - ------- --------------------------------------- --- - ----------- ---------------------------------------------------------------------------------------------------------------- --- - ---------------------- --- - ------ ---- --------------------- - - ---------------- - - ---------------- - - --------------------
----- ---------------------- ----------------------- ---------------- ------ -------- --- ---------- - - ---- ----- - - ---------- - - -------------- - -------------------- - ----------- - - --- -----
------
------- -------------------------------------------------------
--------
----- - ------- - - -----------------
----- ----- - --------------
--------------------------------------- - ------
---------
-------
-------在上面的代码中，'Heart' 图标被应用到一个 svg 元素中。其中，样式和路径信息在 SVG 标签的内容中。
结论
这就是集成 heroicons 并使用它的方法。尽管这个库看起来小巧，它提供了广泛的图标选择，足以应对大多数前端项目的需求。集成 npm 包使得这个库的使用变得更加方便和快捷。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f24ed723b0ab45f74a8b93c