如何在material-ui v.1.3中使用图标？

Question

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

根据material-ui docs on icons，SVG Material 图标下：

我们提供了一个单独的 NPM 包，@material-ui/icons，其中包括 1000 多个官方 Material icons 转换为 SvgIcon 组件。

(...)

您可以使用 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-icon。

但是，我可以使用它：

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

完成这项工作的预期方法是什么？

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

我还包含了来自material-ui installation guide 的<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.io 网站的 svg 代码来执行 Material Icons 包中的操作。

<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';