reactjs 如何在React中使用Material UI图标？

zqry0prt 于 2023-05-22 发布在 React

关注(0)|答案(8)|浏览(163)

我是React的新手，正在使用一个现有的React组件。我需要包括一个图标，并注意到一些已经被带入，如：

import KeyboardArrowLeftIcon from 'material-ui/svg-icons/action/keyboard-arrow-left';

我找不到文件夹（material-ui/svg-icons/action/），但尝试添加新图标：

import KeyboardArrowRightIcon from 'material-ui/svg-icons/action/keyboard-arrow-right';

但是，这会在编译时生成错误。
有谁知道如何添加新图标吗？或者，为什么这些图标没有明显的导演？

reactjs

来源：https://stackoverflow.com/questions/50829728/how-to-use-material-ui-icons-in-react

8条答案

按热度按时间

agxfikkp1#

1.安装材质图标：npm install @material-ui/core @material-ui/icons
1.导入要使用的图标：import MenuIcon from '@material-ui/icons/Menu';
1.使用图标：<MenuIcon/>
您也可以使用https://material-ui.com/components/material-icons/来搜索所需的图标。

赞(0）回复(0）举报 2023-05-22

lvmkulzt2#

也可以通过CDN从public文件夹调用index.html中的链接来导入它们。
简单地复制和粘贴下面的链接在头.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

赞(0）回复(0）举报 2023-05-22

gdrx4gfi3#

import EditIcon from '@material-ui/icons/Edit';

<EditIcon />

material-ui

赞(0）回复(0）举报 2023-05-22

byqmnocz4#

有一个material-icons-react库，使使用图标容易。
https://www.npmjs.com/package/material-icons-react
这里有一个快速的图标参考。https://material.io/resources/icons/?icon=nature_people&style=baseline

赞(0）回复(0）举报 2023-05-22

68bkxrlz5#

您是否尝试先安装依赖项。这里是Material Icons的链接

赞(0）回复(0）举报 2023-05-22

35g0bw716#

要将图标从Material-UI导入到React.js中，必须使用Pascal Case（keyboard-arrow-right变为KeyboardArrowRight）。关于路径，我使用'import ArrowBack from '@material-ui/icons/ArrowBack '，您可能没有在material-ui中使用“at”符号（安装时），但您应该检查您指向的目录是否包含大量PascalCase中的Icon名称的JS文件（“AccessAlarm.js”是我项目中显示的第一个图标/文件）。

赞(0）回复(0）举报 2023-05-22

j8ag8udp7#

要做到这一点，请添加以下命令行之一，具体取决于您是使用npm还是yarn来执行此操作：

npm install @material-ui/core

yarn add @material-ui/core

here提供了详细的分步指南。

赞(0）回复(0）举报 2023-05-22

6ss1mwsb8#

下面的导入对我有用。

import ReplayIcon from "@mui/icons-material/Replay";

赞(0）回复(0）举报 2023-05-22

我来回答

reactjs 如何在React中使用Material UI图标？

8条答案

相关问题

热门标签

最新问答