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

Question

我在项目中使用了材质用户界面,在导入材质图标时遇到了一些麻烦,我的代码是从材质UI复制的(版本:"material-ui":"^ 1.0.0-beta. 41","material-ui-icons":"^ 1.0.0-beta.36",)docs,就像这样:

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

我也运行了npm install material-icons.我的chrome控制台中的错误是:

./src/index/musicCard.js找不到模块:无法解析'C:\ Users\wenji\Desktop\myblog\src\index'中的'@ material-ui/icons/PlayArrow',我尝试了这个:

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

还有这个:

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

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

Answer 1

图标不是material-ui/core的一部分,因此必须使用两个命令进行安装:

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

Answer 2

对于您需要的最新版本

npm install @mui/icons-material

由于Material-UI 现在是 MUI。

如果我们需要一个特定的图标，我们可以这样，

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

这里是所有可用的图标。

Answer 3

解决后,应将图标模块添加到依赖项中,使用npm install @ material-ui/icons或使用yarn:yarn add @ material-ui/icons

Answer 4

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

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

这是因为在 Mac 上它不区分大小写，而在 Linux 上则区分大小写。

所以

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

在 Mac 上可以运行，但在 Linux 上就失败了。

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

所以正确的导入方式是：

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