随着前端技术的发展，我们越来越依赖于第三方库来提高我们的工作效率和开发质量。而随着 Material Design 的广泛应用，很多前端工程师也开始使用 @material-ui 框架来构建自己的 Web 应用程序。
本文将介绍一个常用的 npm 包 @material-next/icons，该包提供了大量的 Material Design 图标，可以在我们的 Web 应用程序中轻松添加漂亮的图标。
安装
在使用该包之前，我们首先需要在我们的项目中安装它。可以通过以下命令进行安装:
npm install @material-next/icons
安装完成后，我们就可以在我们的 JavaScript/TypeScript 代码中引入并使用它了。
使用
使用 @material-next/icons 包中的图标非常简单。我们可以使用 import 或 require 语句来从包中导入需要的图标。例如下面的 JavaScript 代码导入了一个名为 AcUnit 的图标：
import { AcUnit } from '@material-next/icons';我们还可以使用 Icon 组件来渲染导入的图标，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- --------------------
------ - ------ - ---- -----------------------
-------- ----- -
------ -
-----
------
------- --
-------
------
--
-
------ ------- ----上面这个组件将渲染一个带有 AcUnit 图标的 <Icon> 。请注意，我们可以将图标直接传递给 <Icon> 组件，并且不必使用任何其他任何属性来定义它的尺寸、颜色或任何其他样式属性。Icon 组件会自动将应用程序的主题和其他全局设置应用到图标上。
示例代码
下面是一个完整的代码示例，演示了如何在 React 应用程序中使用 @material-next/icons 包：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---- - ---- --------------------
------ - ------- ----------- - ---- -----------------------
-------- ----- -
------ -
-----
------
------- --
-------
------
------------ --
-------
------
--
-
-------------------- --- ---------------------------------在这个示例中，我们导入了 AcUnit 和 AccessAlarm 两个图标，并将它们放置在两个不同的 <Icon> 组件中。当我们运行这个应用程序时，我们会看到两个漂亮的图标渲染在屏幕上：
总结
使用 @material-next/icons 包，我们可以轻松地将 Material Design 图标添加到我们的应用程序中，而不必亲自设计或在网上寻找这些图标。使用本教程中的指南和示例代码，我们希望您可以快速入门并开始使用这个有用的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005693181e8991b448e4bb2