安装 material-ui SVG 图标 - Shell-Bash

Material-UI 是一个流行的 React UI 框架，它集成了许多高质量的 SVG 图标，可以快速轻松地使用。

在开始之前，确保在项目中已经安装了 Material-UI，如果没有请执行以下命令进行安装：

npm install @material-ui/core

安装 material-ui SVG 图标

要安装 Material-UI SVG 图标，您需要执行以下命令：

npm install @material-ui/icons

这将安装 Material-UI 的全部 SVG 图标。

引入 SVG 图标

在您的 React 组件中，如需使用 SVG 图标，您需要首先导入它。例如，如果您要使用“向上”箭头图标，您可以在组件的顶部添加以下导入语句：

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

然后，您可以在组件中使用 <ArrowUpward> 标记来渲染该图标：

<ArrowUpward />

自定义 SVG 图标

如果您需要使用自定义 SVG 图标，您可以将其放置在项目的 public 目录中，并将其导入为文件路径，然后通过 <SvgIcon> 组件渲染它。

例如，如果您在 public 目录中有一个文件 my-icon.svg，您可以在组件中添加以下导入语句：

import { SvgIcon } from '@material-ui/core';
import myIcon from '../public/my-icon.svg';

然后，您可以使用以下代码来渲染它：

<SvgIcon>
  <img src={myIcon} />
</SvgIcon>

总结

本教程向您展示了如何安装和使用 Material-UI SVG 图标。通过使用 Material-UI，您可以快速轻松地在您的 React 项目中添加高质量的 SVG 图标。