search

FortAwesome / react-fontawesome

Font Awesome React component
https://fontawesome.com
MIT License
3.69k stars 265 forks source link

Using size "fa fa-2x" throws an error #376

Closed GonzaloCalandria closed 4 years ago

GonzaloCalandria commented 4 years ago

I'm using the size "fa fa-2x" and I'm seeing the following error in the developer console of Chrome.

Failed prop type: Invalid prop size of value fa fa-2x supplied to FontAwesomeIcon, expected one of ["lg","xs","sm","1x","2x","3x","4x","5x","6x","7x","8x","9x","10x"].

I'm using the following version in my package.json file

"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.8",
robmadole commented 4 years ago

Hi @GonzaloCalandria. Just use 2x. Like so

<FontAwesomeIcon icon="spinner" size="2x" />

GonzaloCalandria commented 4 years ago

@robmadole but if I use only 2x the icon gets smaller. Here's a screenshot.. the icon in the middle is 2x image

Here's my react code for better understanding <FontAwesomeIcon icon={this.mySwitchFunction(socialLogo)} size="fa fa-2x" />

robmadole commented 4 years ago

Sounds like you might have some CSS on the parent that is messing with things. What is the computed font-size for the Instragram and LinkedIn icons compared to the Facebook icon?

GonzaloCalandria commented 4 years ago

Smallest is 16px and biggest is 32px. But looking fontawesome website, it allows fa-2x. Maybe I have an old version of this react-fontawesome?

robmadole commented 4 years ago

This still sounds like a CSS issue to me. If you can provide a reproducible test case we'll be happy to take a look. I don't think it's going to be the version of react-fontawesome. The CSS for sizing is part of the @fortawesome/fontawesome-svg-core package.

GonzaloCalandria commented 4 years ago

Actually I think it is.. the thing is that I'm using AEM SPA (Adobe Experience Manager) and AEM uses font awesome as a core framework, so maybe that's why it's overwriting some stylings. Is there a way to maybe update react-fontawesome to work with the fa-2x feature?

robmadole commented 4 years ago

@GonzaloCalandria if you can provide a test case we'll take a look. If there is a bug with react-fontawesome and the handling of fa-2x we'll get it fixed. But until I can see the root cause there isn't much I can do.