Doesn't tree shake when bundled with Webpack and Create React App

[thomscoder]

Describe the bug
React-icons 4.2.0 when bundled with Webpack is importing the entire libraries even when specified to import just one icon. Resulting in 95% of unused code.

import { CgArrowsShrinkH as Shrink } from 'react-icons/cg'

Expected behavior
I'm expecting to see only the Shrink icon imported.

Screenshots

Version: 4.2.0
OS: Windows 10
Browser: Chrome 102.0.5005.11

[codsane]

You may need to import from @react-icons/all-files instead as described here: #154 (comment)

[thomscoder]

You may need to import from @react-icons/all-files instead as described here: #154 (comment)

Oh alright, will do. Thank you very much @codsane

[fregante]

I'm experiencing this issue through https://github.com/rjsf-team/react-jsonschema-form

To the point that most of the weight comes from react-icons, a sub-dependendency of react-jsonschema-form. I looked at their code and they're using the same code suggested in your readme. How come it's failing? Other libraries are being treeshaken, like Lodash.

[fregante]

As seen by the recent comments and mentions in #154, this issue persists and I think it should be fixed in the main package instead of forcing people to discover this on their own and have to fix it every time.

[thomscoder]

As seen by the recent comments and mentions in #154, this issue persists and I think it should be fixed in the main package instead of forcing people to discover this on their own and have to fix it every time.

I agree.
Switched to another package for now.

Thanks to you both, guys!

[villesau]

What is @react-icons/all-files? Looks like it's not been updated in years.

[codsane]

What is @react-icons/all-files? Looks like it's not been updated in years.

@villesau Unfortunately it seems this is due to a limitation with the number of files allowed in a package, see #593 and #568.

[villesau]

Could make sense to publish all the icon packs as treeshakeable individual packages then 🤔 such as @react-icons/md etc.