简介
muix-icons-w 是一款基于 Material Design 风格的 icon font，为开发者提供了大量的图标和样式，并且支持各种不同大小、颜色和样式的配置。此外，muix-icons-w 的 npm 包已经发行并且能够方便地在项目中使用。
本文将详细介绍如何使用 muix-icons-w npm 包来在 Web 前端项目中快速集成 Material Design icon。
安装
在使用 muix-icons-w 之前，需要先安装它的 npm 包。打开命令行并输入以下命令以安装：
npm install --save muix-icons-w
使用
安装完成后，就可以在项目中引入 muix-icons-w 了。在 HTML 文件中，可以如下使用它的图标：
<i class="muix-icon icon-check"></i>
这里的 muix-icon 是必要的 class，它会告知浏览器将该元素渲染为 icon，类似于 font-awesome, 图标的名称为 icon-check。此外，你还可以为该元素指定其他 class 来进行样式设置。
如果需要更改 icon 的大小，可以为元素添加以下 class：
- muix-sm（小图标）
- muix-lg（大图标）
- muix-xl（超大图标）
- muix-xxl（特大图标）
具体实现代码为：
<i class="muix-icon icon-check muix-xl"></i>
然后就会看到特大的 icon-check 图标。
在 CSS 文件中，可以使用 muix-color-* 类来为 icon 设置颜色。muix-color-* 类有以下几个：
- muix-color-default（默认颜色）
- muix-color-primary（主题色）
- muix-color-accent（强调色）
- muix-color-warn（警告色）
- muix-color-success（成功色）
- muix-color-danger（危险色）
可以参考以下实现代码：
-- -------------------- ---- ------- ---------- - ---------- ----- - ------------------- - ------ ----- - ------------------- - ------ -------- - -- -- ------- -- -- -------------------------------- - ----------------- ----- ------ ----- - ------------------ - ------ -------- - ---------------- - ------ -------- - ------------------- - ------ -------- - ------------------ - ------ -------- -
最后还可以为 icon 添加动画等效果：
<i class="muix-icon icon-check muix-xl animate__animated animate__tada"></i>
这里使用了 animate.css 库来添加动画效果，可以将该库引入到项目中，并将上述类名添加到元素中。
总结
如果你正在寻找一款 Material Design 风格的 icon font，muix-icons-w 是一个不错的选择。它具有丰富的图标，支持不同的颜色、大小和样式设置，并且非常易于使用。在实际项目中，我们只需要在 HTML 文件中引入相应的元素并添加 class 即可轻松添加 icon。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ----------
----- ---------------- ----------------------------------------------------------------
----- ---------------- -----------------------------------------------------------
-------
---------- -
---------- -----
-
------------------- -
------ -----
-
------------------- -
------ --------
-
-------------------------------- -
----------------- -----
------ -----
-
------------------ -
------ --------
-
---------------- -
------ --------
-
------------------- -
------ --------
-
------------------ -
------ --------
-
------------------ -
------------------- ---
-------------------- -----
-
-------------- -
--------------- -----
-
--------
-------
------
-- ---------------- ----------------
-- ---------------- ------------------ ------- ----------------- ----------------- -------------------
-- ------------------- --------- --------- ------- ------------------- --------------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bf681e8991b448e5aac