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?
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>
);