前言
在前端开发中，图标库是非常重要的资源，它可以使我们的页面更加美观，交互更加清晰。在很多场景中，我们需要大量使用图标，而手动的一个个去找对应的 iconfont 或下载对应图标的图片，是非常耗费时间成本的。因此，npm 上有很多优秀的图标库，比如 mui-icons，它是一个基于 Material UI 设计的图标库，包含了 750 个多彩、易于使用的图标，可以用于网络应用、行动应用等多种平台。
本篇文章将介绍如何在前端项目中使用这个 npm 包 mui-icons。
安装 mui-icons
在使用 mui-icons 前，我们需要先在我们的项目中安装这个包。我们可以在项目的根目录下使用如下命令安装：
npm install mui-icons --save
这个命令会将 mui-icons 包下载到项目中，并自动将依赖加入 package.json 文件中。
使用 mui-icons
安装完成后，我们就可以通过引入 mui-icons 包进行使用了。mui-icons 包中的图标分为不同分类，如 Action、Content 等等。我们可以通过下面的代码引入并使用 mui-icons 包中的图标：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ------------
-------- ------------------ -
------ -
-----
----- ----------------- --
----- -------------------------- --
----- ----------------------- --
------
--
-上面的代码中，我们先导入 React 和 Icon 组件，然后使用 Icon 组件通过传入不同名称的图标，渲染出我们需要的图标。
需要注意的是，图标的名称都是以分类名开头的，比如 ActionHome 就是属于 Action 分类的一个图标。
如果我们只需要使用该分类下的一部分图标，我们可以通过按需加载的方式引入。比如我们只需要使用 Action 分类下的 Home、Camera 和 Settings 三个图标，可以这样写：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ------------- -------------- - ---- -------------------
-------- ------------------ -
------ -
-----
----------- --
------------- --
--------------- --
------
--
-自定义样式
在使用 mui-icons 时，我们可以对图标进行一些自定义的样式设置。比如我们可以通过样式表来改变它的颜色、大小等，下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ------------
------ --------------------
-------- ------------------ -
------ -
-----
----- ----------------- ------------------- --
------
--
-上面的代码中，我们给 Icon 组件传入了 className="my-icon"，然后在 MyComponent.css 文件中设置该类的样式：
.my-icon {
color: red;
font-size: 32px;
}这样就可以将图标的颜色设置为红色，并将图标的大小设置为 32px。
结论
通过本文的介绍，我们知道了如何在前端项目中使用 npm 包 mui-icons，同时也了解了该包的基本使用方法和自定义样式的方式。这个 npm 包提供了大量的图标可供选择，非常适合在前端项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556ae81e8991b448d3785