@material-ui/icons - Shell-Bash

@material-ui/icons 是一个基于 Material Design 设计系统的图标库，该库为开发者提供了大量高质量的图标，可以快速地为 React 应用添加图标。

安装

使用 npm 进行安装：

npm install @material-ui/icons

或者使用 yarn 进行安装：

yarn add @material-ui/icons

使用

在您的 React 组件中导入所需的图标，可以使用 ES Modules 或 CommonJS 模块导入方式：

import { AddCircle } from '@material-ui/icons';

或者：

const { AddCircle } = require('@material-ui/icons');

使用图标组件只需要在 JSX 中渲染即可：

<AddCircle />

图标列表

您可以在 Material-UI 官网 中找到所有可用的图标。在该网站上，您可以搜索并预览图标。

自定义图标

您可以使用 @material-ui/icons 的 create 方法从 SVG 文件创建自定义图标，如下所示：

import { create } from '@material-ui/icons';

export const CustomIcon = create({
  viewBox: '0 0 24 24',
  path: (
    <g>
      <path d="M11.5 20v-6.5H10l-5 5 5 5v-3.5h1.5z" />
      <path fill="none" d="M0 0h24v24H0z" />
    </g>
  ),
});

然后，您可以像使用内置图标一样使用自定义图标：

<CustomIcon />

总结

@material-ui/icons 提供了大量高质量的图标，使用方法简单，易于自定义。您可以在 Material-UI 官网上找到所有可用的图标，并预览每个图标。