如何从react图标导入材质设计中的所有图标

将所有图标包含在一个图标中;您必须使用此代码!

import * as MaterialDesign from "react-icons/md";

要使用图标:(<MaterialDesign.IconName/>)

<MaterialDesign.MdHelp />

注: 确保已安装react icons软件包!

在一个项目中导入所有这些图标会有很大的膨胀。如果你想 仅用于材质设计图标的库 你可以使用 @react-md/material-icons 。

安装

yarn add @react-md/material-icons @react-md/icon

用法

import { render } from "react-dom";

import {
  AccessAlarmFontIcon,
  AccessAlarmSVGIcon,
  Rotation3DFontIcon, // the sprite name for this was 3d_rotation.svg
  Rotation3DSVGIcon, // the sprite name for this was 3d_rotation.svg
  HomeFontIcon,
  HomeSVGIcon,
} from "@react-md/material-icons";

const App = () => (
  <main>
    <AccessAlarmFontIcon />
    <AccessAlarmSVGIcon />
    <Rotation3DFontIcon />
    <Rotation3DSVGIcon />
    <HomeFontIcon />
    <HomeSVGIcon />
  </main>
);

render(<App />, document.getElementById("root"));

Github

或者只是使用

yarn add @material-ui/core @material-ui/icons

然后调用图标

import MenuIcon from '@material-ui/icons/Menu'

在组件中添加 <MenuIcon/> 。有一种方法可以搜索 Material Icon 。