在NPM Electron React项目中使用材料设计图标

Question

我正在尝试弄清楚如何在NPM电子项目中使用材料设计图标。这个项目是用Webpack 4安装的。根据Google Github page的说法，它只是用npm install material-design-icons安装的。根据此Angular issue，必须将材料CSS文件的路径添加到配置中。在我的项目中，我使用了React，但是没有任何这样的配置文件。所以我想从入口TypeScript文件App.tsx里面导入CSS，就像这样的@import "~material-design-icons/iconfont/material-icons.css";，但是当开始项目的时候，Webpack没有找到CSS文件。

要使用材质设计图标，必须执行哪些操作？我必须在TypeScript/JavaScript文件中导入它们吗？或者我必须为它设置Webpack吗？

Answer 1

同时，我通过将以下代码导入到package.json中的dependencies部分解决了这个问题

"@material-ui/icons": "4.0.0",

例如，在TypeScript React组件中，导入以下内容：

import Add from '@material-ui/icons/Add';
import Edit from '@material-ui/icons/Edit';

然后，我可以将其用作render()方法中的返回值：

<Add />
<Edit />