介绍
Evil Icons 是一个开源的矢量图标集合，包含了一系列有趣且独特的图标。你可以使用 npm 包管理器轻松地将这些图标添加到你的前端项目中。
在本篇文章中，我们将学习如何使用 Evil Icons 包，以及如何在项目中应用这些图标。
安装
如果你使用 npm 包管理器，可以通过以下命令来安装 Evil Icons：
npm install --save evil-icons
使用
在你的项目中引入 Evil Icons：
import 'evil-icons/css/evil-icons.css';
接下来，你就可以在 HTML 文件中使用 Evil Icons 的图标了。例如，下面是一个包含“搜索”图标的 HTML 输入框示例：
<label for="search-input" class="sr-only">Search</label> <input type="text" id="search-input" placeholder="Search"> <svg class="ei ei-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><use xlink:href="#ei-search"></use></svg>
其中 ei-search 是 Evil Icons 中“搜索”图标的名称。你可以在 Evil Icons 官网 上找到所有可用的图标及其名字。
示例代码
下面是一个完整的 HTML 页面示例，演示了如何在项目中使用 Evil Icons 的两个图标：搜索和收藏。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ----- ------------
----- ---------------- --------------------------------------------------
-------
------
------
------ ------------------ ------------------------------
------ ----------- ----------------- ---------------------
---- --------- ---------- ---------------------------------- ---------- - --- --------- ------------------------------------
-------
--------
----- -------------------------------
---- --------- --------- ---------------------------------- ---------- - --- --------- -----------------------------------
---------
-------
-------总结
在本文中，我们学习了如何使用 npm 包管理器安装 Evil Icons，以及如何在项目中使用这个包中的矢量图标。通过使用这些独特的图标，可以让你的前端应用程序更加生动有趣。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33013