Font Awesome Optmization

Help
1

I’m having trouble optimizing my NextJS project with Font Awesome. Even though I am following the directions for importing individual icons for tree-shaking, the First Load JS always comes out larger than it probably should be.

import { faCircleNotch } from "@awesome.me/kit-****/icons/classic/regular";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

With this icon setup, the first load JS of my app route is 1.1 MB.

By changing to

import { LoaderCircle } from "lucide-react";

the first load JS of the same app route changes to 182K.

I have tried adding this to my next.config.js file

experimental: {
    optimizePackageImports: ['@awesome.me/kit-****/icons/classic/regular','@awesome.me/kit-****/icons/classic/solid']
  }

but it seems to make little to no difference.

I am using the latest version of Font Awesome 6, along with Next 15.3.4 and React 19.1.

I would rather stick with Font Awesome, since it offers way more icons than Lucide does.

If anyone has any experience with this, I would greatly appreciate any help you can provide. I’m also waiting for the new Font Awesome version 7 to be released soon, which also may address this issue.

4

They have further instructions for NextJS here that are a bit hard to find, can you try this and see if that gets your bundle size into reasonable territory?

5

Thanks for that. I had already implemented those NextJS instructions, and they seem mostly to do with correcting icon display.

6

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.