前言
在 web 开发过程中，我们经常使用字体图标来代替图片来减少页面资源加载时间。而近年来，移动端应用也开始大力使用字体图标来替代图片。因此，本文将为大家介绍一款移动端字体图标 npm 包 @beisen-phoenix/mobile-icon 的使用教程。
@beisen-phoenix/mobile-icon
@beisen-phoenix/mobile-icon 是由 Bisen-Phoenix 技术团队开发的一款移动端字体图标 npm 包。它包括了超过 1000 种图标和多种样式，可完美兼容多个移动端应用平台。通过使用 @beisen-phoenix/mobile-icon，您可以快速引入适合的图标样式，并能够充分自定义符号和颜色。
安装
使用 npm 安装 @beisen-phoenix/mobile-icon：
npm install @beisen-phoenix/mobile-icon --save
使用
使用 @beisen-phoenix/mobile-icon 只需要引入样式文件，在 html 中加入相应的 class 即可。以下是使用示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------------- ------------
----- ---------------- --------------- -----------------------------------------------------------------------------------------------
-------
------
-- ------------------ ----------------------
-------
-------其中，“mobile-icon-home” 是我们想要引用的图标样式。可以在官网上找到所有图标的名字。除了 mobile-icon-home 外，还有很多其他的图标样式可供使用。
自定义
你可以对图标样式进行自定义，而不仅是简单地修改其颜色、大小和对齐方式。通过对图标字体进行编辑，你可以调整符号的形状、大小和线宽等。以下是个性化自定义的示例：
-- -------------------- ---- -------
------------ -
------------ ---------------------
----------- -------
------------ ----
---- ---------------------------
-- --------------------- --
-
------------------- -
-------- --------
-- ------------ --
---------- -----
------ -----
------------ --- --- ------ ---- ---- ------
-- ------------ --- -- --
-以上代码将引入一个自定义的字体文件，并为其添加了一个自定义的图标。你也可以通过修改源码并进行编译的方式自定义你的图标字体库。
结束语
本文为大家介绍了如何使用 @beisen-phoenix/mobile-icon，以及如何自定义图标。除此之外， @beisen-phoenix/mobile-icon 还有许多其他的使用技巧和特殊功能等待你来探索。
我们希望这篇文章对您的 web 开发工作有些许帮助。如果您有其他的使用问题或建议，欢迎在官网上留言或联系我们。
参考文献
- @beisen-phoenix/mobile-icon. https://www.npmjs.com/package/@beisen-phoenix/mobile-icon. (Aug 10, 2021).
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/135955