NextJS React production ready with fontawesome icons

Question

How should I decreate the size of the bundles? We added fortawesome/fontawesome, but only some icons are used, about 20. Is it true that the bundle contains all the icons from the fontawesome icon sets?

Partial package.json content:

"@fortawesome/fontawesome-svg-core": "6.5.1",
"@fortawesome/free-solid-svg-icons": "6.5.1",
"@fortawesome/react-fontawesome": "0.2.0",

I see in the output whenever I build the project:

[BABEL] Note: The code generator has deoptimised the styling of node_modules\@fortawesome\free-solid-svg-icons\index.mjs as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of node_modules\lodash\lodash.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of node_modules\@fortawesome\free-solid-svg-icons\index.mjs as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of node_modules\lodash\lodash.js as it exceeds the max of 500KB.

Can I do something do decrease the size?

Answer 1

Yes, you can decrease the bundle size by only importing the specific icons you need instead of importing the entire @fortawesome/free-solid-svg-icons package:

// icons.js

import { library } from '@fortawesome/fontawesome-svg-core';
// import only icons you need
import { faCoffee, faCheckCircle, faTimesCircle } from '@fortawesome/free-solid-svg-icons';

// Add icons to the library 
library.add(faCoffee, faCheckCircle, faTimesCircle);

Then you can use the imported icons like this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const Component = () => (
  <div>
    <FontAwesomeIcon icon="fa-coffee" />
    <FontAwesomeIcon icon="fa-check-circle" />
    <FontAwesomeIcon icon="fa-times-circle" />
  </div>
);