FontAwesome Icons not working properly in react/next app

So I'm using FontAwesome in my Next app. I followed the React guide on the FA website and the icons are loading in fine (though initially invisible), but none of their styling options work and they don't scale with font-size as they're meant to.

Am I doing something wrong? I want the icons to scale on font-size and have the ability to manipulate them with the built in options such as adding 'spinner', 'fixedWidth' etc.

package.json

"dependencies": {      "@fortawesome/react-fontawesome": "^0.1.14",      "@fortawesome/fontawesome-svg-core": "^1.2.34",      "@fortawesome/pro-regular-svg-icons": "^5.15.2",    }  

_app.js

import { library } from '@fortawesome/fontawesome-svg-core'  import { faHeart } from '@fortawesome/pro-regular-svg-icons'  library.add( faHeart )  

header.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'    export default function Header() {      return (      <header><FontAwesomeIcon icon={['far', 'heart']} /></header>    )  }  

style.css

header {   font-size: 20px; (does nothing to the icon)  }    svg {   width: 20px; (works)  }  

The SVG loads into the page just fine, but doesn't inherit size from it's containers font-size. None of the other styling options work either, such as <FontAwesomeIcon icon={['far', 'heart']} spinner/>

I have to target the SVG directly with CSS and set a width in order for them to be sized.

https://stackoverflow.com/questions/66539699/fontawesome-icons-not-working-properly-in-react-next-app March 09, 2021 at 09:51AM