动态导入 React Material UI 图标

Question

主要思想是仅在需要时导入反应材质 UI 图标，或者在编译时我们不知道图标名称时动态导入。 （让我们保证我们会有有效的图标名称）。

我的方法是使用带有动态路径的 require 语句：

const IconComponent = require(`@material-ui/icons/${icon}`).default;

这工作正常，但出现了一些警告。

./node_modules/@material-ui/icons/utils/createSvgIcon.d.ts 3:8 模块解析失败：意外令牌 (3:8) 您可能需要适当的加载程序来处理此文件类型。 | 从“@material-ui/core/SvgIcon”导入 SvgIcon； | 声明 function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon; | | 导出默认 createSvgIcon；

./node_modules/@material-ui/icons/index.d.ts 4:5 模块解析失败：意外令牌 (4:5) 您可能需要适当的加载程序来处理此文件类型。 | 从“@material-ui/core/SvgIcon”导入 SvgIcon； |

类型 SvgIconComponent = 类型 SvgIcon; | | 导出常量 AccessAlarm：SvgIconComponent；

我的问题是：我们如何避免这些警告并以适当的方式进行动态导入？

Answer 1

您可以为此创建一个挂钩。 像下面这样。

//1) $ npm i string-similarity

import * as icons from '@material-ui/icons'
import stringSimilarity from 'string-similarity'

function useIcons(word) {
  const iconsNames = Object.keys(icons)

  var matches = stringSimilarity.findBestMatch(word, iconsNames)
  const bestMathch = matches.bestMatch.target
  const Icon = icons[bestMathch]
  return Icon
}
export default useIcons

import Icon from './myCustomeHooks/useIcons'
// other file like
const Icon =  useIcons('tablechart')  // not the name should start with capital letter in case you use reactjs


// now you can use the icon as you like
<Icon/>

---

请注意： import * as icons from '@material-ui/icons'与const * as icons = require('@material-ui/icons').default;

---

选项 2

import React from 'react';
import { loadCSS } from 'fg-loadcss';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { green } from '@material-ui/core/colors';
import Icon from '@material-ui/core/Icon';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '& > .fa': {
        margin: theme.spacing(2),
      },
    },
  }),
);

export default function FontAwesome() {
  const classes = useStyles();

  React.useEffect(() => {
    const node = loadCSS(
      'https://use.fontawesome.com/releases/v5.12.0/css/all.css',
      document.querySelector('#font-awesome-css'),
    );

    return () => {
      node.parentNode!.removeChild(node);
    };
  }, []);

  return (
    <div className={classes.root}>
      <Icon className="fa fa-plus-circle" />
      <Icon className="fa fa-plus-circle" color="primary" />
      <Icon className="fa fa-plus-circle" color="secondary" />
      <Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
      <Icon className="fa fa-plus-circle" fontSize="small" />
      <Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
    </div>
  );
}

Answer 2

首先是

(async () => {
  if (somethingIsTrue) {
    const { default: myDefault, foo, bar } = await 
import('/modules/my-module.js');
  }
})();

第二种方法是

let module = await import('/modules/my-module.js');

您可以调整的很好的工作示例是

const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
 link.addEventListener("click", e => {
 e.preventDefault();

 import('/modules/my-module.js')
   .then(module => {
     module.loadPageInto(main);
   })
    .catch(err => {
     main.textContent = err.message;
    });
 }