如何在材料用户界面v.1.3中使用图标?

Question

我对如何在当前版本的 material-ui 中使用图标感到困惑。

根据图标上的材料 UI 文档，在SVG 材质图标下：

我们提供了一个单独的 NPM 包，@material-ui/icons，其中包括转换为SvgIcon组件的 1,000+ 官方材质图标。

(...

您可以使用 material.io/tools/icons 查找特定图标。导入图标时，请记住图标的名称是 PascalCase，例如：

• delete显示为@material-ui/icons/Delete
• delete forever显示为@material-ui/icons/DeleteForever

他们展示的一个例子是：

// Import icon
import DeleteIcon from '@material-ui/icons/Delete';
// ...
// Use icon in react somewhere
render() { return (
<DeleteIcon />
)}

这适用于许多图标，但不适用于file_copy图标。

但是，我可以让它与：

<i className="material-icons">file_copy</i>

实现这项工作的预期方法是什么？

我已经安装了@material-ui/icons和material-design-iconsnpm install --save。(最初只有第一个，但在没有让所有图标工作后，我也尝试使用第二个图标(

我还包含了材料用户界面安装指南中的<link />标签

但是，我用import FileCopy from '@material-ui/icons/FileCopy';导入

Answer 1

一旦你安装了一个图标，它就相当简单了：

import IconName from '@material-ui/icons/{icon-name-here}';
<IconName/>

您可能已经注意到，@material-ui/icons文件夹中缺少很多图标，但是如果您导航到 material.io 上的svg文件，则可以选择下载可以在同一约定中正常使用的svg图标，或者您可以使用SvgIcon在Material Icons包中执行它们的操作，并粘贴从material.io网站获取的svg代码。

<SvgIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<circle cx="17" cy="4.54" r="2"/>
<path d="M14 17h-2c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3v-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5zm3-3.5h-1.86l1.67-3.67C17.42 8.5 16.44 7 14.96 7h-5.2c-.81 0-1.54.47-1.87 1.2L7.22 10l1.92.53L9.79 9H12l-1.83 4.1c-.6 1.33.39 2.9 1.85 2.9H17v5h2v-5.5c0-1.1-.9-2-2-2z"/>
<path fill="none" d="M0 0h24v24H0z"/>
</svg>
</SvgIcon>

然后可以将其导出为组件，以便可重用。以上将适用于您要使用的副本图标。

Answer 2

您可以通过浏览node_modules/@material-ui/icons来发现图标的material-ui名称：有时它们与Google材料设计网站上的图标略有不同！

在这种情况下，来自Google网站的file_copy图标在material-ui中被命名为"ContentCopy"：

import ContentCopy from '@material-ui/icons/ContentCopy';