如何在节点模块中包含新的谷歌材料设计图标？答案

【问题标题】：How to include new google material design icon inside node modules?如何在节点模块中包含新的谷歌材料设计图标？
【发布时间】：2020-10-12 11:02:59
【问题描述】：

目前正在做一个需要导入谷歌材料设计图标的项目。当我使用以下命令安装谷歌材料设计包时，很少有图标能够呈现：

npm install @material-ui/icons

npm install @material-ui/core

在我的JavaScript 文件中，我正在导入以下两个图标：

import EmojiObjects from '@material-ui/icons/EmojiObjectsSharp';

import {Construction} from '@material-ui/icons/Construc';

JavaScript文件的Header函数内部：

<ul class="navigation">
<li><a><Link to="/products"><AddShoppingCart/>Produkte</Link></a></li>
<li><a href="#"><Link to="/solutions"><EmojiObjects/>Lösungen</Link></a></li>
<li><a href="#"><Link to="/tools"><Construction/>Tools</Link></a></li>
<li><a href="#"><Link to="/tools">Unternehmen</Link></a></li>

请问我做错了什么？我没有在我的节点模块文件夹中看到与Constructionicon 相关的文件。

有没有办法插入新的谷歌材料设计图标？

我尝试使用以下网站解决问题，但没有Construction 图标的描述。

https://material-ui.com/components/material-icons/#material-icons

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

Construction 图标不是默认设置的一部分，正如您所提到的。但是，您可以使用 MUI 提供的 SvgIcon 组件，如 here 所述：

import SvgIcon from '@material-ui/core/SvgIcon'

function ConstructionIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> // <- replace with correct SVG
    </SvgIcon>
  );
}

要获取 SVG，您可以从 here 获取它，或者如果您真的想将其导入您的 node_modules，您可以使用 npm i material-design-icons，并按照 here 的说明将其包含到您的代码库中。

编辑：

选项 1：

根据提供的链接，在npm i material-design-icons 之后，您需要将 css 添加到您的项目中：

@import '~material-design-icons/iconfont/material-icons.css';

然后引用该图标：

<i class="material-icons">cloud_upload</i>

选项 2：

在您的styles.css 中导入网络字体：

@import url("https://fonts.googleapis.com/css2?family=Material+Icons&display=swap");

然后添加到你的组件（我的是App.js）：

import React from "react";
import Icon from "@material-ui/core/Icon";
import "./styles.css";

export default function App() {
  return <Icon>construction</Icon>;
}

在这里演示：https://codesandbox.io/s/crazy-glade-p6mc9?file=/src/App.js

【讨论】：

感谢您的回答。请问我应该为路径组件包含哪个路径？