Fa Icons Disappear

The Bug

I recently ran into an issue where Fontawesome icons would show for a moment, and then disappear. This is very difficult to debug because:

• It only happened in production
• Other icons were working
• It was seemingly random

When a Fontawesome icon is imported with a treeshakeable import in multiple files, it disppears the 2nd time the import is invoked. — We can verify this in the network tab. Our icon is coming down as an empty object.

💡Context A treeshakeable import in Fontawesome is when we import like this:

• import { faDiscord } from “@fortawesome/free-brands-svg-icons/faDiscord“;

The Solution

We create a single file for importing icons that are used in multiple places in the project

import {
  definition as discord 
} from "@fortawesome/free-brands-svg-icons/faDiscord";
export const faDiscord =  discord

Now instead of importing from @fortawesome, we instead import from icons.ts

Thats it! — I hope you find this helpful, as this was a wild goose chase for me 😅