如何导入材质 ui 图标？我在使用 Material ui 图标时遇到了一些问题

Question

我在我的项目中使用了带有react的材质UI，在导入材质图标时遇到了一些麻烦，我的代码是从材质UI复制的（版本：“material-ui”：“^1.0.0-beta. 41", "material-ui-icons": "^1.0.0-beta.36",) 文档，就像这样：

import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import SkipNextIcon from '@material-ui/icons/SkipNext';

而且我已经运行 npm 安装材料图标。 我的 chrome 控制台中的错误是：

./src/index/musicCard.js Module not found: Can't resolve '@material-ui/icons/PlayArrow' in 'C:\Users\wenji\Desktop\myblog\src\index' 我试过这个：

import SkipPreviousIcon from 'material-ui/icons/SkipPrevious';

和这个：

import SkipPreviousIcon from '@material-ui-icons/SkipPrevious';

但没有任何区别，所以有人可以帮助我吗？

Answer 1

图标不是 material-ui/core 的一部分，因此必须使用两个命令安装它。

如果你使用 npm

npm install @material-ui/core
npm install @material-ui/icons

如果你使用纱线

yarn add @material-ui/core
yarn add @material-ui/icons

Answer 2

解决了，应该将图标模块添加到依赖项中。 使用 npm

npm install @material-ui/icons 

或使用纱线

yarn add @material-ui/icons 

Answer 3

将导入路径从@mui/icons-material/改为@material-ui/icons/

这不是一个 100% 有效的解决方案，因为我还没有能够导入一些图标（例如ConnectWithoutContact ）

不管怎样，这个改变已经救了我好几次了，所以这里是一个例子：

// Initial
import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';

// Fixed
import PermContactCalendarIcon from '@material-ui/icons/PermContactCalendar';

Answer 4

我刚刚解决了一个奇怪的问题（但在我发现原因后就不那么奇怪了）

在 mac 上它可以工作，但是当我部署到 linux 时它失败并且找不到图标

这是因为在 mac 上它不区分大小写，而 linux 是

所以

import DeleteForEver from '@material-ui/icons/DeleteForEver'

在 mac 上工作但在 linux 上失败

该文件实际上被命名为“DeleteForever”

所以正确的导入方法是

import DeleteForever from '@material-ui/icons/DeleteForever'

Answer 5

对于您需要的最新版本

npm install @mui/icons-material

由于Material-UI 现在是 MUI

Answer 6

material ui 不再提供来自“@material-ui/icons”的图标。 相反，您需要从"@mui/icons-material"导入图标。 因此，如果您使用最新版本并使用npm运行项目，则需要执行以下命令 -

npm install @mui/icons-material

如果你使用纱线然后运行以下 -

yarn add @material-ui/icons

现在你已经准备好像这样使用你的材质图标ExampleMaterialIcon -

import ExampleMaterialIcon from '@mui/icons-material/ExampleMaterialIcon';

Answer 7

依赖项：

"@material-ui/core": "^4.12.4",
"@material-ui/icons": "4.11.3",

例子：

import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";

 <FavoriteIcon
            fontSize="large"
            style={{ fill: "red", stroke: "red" }}
  />

 <ShareIcon fontSize="large" />