react font awesome renders big icon until scales down

Question

I am using react server side rendering and client side rendering (hydrate) with fontawesome but when page is rendering, the icon is huge until it scales down and the correct size class is added to the icon OR the css is loaded (I dont know).

Answer 1

Turn off autoAddCss:

import { library, config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false

Load in CSS directly in SCSS file:

@import 'node_modules/@fortawesome/fontawesome-svg-core/styles'

Answer 2

Please, see this article:

https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering

In react you need to this in your layout or global config:

import { library, config, dom } from '@fortawesome/fontawesome-svg-core' 
config.autoAddCss = false
...

And in your style put this:

<style jsx global>{`
  ...

  @import url('https://fonts.googleapis.com/css?family=Didact+Gothic');

  ${dom.css()}

  ...
`}</style>

Answer 3

This is an issue with the CSS loading after the page renders initially, as you have guessed. The solution that I have found is to either make sure the CSS on the server renders on the same page as the icon (depending on what frameworks you are using to manage stylesheets), or to make sure that whatever .css file you are using for this gets loaded before the html renders. This can be done by making sure the link tag for the stylesheet appears near the top of your page.