FortAwesome / react-fontawesome

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

Unexpected error when attempting to size FontAwesomeIcon #508

Open bencinterlink opened 2 years ago

bencinterlink commented 2 years ago

Hi, more of a question than an issue but didn't really know a better place to post this so apologies. I'm very confused by the workings of how the size prop value is applied to FontAwesomeIcon components.

Bit of context; I'm building a TypeScript REACT app using the FontAwesomeIcon components to implement icons into my interface. I am using MaterialUI, however I don't believe this is related as I've experienced the same issue in a test app I made without MUI.

My source of confusion is that I read this in the react section of the official Font Awesome documentation:

Font Awesome supports t-shirt size scale from 2xs to 2xl as well as literal sizing from 1x to 10x.

However, applying any of the following values; 2xl, xl or 2xs cause the following error to be thrown.

TS2322: Type '"2xl"' is not assignable to type 'SizeProp | undefined'.

What makes this more weird, is I've noticed that despite the error, the desired size is actually applied correctly to the icon if I look carefully behind the dark error wall react greets me with.

While doing some trawling through the source code I found the SizeProp export, possibly detailing why these particular values are being prone to throwing errors as they seem to be missing from this type:

export type SizeProp =
  | "xs"
  | "lg"
  | "sm"
  | "1x"
  | "2x"
  | "3x"
  | "4x"
  | "5x"
  | "6x"
  | "7x"
  | "8x"
  | "9x"
  | "10x";

So long story short; is this simply a case of those three size values being overlooked from being included in this SizeProp type or is there something else I'm missing?

AndrewKiri commented 2 years ago

We also face the same issue, putting 2xs as size does seem to work, but yields TS error