如何在 React 中使用 Material UI 图标?

IT技术 reactjs
2021-05-19 09:02:41

我是 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';

但是,这会在编译时产生错误。

有谁知道我如何添加新图标?或者,为什么这些图标没有明显的导演?

4个回答
  1. 安装材质图标: npm install @material-ui/core @material-ui/icons

  2. 导入您将使用的图标: import MenuIcon from '@material-ui/icons/Menu';

  3. 使用图标: <MenuIcon/>

您也可以使用https://material-ui.com/components/material-icons/搜索您需要的图标。

也可以通过 CDN 从公共文件夹调用 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" />
import EditIcon from '@material-ui/icons/Edit';

<EditIcon />

材质-ui

您是否尝试先安装依赖项。这是材料图标的链接