React-Icons is blowing up the package size

[rguerrettaz]

Is your feature request related to a problem? Please describe.
Yes, from the screenshots below you can see the usage of react-icons balloons the sized of the package. You can see in 0.4.8 (which I understand did not work properly) it was taking up 1MB (which seems like quite a lot anyway) and in 0.4.9 it takes up 3.8MB.

Version 0.4.8

Version 0.4.9

The total package size when bundled with Webpack is right now is 4.56MB (screenshot below). I am a paying customer and use 7 components out of the library, making it hard to justify including it in my project. I understand this a pre-release, but am hoping there's a quick way to reduce the size of the package.

Describe the solution you'd like
Perform an optimization pass on the package to reduce the size.

Describe alternatives you've considered
Replace react-icons with hero-icons?

Additional context

[rluders]

We are planning to replace the react-icons with https://github.com/themesberg/flowbite-icons - but first, we need to create the package for react. :)

[tulup-conner]

OK, I have looked into this a lot now.

This is a pretty popular known issue that appears to have still not been resolved by the maintainers of react-icons: react-icons/react-icons#154 There doesn't appear to be a solution for all users.

It looks like Bundlephobia agrees that react-icons is taking up a bunch of space in the final package: https://bundlephobia.com/package/flowbite-react@0.4.11 However, the GZipped size of the package is still 49 KB. Additionally, if you look at older versions of the package, you'll notice that the size of the react-icons chunk has actually increased in total KB as we have added more icons, which would imply that Bundlephobia's script is tree-shaking correctly.

So I ran webpack-bundle-analyzer on our Next.js - the entire react-icons library is in the server bundle, but not the client bundle. That seems to align with the total download size of flowbite-react.com's JS which is about 200 KB minified/GZipped/Brotli'd/whatever else by Vercel.

In other words, it isn't like you are loading 8 MB of icons when someone visits one of your Next.js pages. Regardless, this shouldn't be happening in server or client bundle. I believe what's happening here is an issue with react-icons but I don't really know how we can fix it on our end.

The only specific suggestion I saw in the react-icons issue thread is that we could change the imports to load directly from individual files

import HiHome from "react-icons/lib/hi/home";

But that isn't how react-icons is documented to be used, so, I don't like it. That's also a substantial refactor.

I don't really know what to do about this issue, but I wanted to share what I learned.

[tulup-conner]

This isn't relevant now that we have a Flowbite Icons library available to us. We'll resolve this naturally by migrating. But thank you for pointing this out!