javascript 未找到模块：无法解析“@mui/icons-material/FileDownload”

pftdvrlh 于 2023-05-21 发布在 Java

关注(0)|答案(4)|浏览(144)

我已经安装了@material-ui/core和@material-ui/icons。
我正在尝试从材质图标导入 “FileDownloadIcon”。
正在安装 "@material-ui/core”：

npm i @material-ui/core

正在安装 "@material-ui/icons”：

npm i @material-ui/icons

这是我尝试导入 “FileDownloadIcon” 的方式：

import FileDownloadIcon from '@mui/icons-material/FileDownload';
<div className="download-file">
        <Button
                variant="contained"
                color="primary"
                onClick={() => getResume()}
            >
            <FileDownloadIcon />
            Download Resume
        </Button>
</div>

但它发生这样的错误 “模块未找到：无法解析'E：\frontend\src\component\Details'中的'@mui/icons-material/FileDownload'“
谁能告诉我问题出在哪里？

JavaScript

来源：https://stackoverflow.com/questions/69708504/module-not-found-cant-resolve-mui-icons-material-filedownload

4条答案

按热度按时间

gc0ot86w1#

文件下载图标是v5中增加的，v4中没有。您可以搜索v4图标here。要在旧版本的MUI中使用v5图标，只需复制源代码here：

function FileDownload(props) {
  return (
    <SvgIcon {...props}>
      <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
    </SvgIcon>
  );
}

**编辑：**如果您已经使用Material UI v5，则表示您缺少图标包。按照此处的安装指南进行安装：

npm install @mui/icons-material

赞(0）回复(0）举报 2023-05-21

dhxwm5r42#

您似乎正在使用Material-UI的v5。使用以下内容：

import { FileDownload } from "@mui/icons-material";

注意图标的名称，省略了Icon。然后使用它与按钮：

<div className="download-file">
  <Button
    variant="contained"
    color="primary"
    onClick={() => getResume()}
    startIcon={<FileDownload />}>
     Download Resume
  </Button>
</div>

赞(0）回复(0）举报 2023-05-21

thtygnil3#

使用从v4到v5的迁移，遵循此链接https://mui.com/guides/migration-v4/
您可以：
//使用npm npm install @mui/icons-material
或者这个：