Question

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

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

我们提供了一个单独的NPM软件包@material-ui/icons，其中包括将1,000多种官方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 图标。

但是，我可以使用它：

<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

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

在这种情况下，来自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 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>

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

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

2 个答案: