动态加载材料-用户界面图标在反应中

Question

当页面加载时，我试图制作动态导入请求的资料-UI图标的React组件。这里给出的解决方案可以工作，但在编译时会发出警告。此外，它还减慢了项目的编译速度。

知道如何正确地做这件事吗？演示

主要逻辑在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包中的所有材料图标： 从“@material ui/图标”导入*作为图标
2. 我假设您从api中获取您的图标名，最后您将得到如下内容： 变量iconNamesArray = "FitnessCenter“、"LocalDrink”、“直”
3. 最后，像下面这样加载您的图标：

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