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

Question

我正在尝试制作在页面加载时动态导入请求的 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;

它给出的警告是这样的：

编译警告

Answer 1

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

1. import包中的所有材质图标：

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

2. 我假设你从 api 中获取图标名称，最后你会得到如下所示的内容：

   var iconNamesArray = ["FitnessCenter","LocalDrink","Straighten"]
   

3. 最后加载你的图标，如下所示：

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

您的图标将出现在屏幕上。