如何导入 Material Design from react-icons 中的所有图标

Question

我在文档和google如何使用

上找不到任何地方

从“react-icons/”导入 * 作为 MaterialDesign

在渲染功能中。

感谢您的理解。

Answer 1

在一个项目中导入所有这些图标实在是太臃肿了。如果您想要 只是 Material 设计图标 的库，您可以使用 @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.

Answer 2

将所有图标合而为一；您必须使用此代码！

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

要使用图标：( )

<MaterialDesign.MdHelp />

注意：确保你已经安装了react-icons包！

如何导入 Material Design from react-icons 中的所有图标

how to import all icons in Material Design from react-icons

reactjs

create-react-app

react-icons

安装

用法