react-native-fontawesome
Font Awesome 5 React Native component using SVG with JS and react-native-svg, heavily inpired by the react-fontawesome package
Introduction
Get started
This package is for integrating Font Awesome 5 SVG in JS with React Native,
It leverages the amazing react-native-svg package to render the icon svg in a React native environment
Installation
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @davidegheri/react-native-fontawesome
$ react-native link react-native-svg
Add at least one icon set
$ npm i --save @fortawesome/free-solid-svg-icons
Add more styles or Pro icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
If you are a Font Awesome Pro subscriber you can install Pro packages; this requires additional configuration.
$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
Usage
Add icons to the library first, usually in you app entry point (App.js)
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { fas } from '@fortawesome/free-solid-svg-icons';
library.add(fab, fas);
Then, you can use any of the added icons as:
<FontAwesomeIcon icon="coffee" />
The default used icon prefix is fas
, from @fortawesome/free-solid-svg-icons
, to use another set of icons, pass the prefix to the icon
prop:
<FontAwesomeIcon icon={['fab', 'apple']} />
// Or
<FontAwesomeIcon icon={{prefix: 'fab', iconName: 'apple'}} />
If you prefer to not use the library
method, you can also explicitly import an icon definition and directly use it
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
<FontawesomeIcon icon={faCoffee} />;
As a recap, the icon
prop expects a single object:
- It could be an icon object, like
{faCoffee}
. - It could a string object, like
"coffee"
(the icon must be added to thelibrary
vialibrary.add(...)
). - It could be an
Array
of strings, where the first element is a prefix, and the second element is the icon name:{["fab", "apple"]}
(the icon must be added to thelibrary
vialibrary.add(...)
). - Or it could be an
Object
withprefix
andiconName
properties:{prefix: 'fab', iconName: 'apple'}
.
Features
Size:
<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="6x" />
<FontAwesomeIcon icon="spinner" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="spinner" transform={{ rotate: 42 }} />
<FontAwesomeIcon icon="coffee" mask={['far', 'circle']} />
TypeScript
Typings are included in this package. However, most types are defined in the
underlying API library, @fortawesome/fontawesome-svg-core
.
Several types, including IconLookup
and IconDefinition
, appearing above,
actually originate from the @fortawesome/fontawesome-common-types
package.
They are re-exported from both @fortawesome/fontawesome-svg-core
and
@fortawesome/free-solid-svg-icons
(and other icon packs). This is just to
make importing more convenient in some cases. Refer to the index.d.ts
in any
module to see which types it exports.