Importing single icon to a project adds 227kb of overhead in a build

[josephfusco]

Do you want to request a feature or report a bug?

Seems like a bug but could be user error with how it is being imported.

What is the current behavior?

When an icon is imported into a project, all icons are being included in the build. This adds approximately 227kb of total overhead to a project even when only 1 icon is being used.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

To only include the icons that are imported.

Which versions of MDL, and which browser / OS are affected by this issue? Did this work in previous versions of MDL?

"@masonite/svg-icons": "1.2.0"

[tarikhamilton]

I don't know the exact solution, but it is related to tree-shaking https://webpack.js.org/guides/tree-shaking/

When doing a production build, webpack should remove unused imports. We use CRA for most things and while I need to do more research, I don't think CRA eliminates dependencies of dependencies.

You can see someone has the same approach as we do here. Not sure if solved, need more research:

facebook/create-react-app#6943 (comment)

I am in favor of making multiple SVG packages if the combined approach of the CRA method and our/FA method nullifies tree-shaking in CRA

[tarikhamilton]

I am pretty sure the problem is because the project is bundled. The bundle exports all of the icons as strings, but the strings are in the bundle. I think if this were to be packaged with the index.js referencing the dist/svg would solve it. Thinking back, this may have been what I was trying to do, but wasn't able to achieve it.

I think we would need to remove svg-inline-loader and use 'file-loader'. I may have a fix soon.