代码之家 › 专栏 › 技术社区 › Thomas Fauskanger

如何在材质UI v.1.3中使用图标?

google-material-icons material-ui reactjs

Thomas Fauskanger · 技术社区 · 6 年前

我对如何在当前版本的 material-ui .

根据 material-ui docs on icons ,低于 SVG材质图标 :

我们提供单独的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 -图标。

但是,我可以使用它:

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

npm install --save @material-ui/icons material-design-icons

<link /> material-ui installation guide

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

2 回复 | 直到 6 年前

li x 6 年前

一旦安装了图标,就相当简单:

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

<IconName/>

正如您可能注意到的,在 @material-ui/icons 文件夹,但是如果您导航到material.io上的SVG文件,您可以选择下载SVG图标,您可以在相同的约定中正常使用该图标,也可以使用 SvgIcon 并粘贴从 material.io 网站。

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

然后可以将其导出为组件,这样它就可以重用了。以上内容适用于您希望使用的复制图标。

ouni 6 年前

你可以发现 material-ui 浏览图标名称 node_modules/@material-ui/icons :有时它们与谷歌材料设计网站上的略有不同!

在这种情况下,来自Google站点的文件复制图标在Material UI中命名为“ContentCopy”:

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

推荐文章

ÐÐºÐ°ÑÐµÑÐ¸Ð½Ð° · 我无法更改全局背景材质ui

2 年前

Tanu · 使用三元运算符时获得Lint无嵌套三元错误

2 年前

user460567 · 在react类中,我在哪里可以编写条件语句?

2 年前

Octavian Niculescu · React material ui responsive drawer-我想从工具栏中删除填充

2 年前

ÐÐ°Ð½Ð°Ð¸Ð» ÐÐ¾Ð±ÑÐµÐ² · 从多次页面点击中获取最新页面

2 年前

Germán · 单击提交时,如果文本字段错误匹配,则显示错误提示

2 年前

code4cash · 无法在三值条件下呈现mui图标

2 年前

user8811409 · 材料界面:重建文本域谷歌文档“添加人员”功能

2 年前

Bug Miser · 如何在MUI输入字段上显示不同的错误消息?

2 年前

gjs · 使用材质UI元素的自适应字体大小功能

2 年前