介绍
mdi-material-ui 是一个基于 Material Design Icon 的 React 组件库，可以方便地引入 Material Design 的图标到你的项目中。本教程将介绍如何使用该 npm 包。
安装
在使用 mdi-material-ui 之前，需要先安装它。在命令行中输入以下命令：
npm install mdi-material-ui --save
使用
安装完成后，在你的 React 项目中引入需要的图标即可。以下是使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------------
-------- ----- -
------ -
-----
------- ------------------- ----------------
-------
---------
------
--
-在这个例子中，我们引入了 Button 组件，并用它来创建一个带有 "Example" 文本的按钮。
Icon 组件
在 mdi-material-ui 中，Icon 是一个通用组件，可以用来显示任何 Material Design 的图标。以下是 Icon 组件的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ------------------
-------- ----- -
------ -
-----
----- ----------------------- -------- ------------- --
------
--
-在这个例子中，我们引入了 Icon 组件，并用它来显示一个带有用户头像的图标。path 属性指定了要显示的图标名称，size 属性指定了图标的大小，color 属性指定了图标的颜色。
所有图标
mdi-material-ui 包含了很多不同的 Material Design 图标。你可以在 Material Design 官网上找到该 npm 包所支持的所有图标。使用方法如下：
import { mdiIconName } from '@mdi/js';在这个例子中，我们引入了一个叫做 "mdiIconName" 的图标，并使用其显示一个图标。
总结
mdi-material-ui 是一个方便易用的 npm 包，可以让你轻松地在项目中引入 Material Design 图标。通过本教程，你学会了如何安装和使用该 npm 包，以及如何通过 Icon 组件显示 Material Design 图标。现在你已经掌握这个 npm 包的使用方法，可以将其应用到你自己的项目中了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/202961