I have started a new NextJs app (with the beta app feature) and it doesn't seem to be able to load icons when in a client side component.
It is throwing errors like Could not find icon { prefix: 'far', iconName: 'home' }
I am using the @fortawesome/react-fontawesome to render the icons as recomened in the FA setup. And they successfully work when in server side components, but I think it fails in client side as it doesn't see the config.
FA is configured like this in the new layout.tsx file.
import { config, library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fal } from '@fortawesome/pro-light-svg-icons';
config.autoAddCss = false;
library.add(fas, far, fal);
The using a icon like so <FontAwesomeIcon icon={['far', 'home]} />
What sort of config do I need an be loaded at the client components?
I have tried dumping all the imports into a client side component - that fixes it, but then lots of bloats the app by bundling FA everywhere!
