React MUI Material Icons

React MUI Material Icons

MUI or Material-UI ，它是一个React组件库。它使您能够构建自己的设计系统并更快地开发React应用程序。它基本上是由Google在2014年开发的设计语言。它使用了更多的设计和动画、网格系统，并提供了阴影和光效果。

Material UI图标 是一组预制的图标，可以从MUI组件系统中提取并嵌入到任何React应用程序中。MUI包含基于Google的Material Design准则的2000多个图标。MUI提供高质量的图标，非常灵活，您可以根据项目的需要更改颜色和调整图标的大小。

Material UI图标 有以下五种类型：

Filled

Outlined

Rounded

Two-tone

Sharp

语法：

让我们通过示例来理解。

创建 React 应用程序：

步骤1： 创建一个新的 React 项目。转到你的终端并输入以下命令。

npx create-react-app appname

步骤2： 在安装MUI图标之前，我们需要安装另外两个包。使用npm安装Material UI和Material Icons包。

npm install @mui/material @emotion/styled @emotion/react @mui/icons-material

步骤3： 前往材质图标页面并搜索图标。

点击您想要的图标，您将会看到一个弹出窗口。

现在复制下面你看到的导入语句。

import AppleIcon from '@mui/icons-material/Apple';

将其粘贴到您想使用它的组件中。

示例1： 此示例演示了如何使用 MUI-Icons。将此代码添加到 App.js 文件中。

import * as React from "react";

import AppleIcon from "@mui/icons-material/Apple";

import AndroidIcon from "@mui/icons-material/Android";

import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";

import Stack from "@mui/material/Stack";

import Button from "@mui/material/Button";

import SearchIcon from "@mui/icons-material/Search";

function App() {

return (

<>

);

}

export default App;

运行应用程序的步骤： 打开终端并输入以下命令。

npm start

输出：

示例2： 此示例演示了如何使用不同颜色的MUI-Icons。将以下代码添加到 App.js 文件中。

import * as React from "react";

import AppleIcon from "@mui/icons-material/Apple";

import AndroidIcon from "@mui/icons-material/Android";

import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";

import Stack from "@mui/material/Stack";

import Button from "@mui/material/Button";

import SearchIcon from "@mui/icons-material/Search";

function App() {

return (

<>

);

}

export default App;

输出:

参考： https://mui.com/material-ui/material-icons/