在 React 中动态加载 Material-UI 图标答案

【问题标题】：Dynamically loading Material-UI Icons in React在 React 中动态加载 Material-UI 图标
【发布时间】：2023-03-04 16:21:01
【问题描述】：

我正在尝试制作动态导入请求的 Material-UI 图标的 React 组件，页面加载时。我在此处提供的解决方案有效，但会发出警告在编译时。此外，它会减慢项目的编译速度。

关于如何正确执行此操作的任何想法？ https://github.com/jurepetrovic/ordermanager_demo

主要逻辑在App.js中，第5-10行：

import React, { Component } from 'react';
import BarChartIcon from '@material-ui/icons/BarChart';

const MaterialIcon = ({ icon }) => {

  console.log("icon: " + icon);
  let resolved = require(`@material-ui/icons/${icon}`).default;
  return React.createElement(resolved);
}

class App extends Component {


  render() {

    return (
     <div>

        <MaterialIcon icon={"PowerSettingsNew"} />

     </div>
   );
  }
 }

export default App;

它给出的警告是这样的：

Compile warning

【问题讨论】：

任何解决方案@Jure ？

标签： reactjs webpack material-ui

【解决方案1】：

我终于找到了解决这个问题的最简单的方法：

import包内所有素材图标：

import * as Icons from '@material-ui/icons'

我假设你从你的 api 获取你的图标名称，最后你有这样的东西：
```
var iconNamesArray = ["FitnessCenter","LocalDrink","Straighten"]
```

最后像下面这样加载你的图标：

<div className="my-icons-wrapper-css">
  {
    iconNamesArray.map((el,ind)=>{
      let DynamicIcon = Icons[el]
      return(
         <DynamicIcon className="my-icon-css"/>
       );
   })
  }
</div>

你的图标会出现在屏幕上。

【讨论】：

我还必须导入所有图标，是的。