This package uses SVG with JS and the @fortawesome/fontawesome-svg-core library. This implementation differs drastically from the web fonts implementation used in version 4 and older of Font Awesome. You might head over to our Dig Deeper section to learn more aobut how our SVG Core(opens new window) works.
If you are a Pro or Pro Max subscriber you can install additional icons. Additional configuration is required when installing our Pro packages.
Once your pro configuration is complete, you can add Pro icons:
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons
Explicitly importing icons into each of many components in your app might become tedious, so you may want to build a library to more easily use our icons in more than one component. So you can import icons just once in some initializing module, add them to the library, then reference any of them by icon name as a string from any component.
There's no need to import the icons into each component once they're in the library.
// in App.jsimport{ library }from'@fortawesome/fontawesome-svg-core'import{ fab }from'@fortawesome/free-brands-svg-icons'import{ faSquareCheck }from'@fortawesome/free-solid-svg-icons/faSquareCheck'import{ faMugEmpty }from'@fortawesome/free-solid-svg-icons/faMugEmpty'
library.add(fab, faSquareCheck, faMugSaucer)
We'll pass fab in the code block above, which represents all of the brand icons in @fortawesome/free-brands-svg-icons. Any of the brand icons in that package may be referenced by icon name as a string anywhere else in our app.
We added faSquareCheck and faMugSaucer icons individually which allowed us to refer to them throughout our app by their icon string names, square-check and mug-saucer, respectively.
Now we can use the icons in our components:
// in Beverage.js, or any functional componentimport React from'react'import{ View, Text }from'react-native'import{ FontAwesomeIcon }from'@fortawesome/react-native-fontawesome'exportconstBeverage=()=>(<View><FontAwesomeIconicon="square-check"/><Text>Favorite beverage: </Text><FontAwesomeIconicon="mug-saucer"/>
// Using mug-saucer is the same as fa-mug-saucer
<Text>Favorite beverage: </Text><FontAwesomeIconicon="fa-mug-saucer"/></View>)
Oh, it's magic
Another piece of magic that's happening in the background when providing icon names as strings like the above code block demonstrates: the fas prefix (for Font Awesome Solid) is being inferred as the default.
Using other icon styles
If you have imported other styles you can add icons using the following syntax:
// any componentimport React from'react'import{ View, Text }from'react-native'import{ FontAwesomeIcon }from'@fortawesome/react-native-fontawesome'exportconstGadget=()=>(<View>
// if no style prefix is given, icon defaults to a solid icon -->
<FontAwesomeIconicon="fa-square-check"/><Text>Popular gadgets come from vendors like:</Text>
// regular icon
<FontAwesomeIconicon="fa-regular fa-flux-capacitor"/>
// light icon
<FontAwesomeIconicon="fa-light fa-alien"/>
// thin icon
<FontAwesomeIconicon="fa-thin fa-car"/>
// duotone icon
<FontAwesomeIconicon="fa-duotone fa-car-bolt"/>
// sharp solid icon
<FontAwesomeIconicon="fa-sharp fa-solid fa-car-bolt"/>
// sharp regular icon
<FontAwesomeIconicon="fa-sharp fa-regular fa-flux-capacitor"/></View>)
You can also use the array syntax. This is not as friendly but you can still use it.
// These icons are the same Light icon<FontAwesomeIconicon="fal fa-alien"/><FontAwesomeIconicon={['fal','alien']}/>// These icons are the same Sharp Solid icon<FontAwesomeIconicon="fass fa-car-bolt"/><FontAwesomeIconicon={['fass','car-bolt']}/>// These icons are the same Sharp Regular icon<FontAwesomeIconicon="fasr fa-flux-capacitor"/><FontAwesomeIconicon={['fasr','flux-capacitor']}/>
Same icon, different styles
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
This can cause build times for your project to skyrocket because React Native is trying to tree shake. The Font Awesome packages are so large that we highly recommend that you avoid this.
Instead, use "deep imports" by default.
import{ faStroopwafel }from'@fortawesome/pro-solid-svg-icons/faStroopwafel'// <- notice the additional module here?
By directly importing from the faStroopwafel.js module, there is no additional work that tree shaking needs to do to reduce your bundle size.
Style those icons
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
The color prop takes priority over setting color via StyleSheet. So if you end up with both, the prop wins. In fact, when provided a style object (suppose you've declared other style properties other than color), if the color prop has been specified, then any color property on the style object is removed before the style object is passed through to the underlying SVG rendering library. This is to avoid ambiguity.
Using the color prop should be preferred over using the StyleSheet.
You can specify the color and opacity for Duotone's secondary layer using the secondaryColor and secondaryOpacity props. Note that these are optional and will simply default to using your primary color at 40% opacity.
Notice that we are also using Power Transforms to make the mug-saucer icon a bit smaller. If we don't it doesn't fit well.
You can also use maskId to explicitly set the id used for masking. It's auto-generated normally but this causes issues with Jest Snapshot Testing(opens new window) as that value can change.