关注套件大小，在React中使用动态Material-UI图标发出警告

Question

我非常喜欢React的材料界面，它非常简单易用。因此，我决定使用需要使用动态图标的项目来构建我的项目之一。

因此，我发现以下情况适用于这种情况：

interface Props {
    iconName: string,
}

const MaterialIcon = ({iconName}:Props) => {
    const resolved = require(`@material-ui/icons/${iconName}`).default;
    return React.createElement(resolved);
}

在我的组件中的用法：

<Avatar aria-label="Storage">
    <MaterialIcon iconName={'Storage'} />
</Avatar>

<Avatar aria-label="Web">
    <MaterialIcon iconName={'Web'} />
</Avatar>

该解决方案就像魅力一样工作，如以下示例所示：

问题和疑虑

1。终端上有一条烦人的警告消息

  

./ node_modules/@material-ui/icons/index.d.ts 4：5   模块解析失败：意外的令牌（4：5）   您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders   |从'@ material-ui / core / SvgIcon'导入SvgIcon；   |   类型SvgIconComponent = typeof SvgIcon;   |   |导出常量AccessAlarm：SvgIconComponent;

有什么方法可以消除此警告消息？

2。更改商品包大小

上述解决方案极大地改变了应用程序的捆绑包大小。

比方说，在整个应用程序中，我将仅使用5-10个图标。我对上述解决方案不太满意，也许值得以不同的方式包括它们。

有什么想法吗？

谢谢！