简介
BEM 是一种 Web 前端开发中的命名规范，用于帮助团队成员共同维护 CSS 代码，从而提高开发效率。而 Font Awesome 则是一套常用的图标库，提供了丰富的图标资源。在前端领域，常常需要将两者结合起来使用。而这时候，就可以使用 npm 包 bem-font-awesome-icons。
bem-font-awesome-icons 是一个 npm 包，提供了基于 BEM 命名规范的 Font Awesome 图标使用方式。这使得开发者能够更加方便地使用 Font Awesome 图标，并且更加易于维护和管理。本文将介绍如何在前端项目中使用 bem-font-awesome-icons。
安装
在使用 bem-font-awesome-icons 之前，需要先安装该 npm 包。可以通过 npm 命令进行安装：
npm install bem-font-awesome-icons --save
这样就能在项目中使用 bem-font-awesome-icons 了。
使用
引入
在代码中引用 bem-font-awesome-icons 有两种方式：
- 直接引入 JS 文件。
<script src="./node_modules/bem-font-awesome-icons/icons.js"></script>
- 在 JavaScript 中引用。
import icons from 'bem-font-awesome-icons/icons'
语法
bem-font-awesome-icons 支持以下 BEM 命名规范：
- Block（块）：用作一个单独的组件。块应该是不依赖外在元素上才能被定义的。
- Element（元素）：块的一部分，可以被单独定位或者在块内部重复使用。
- Modifier（修饰符）：用于改变块或元素的外观或行为。
bem-font-awesome-icons 同时支持以下几种调用方式：
- 直接使用 FontAwesome 图标库的语法（该方式需要引入 font-awesome 样式库）。
<i class="fa fa-search"></i>
- 在 BEM 命名结构下使用 FontAwesome 图标库的语法。
Block：
<i class="fa search-block__icon"></i>
Element：
<i class="search-block__input-icon fa fa-search"></i>
Modifier：
<i class="search-block__input-icon fa fa-search search-block__input-icon--large"></i>
示例
我们可以通过以下代码来使用 bem-font-awesome-icons：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------------
----- ---------------- ------------------------------------------------------------
-------
------
---- ---------------------
------ ----------- --------------------------- ---------------------
-- ------------------------------- -- ---------------
------
------- --------------------------------------------------------------
-------
-------这里我们首先引入了 font-awesome 样式库，然后定义了一个名为 search-block 的块，包含一个输入框和一个放置搜索图标的元素。其中搜索图标使用了 bem-font-awesome-icons 提供的 BEM 命名规范。
总结
bem-font-awesome-icons 是一个非常实用的 npm 包，使得我们在前端开发中能够更加方便地使用 Font Awesome 图标，并且能够遵循 BEM 命名规范进行管理。通过本文的介绍，相信读者能够使用 bem-font-awesome-icons 更加轻松地管理和使用 Font Awesome 图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbe81e8991b448da540