如何使用图标的材料-ui v.1.3？
我对如何在当前版本的材料用户界面中使用图标感到困惑。
根据图标上的资料-ui文档，在SVG材料图标下
我们提供一个单独的NPM包，@material ui/图标，其中包括转换为
SvgIcon组件的1,000+正式材料图标。 (...) 您可以使用Matteral.io/tools/图标来查找特定的图标。在导入图标时，请记住图标的名称是PascalCase，例如：
delete公开为@material-ui/icons/Deletedelete forever公开为@material-ui/icons/DeleteForever
他们举的一个例子是：
// Import icon
import DeleteIcon from '@material-ui/icons/Delete';
// ...
// Use icon in react somewhere
render() { return (
<DeleteIcon />
)}这适用于许多图标，但不适用于文件-icon。
但是，我可以让它与：
<i className="material-icons">file_copy</i>什么是预期的方法，使这一工作？
我已经用npm install --save安装了@material-ui/icons和material-design-icons。(最初只有第一个图标，但在没有让所有图标工作之后，我也尝试使用第二个图标)
我还包括了来自<link />-tags的材料-用户界面安装指南
但是，我使用import FileCopy from '@material-ui/icons/FileCopy';导入
回答 2
Stack Overflow用户
发布于 2018-07-06 07:03:24
一旦安装了图标，它就很简单了：
import IconName from '@material-ui/icons/{icon-name-here}';
<IconName/>正如您可能已经注意到的，在@material-ui/icons文件夹中有相当多的图标缺失，尽管如果您导航到material.io上的svg文件，您可以选择下载svg图标，您可以在相同的约定中正常使用该图标，或者您可以使用SvgIcon和粘贴从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>然后，它可以作为一个组件导出，因此它是可重用的。以上内容将适用于您希望使用的副本图标。
Stack Overflow用户
发布于 2018-07-06 06:51:02
您可以通过浏览material-ui node_modules/@material-ui/icons来发现图标的名称:有时，它们与上的图标略有不同！
在本例中，来自Google站点的file_copy图标在material中被命名为"ContentCopy“：
import ContentCopy from '@material-ui/icons/ContentCopy';https://stackoverflow.com/questions/51212716
复制
相似问题
材料ui图标的React + Typescript错误
如何在材料UI 4.0中更改图标的大小？
使用Component Lab > Autocomplete特性编译材料UI中SVG图标的错误
角质材料。如何创建带有图标的？
如何缩小轮廓材料图标的宽度？
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
