Dynamic load Material Design Icons in React

Icon.js

import React from "react";
import { Icon as MDIcon } from "@mdi/react";

class Icon extends React.Component {
  render() {
    let icon = require(`materialdesign-js/icons/${this.props.icon}`).default;
    if (!icon) {
      throw Error(`Could not find materialdesign-js/icons/${icon}`);
    }
    return <MDIcon path={icon} />;
  }
}

export default Icon;

index.js

import React from "react";
import Icon from "./Icon";

ReactDOM.render(
  <Icon icon="mdiAccount" />,
  document.querySelector("#root")
);

Does tree shaking work with this technique?

I don't know.

But the generated file is too big