介绍
ionicons-2-legacy 是一款基于 ionicons 2 的 icon 字体库，包含了 200 多个图标。该字体库通过 npm 包的形式提供，在前端开发中可以方便地使用该字体库进行图标的展示。
安装
使用 npm 安装 ionicons-2-legacy：
--- ------- ----------------- ------
使用示例
使用 ionicons-2-legacy 前，需要在 HTML 页面中引入 ionicons-2-legacy.css 文件和 ionicons-2-legacy.ttf 字体文件：
----- ---------------- -------------------------------------
-------
-- ------- ---- ----------- --
----------- -
------ ----
-
--------然后，就可以在 HTML 页面中使用 ionicons-2-legacy 提供的图标了：
-- ---------------------- ---- ------------- ---
ionicons-2-legacy 还提供了一些常用的 icon 样式，例如 ion-ios-home 表示 iOS 风格的首页图标，ion-android-alarm-clock 表示 Android 风格的闹钟图标等等。
如果想要查看 ionicons-2-legacy 提供的所有图标，可以访问官网进行查看：
https://ionicons.com/v2/legacy/
源码解析
ionicons-2-legacy 是基于 ionicons 2 开发的，因此它的源码结构和 ionicons 2 一样。ionicons-2-legacy 的源码是由一个 SVG 图标文件和一个 Python 脚本生成的。
SVG 图标文件位于 src/icons.svg，该文件包含了 ionicons-2-legacy 所有图标的 SVG 代码。
Python 脚本位于 scripts/ionicons2-legacy.py，该脚本用来将 SVG 图标文件转换为字体文件和 LESS 文件。
fontforge 是一个用来制作字体的开源软件，ionicons-2-legacy 使用 fontforge 将 SVG 文件转换为 ttf 格式的字体文件。
生成 CSS 文件的过程比较复杂，这里不再赘述。
总结
ionicons-2-legacy 提供了方便、易用的图标字体库，可以大大简化前端开发中图标的使用。了解其源码结构和转换过程对于扩展和定制该字体库也非常有帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056d1681e8991b448e6e16