在 NPM Electron React 项目中使用 Material Design 图标答案

【问题标题】：Use Material Design Icons in NPM Electron React project在 NPM Electron React 项目中使用 Material Design 图标
【发布时间】：2019-06-19 22:14:01
【问题描述】：

我正在尝试弄清楚如何在 NPM Electron 项目中使用 Material Design 图标。该项目是使用 Webpack 4 设置的。根据Google Github page，它只是由npm install material-design-icons 安装的。根据Angular issue，必须将 Material CSS 文件的路径添加到配置中。在我的项目中，我使用 React，但没有任何这样的配置文件。所以我想从条目TypeScript文件App.tsx中导入CSS就像这样@import "~material-design-icons/iconfont/material-icons.css";，但是在启动项目时，Webpack找不到文件CSS文件。

必须做什么才能使用 Material Design 图标？我必须在 TypeScript/JavaScript 文件中导入它们吗？还是我必须为它设置 Webpack？

【问题讨论】：

使用community version of material design icons 可能更容易。您只需从@mdi/js 导入图标，就会有一个react component 用于渲染它们。

标签： reactjs typescript webpack sass material-design

【解决方案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 />

【讨论】：