什么是 icomoon-scss-mixins
icomoon-scss-mixins 是一个 npm 包，提供了一系列的 SCSS mixins，用于在项目中方便地使用 Icomoon 字体图标。使用这些 mixins，我们可以轻松地定义 Icomoon 图标的样式，而无需手动编写 CSS。
icomoon-scss-mixins 的 Github 地址是：https://github.com/Keyamoon/icomoon-scss-mixins。
安装 icomoon-scss-mixins
我们可以通过 npm 安装 icomoon-scss-mixins，安装命令如下：
npm install icomoon-scss-mixins --save-dev
使用 icomoon-scss-mixins
使用 icomoon-scss-mixins 很简单，我们只需要在 SCSS 中导入 icomoon-scss-mixins，然后调用定义好的 mixins 即可。例如，我们可以使用以下 SCSS 代码定义一个包含 Icomoon 图标的按钮：
@import "~icomoon-scss-mixins";
.btn {
@include icomoon-icon("rocket");
/* 其它样式 */
}在上面的代码中，我们使用 @import 指令导入了 icomoon-scss-mixins。然后，我们调用了定义好的 icomoon-icon mixin，传入了需要使用的 Icomoon 图标的名字（这里是 "rocket"）。最后，在 .btn 类中，我们可以添加其它的样式，来定义这个按钮的样式。
示例代码
以下是一个使用 icomoon-scss-mixins 的示例代码，用来显示一些包含 Icomoon 图标的按钮：
-- -------------------- ---- -------
--------- -----
----- ----------
------
---- ---- ---- ---
-------
------
------- ----------------- --------------------- -----------
------- ----------------- --------------------- -----------
------- ----------------- ---------------------- -----------
---- ---- ------- ---
-------
--------- -------------------- ---- -------
------- -----------------------
---- -
-------- -------------
-------- --- ----
----------- -------
------- -----
-------------- ------
----------------- --------
------ -----
---------- ------
--------------- ------
----------- ---------------- ---- ------------
------- -
----------------- --------
-
----- -
-------- -------------
------------- ------
-------- ---------------------
---------- ------
--------------- -------
-
---------------- ----- -
-------- -----------------------
-
---------------- ----- -
-------- --------------------------
-
-在上面的代码中，我们定义了一个 .btn 类，用于显示按钮的样式。在每个按钮中，我们使用 <span> 标签显示一个 Icomoon 图标，并增加了一些 hover 上去时的样式。
结论
通过这篇文章，我们介绍了如何使用 icomoon-scss-mixins 来方便地在项目中使用 Icomoon 字体图标。在实际的项目开发中，我们可以使用这个工具来提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005692781e8991b448e4b69