什么是 genericons？
genericons 是一个轻量级的字体图标库，它提供了大量易于使用、可扩展的图标，并且可以通过 CSS 样式来调整其大小、颜色等属性。
genericons 中的图标既可以在网页中直接使用，也可以在移动应用程序中使用。在前端开发中，genericons 可以帮助我们快速、方便地创建美观的界面和用户体验。
安装 genericons
要使用 genericons，首先需要安装它。可以使用 npm 来安装 genericons：
npm install genericons
如果你使用 yarn，则可以使用以下命令安装：
yarn add genericons
使用 genericons
安装 genericons 后，就可以在项目中引入它了。可以通过以下方式导入 genericons 的 css 文件：
<link rel="stylesheet" href="./node_modules/genericons/genericons.css">
在 HTML 文件中，可以像这样使用 genericons 的图标：
<span class="genericon genericon-search"></span>
其中，genericon 是必需的类名，genericon-search 是具体的图标名称。此代码将显示搜索图标。
此外，还可以使用其他类来调整图标的大小和颜色：
<span class="genericon genericon-search icon-lg"></span> <span class="genericon genericon-search icon-red"></span>
上述代码将分别显示大小为大号和颜色为红色的搜索图标。
自定义 genericons
如果 genericons 中没有你需要的图标，也可以自定义它们。首先，需要准备 SVG 图像。然后，可以使用 Fontello 将 SVG 文件转换为字体。
将生成的字体文件下载并解压缩后，就可以通过以下方式将其添加到项目中：
-- -------------------- ---- -------
-------
---------- -
------------ ----------------
---- ----------------------------------------
---- --------------------------------------------- ----------------------------
---------------------------------------- ---------------
--------------------------------------- -------------------
----------------------------------------------------- --------------
------------ -------
----------- -------
-
--------这会将自定义字体添加到项目中。然后，可以像使用 genericons 中的默认图标一样使用自定义图标：
<i class="icon-mycustomicons"></i>
结论
genericons 是一个强大的图标库，可以帮助开发人员快速创建美观的界面和用户体验。本文介绍了如何安装、使用以及自定义 genericons。通过学习和掌握这些技能，可以大大提高在前端开发中的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38332