Fa Icons Disappear

Fontawesome icons missing in production Vite build? Here is a possible cause and solution

Posted: Fri Jan 20 2023

Vite logo banner

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โ€œ;

Network Icons

The Solution

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

icons.ts
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 ๐Ÿ˜…