极客教程React MUI Icons Display
React MUI 是一个UI库，提供了功能齐全的组件，为我们的生产就绪组件带来了我们自己的设计系统。MUI是一个用户界面库，为更快捷、更易于网页开发提供了预定义和可自定义的React组件，这些Material-UI组件是基于Google的Material Design而构建的。
在这篇文章中，我们将讨论 React MUI Icons Display 。可以使用MUI Icons的帮助在React应用程序中使用图标。MUI提供了以下三种添加图标的方法。
- Material Icons： 它以React组件（SVG图标）的形式导出。可以通过指定它们的图标名称并在应用程序中使用它们来直接导入。可以在此链接找到完整的图标列表。
- SVG Icons： 它用于在需要添加自定义图标的情况下使用。它扩展了原生元素
- Icon组件（字体图标）： 如果需要使用支持间距字体的图标，则使用此选项。MUI的 Icon 组件包装了图标间距，并帮助在React中正确显示图标。
字体图标和SVG图标之间哪种方法更好： 两种方法都可以，但是SVG更受欢迎，因为它允许代码拆分，支持更多图标，并在浏览器中呈现速度更快。
可访问性： 为了使图标可访问，必须确保区分装饰性图标和语义图标。
- 装饰性图标 是不会影响用户访问页面的图标。它们主要用于品牌和装饰。
- 语义图标 是在页面中具有按钮、切换和表单元素等用途的图标。删除这些图标可能导致用户体验问题。
API： 图标组件使用<Icon />和<SvgIcon /> API。
语法：
对于Material Icons：
import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';
对于SVG图标：
<SvgIcon>
<path ... />
</SvgIcon>
关于自定义图标组件：
import Icon from '@mui/material/Icon';
<Icon>IconName</Icon>;
创建React项目：
步骤1： 要创建一个React应用程序，您需要通过npm命令安装React模块。
npm create-react-app project name
步骤2 ：创建完你的React项目后，进入文件夹进行不同的操作。
cd project name
步骤3： 创建完ReactJS应用后，使用以下命令安装所需模块：
npm install @mui/material @emotion/react @emotion/styled
步骤4： 安装MUI图标：
npm install @mui/icons-material
项目结构：
运行应用程序的步骤：
npm start
示例1： 下面的示例演示了React MUI材料图标。
import React from "react";
import { GitHub, LinkedIn } from '@mui/icons-material';
function App() {
return (
<div>
<div style={{ textAlign: "center" }}>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Icons Display</h2>
</div>
<center>
<GitHub style={{ color: 'black', fontSize: 50 }} />
<LinkedIn style={{ color: 'blue', fontSize: 50 }} />
</center>
</div>
);
}
export default App;
输出：
示例2: 下面的示例演示了React MUI SVG图标。
import React from "react";
function App() {
return (
<div>
<div style={{ textAlign: "center" }}>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Icons Display</h2>
</div>
<center>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
class="bi bi-browser-chrome"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M16 8a8.001 8.001 0 0 1-7.022 7.94l1.902-7.098a2.995
2.995 0 0 0 .05-1.492A2.977 2.977 0 0 0 10.237 6h5.511A8
8 0 0 1 16 8ZM0 8a8 8 0 0 0 7.927 8l1.426-5.321a2.978
2.978 0 0 1-.723.255 2.979 2.979 0 0 1-1.743-.147 2.986
2.986 0 0 1-1.043-.7L.633 4.876A7.975 7.975 0 0 0 0
8Zm5.004-.167L1.108 3.936A8.003 8.003 0 0 1 15.418
5H8.066a2.979 2.979 0 0 0-1.252.243 2.987 2.987 0 0
0-1.81 2.59ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
/>
</svg>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
class="bi bi-browser-firefox"
viewBox="0 0 16 16"
>
<path d="M13.384 3.408c.535.276 1.22 1.152 1.556 1.963a7.98 7.98 0 0 1
.503 3.897l-.009.077a8.533 8.533 0 0 1-.026.224A7.758 7.758 0 0 1 .006
8.257v-.04c.016-.363.055-.724.114-1.082.01-.074.075-.42.09-.489l.01-.051a6.551
6.551 0 0 1
1.041-2.35c.217-.31.46-.6.725-.87.233-.238.487-.456.758-.65a1.5 1.5
0 0 1 .26-.137c-.018.268-.04 1.553.268 1.943h.003a5.744 5.744 0 0 1
1.868-1.443 3.597 3.597 0 0 0 .021
1.896c.07.047.137.098.2.152.107.09.226.207.454.433l.068.066.009.009a1.933
1.933 0 0 0 .213.18c.383.287.943.563
1.306.741.201.1.342.168.359.193l.004.008c-.012.193-.695.858-.933.858-2.206
0-2.564 1.335-2.564 1.335.087.997.714 1.839 1.517 2.357a3.72 3.72 0 0 0
.439.241c.076.034.152.065.228.094.325.115.665.18
1.01.194 3.043.143 4.155-2.804 3.129-4.745v-.001a3.005 3.005 0 0
0-.731-.9 2.945 2.945 0 0 0-.571-.37l-.003-.002a2.679 2.679
0 0 1 1.87.454 3.915 3.915 0 0
0-3.396-1.983c-.078 0-.153.005-.23.01l-.042.003V4.31h-.002a3.882
3.882 0 0 0-.8.14 6.454 6.454
0 0 0-.333-.314 2.321 2.321 0 0 0-.2-.152 3.594 3.594 0 0 1-.088-.383
4.88 4.88 0 0 1 1.352-.289l.05-.003c.052-.004.125-.01.205-.012C7.996
2.212 8.733.843
10.17.002l-.003.005.003-.001.002-.002h.002l.002-.002a.028.028
0 0 1 .015 0 .02.02 0 0 1 .012.007 2.408 2.408 0 0 0
.206.48c.06.103.122.2.183.297.49.774 1.023 1.379 1.543 1.968.771.874 1.512
1.715 2.036 3.02l-.001-.013a8.06 8.06 0 0 0-.786-2.353Z" />
</svg>
</div>
</center>
</div>
);
}
export default App;
输出：
参考： https://mui.com/material-ui/icons/