I noticed that using react-icons exponentially increases the bundle size. I have seen many questions on Stack Overflow, but none of them provided a satisfactory answer.
I have around 10 components that use a total of 20 icons from react-icons, and this increases the bundle size to 5MB.
Without using react-icons (but including 10 other custom icons in SVG format), the bundle size is only 495KB.
Can you suggest a solution to reduce the bundle size while still using icons for my project?
example of usage
import { LuWheatOff, LuSalad } from "react-icons/lu";
>Solution :
What you’re encountering is likely an issue with your bundler being unable to treeshake the react-icons/lu import: which is why you see such a bloated size as the entire icon library is imported as long as you import a single component from it.
It seems that you might need to do a deep import from @react-icons/all-files instead: refer to their readme https://react-icons.github.io/react-icons/
import { LuSalad } from "@react-icons/all-files/lu/LuSalad";
import { LuWheatOff } from "@react-icons/all-files/lu/LuWheatOff";