React-data-grid: Material-ui is a heavy dependency for a few icons

[markusjohnsson]

Is @material-ui/core and @material-ui/icons really needed as dependencies?

I was sort of surprised when checking in a package-lock.json file that so many packages had been installed when I added react-data-grid. After looking in to it, it seams that only icons are used from material-ui, which makes it seem kind of a heavy dependency.

I know a dependency does not equal me deploying a larger bundle, but I still want my dependencies to be manageable.

[oliviertassinari]

@markusjohnsson I would recommend these three tools to keep track of this "size" aspect when committing into new dependencies:

• Bundle size for the whole package and per module (scroll down): https://bundlephobia.com/
• Package size: https://packagephobia.now.sh/
• Depth (you also get licenses in this one but it's a different concern): https://npm.anvaka.com/

[oliviertassinari]

I might have a proposal to make the icons usable in this context. I would love to hear feedback on it, some of these items are optional:

1. We can expose the SVG path:

import Clear from '@material-ui/icons/Clear';

function ClearIcon() {
  return <svg viewBox="0 0 24 24" style={someStyles}>{Clear.path}</svg>;
}

You still get about 9 MB on your file system, for comparison:

• react-icons: 24MB: https://packagephobia.now.sh/result?p=react-icons
• font-awesome: 10MB: https://packagephobia.now.sh/result?p=%40fortawesome%2Ffontawesome-free
• ant-design: 14MB: https://packagephobia.now.sh/result?p=%40ant-design%2Ficons
• We can make @material-ui/core an optional peer dependency, which would make the yarn.lock impact minimal: https://npm.anvaka.com/#/view/2d/%2540material-ui%252Ficons, 3 dependencies, very likely only one new.
• Instead of a custom SVG component, we can expose a dedicated component from @material-ui/icons something similar to https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/iconBase.tsx.

I'm curious to learn more about the point where it's good enough. cc @eps1lon.

Maybe the best solution, in the context of this project, is to copy and paste the source of a few icons 😬.