React-fontawesome: Why is the default prefix for solid ("fas") rather than regular ("far")?

[beausmith]

When passing a string as the value of icon the default prefix is hardcoded for the solid font ("fas").

Why not default the prefix to the regular font ("far")?

Using the Font Awesome Regular this doesn't work:

<FontAwesomeIcon icon='circle' />

Instead I have to do this:

<FontAwesomeIcon icon={['far', 'circle']} />

Seems that the default should be "far" and that if a user wants to use the solid, light, or brand fonts that they should have to pass a prefix.

[robmadole]

Hi @beausmith . It's because the "Solid" style most closely matches Font Awesome version 4 so it's less jarring of a transition for our previous version users. We won't be changing this default anytime soon. Thanks for sharing your thoughts on this.

[lumenwrites]

Is it possible to add a setting to change this default?

[robmadole]

@raymestalez not yet but this feature is being considered. It's trivial to write a wrapper component for yourself that does this in your own project if you like.

[dpilafian]

While one would typically assume that something called "regular" would be the reasonable default over something called "solid", there appears to be significantly more "solid" free icons.

regular - All 152 Awesome Icons
https://fontawesome.com/icons?d=gallery&s=regular&m=free

solid - All 740 Awesome Icons
https://fontawesome.com/icons?d=gallery&s=solid&m=free

Counterintuitively, "solid" might be the best default.

[mikael1000]

Anyone can confirm or link to something that says whats in op? That this is the RIGHT way to do it:

It don't work for me.

[PhilipsEkuma]

The social icons are not working for me on either .far or .fas

[robmadole]

@mikael1000 <FontAwesomeIcon icon={['far', 'circle']} /> is the correct way.

@PhilipsEkuma can you provide a reproduction we can take a look at?

[PhilipsEkuma]

Oh, I was doing it wrong. Social icons belong to the <i class="fab fa-facebook">...</i> category.

[silvinogustavo]

Anyone can confirm or link to something that says whats in op? That this is the RIGHT way to do it:

It don't work for me.

It doesn't work for me either

EDIT: I got it to work after installing the /free-regular-svg-icons and importing it as required in App.js. The thing is, and it might confuse people as it confused me, the regular style is listed in the React documentation as a Pro feature. Only solid styled icons are listed as free icons.

[InstantBuddha]

I had the same problem, what worked for me was:

after importing the needed icons:

   import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons'

I could simply refer to them, like:

   <FontAwesomeIcon icon={faCheckSquare} />