React icons increase bundle size

Question

I know that this question was already asked. But I would like open it again, if there are any updates. I have problem with bundle size with using react-icons. Docs says to use @react-icons/all-files but there's problem that there are not all icons. I liked that library, because it saved me a lot of time, but now, when I figure out that problem with bundle size causes that library, it became kinda useless. Why only this library has so big size...

Babel.config.js

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
              "useBuiltIns": "entry",
              "modules": false
            }
        ],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

webpack.js

 module: {
        rules: [
            {
                test: /\.(ts|tsx|js|mjs|jsx)$/,
                exclude: /nodeModules/,
                use: {
                    loader: "babel-loader"
                }
            },
...

This bundle size is really ridiculous so I'm thinking of hiring a graphic designer to create my own icons.

Answer 1

You don't need to install @react-icons/all-files unless you are using meteorjs, gatsbyjs, etc.

Use npm i react-icons for standard modern project

I'm also faced huge bundle size when started using react-icons but some changes rescued me from this.

From:

import fa from 'react-icons' // ❌ using like fa.FaHome

above imports the entire module eventually gives large bundle file

To:

import {FaHome} from 'react-icons' // ✅ using like <FaHome/>

apparently budles only required icons