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

Question

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

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

We provide a separate NPM package, @material-ui/icons, that includes the 1,000+ official Material icons converted to SvgIcon components.

(...)

You can use material.io/tools/icons to find a specific icon. When importing an icon, keep in mind that the names of the icons are PascalCase, for instance:

delete is exposed as @material-ui/icons/Delete

delete forever is exposed as @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

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

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

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

Answer 2

安装图标后就相当简单了：

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

<IconName/>

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

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

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

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

How to use icons in material-ui v.1.3?

reactjs

material-ui

google-material-icons