4

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

根据 icon 上的material-ui 文档，在SVG Material icons下：

我们提供了一个单独的 NPM 包，@material-ui/icons，其中包括 1000 多个官方Material 图标转换为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 安装指南<link />中的-tags

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

4

2 回答 2

4

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

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

 import ContentCopy from '@material-ui/icons/ContentCopy';
于 2018-07-06T14:51:02.003 回答
4

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

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>

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

于 2018-07-06T15:03:24.807 回答