Package Exports
- react-native-fontawesome-pro
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-fontawesome-pro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-fontawesome-pro
Easily use your FontAwesome Pro 5.1 icons in React-Native.
v2 of this module takes advantage of enhancements in FontAwesome 5.1’s JS Package Cleanup and provides access to 409 new icons.
Want to install v1? View the old readme for FontAwesome Pro 5
Upgrading from v1?
If upgrading from a v1 installation uninstall the previous prerequisite FontAwesome packages:
npm uninstall --save @fortawesome/fontawesome-free-brands @fortawesome/fontawesome-pro-light @fortawesome/fontawesome-pro-regular @fortawesome/fontawesome-pro-solidor
yarn remove @fortawesome/fontawesome-free-brands @fortawesome/fontawesome-pro-light @fortawesome/fontawesome-pro-regular @fortawesome/fontawesome-pro-solidInstallation Prerequisites
Create a
.npmrcfile in the root of your project and the line below. ReplaceYOUR-TOKEN-HEREwith your FontAwesome Pro token which you can find in your Font Awesome account https://fontawesome.com/account/services. More info: Font Awesome docs: Using a Package Manager@fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=YOUR-TOKEN-HEREThis will allow you to download the pro solid, regular and light font packages from the fontawesome pro repo.
Install the FontAwesome Pro packages ( you will not be able to install them without the previous step )
npm install --save @fortawesome/pro-light-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/free-brands-svg-iconsor
yarn add @fortawesome/pro-light-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/free-brands-svg-iconsInstall
react-native-svgnpm install --save react-native-svgor
yarn add react-native-svgLink
react-native-svgreact-native link…or if you only want to link the single library:
react-native link react-native-svgNote: Rebuilding the app for any simulator/emulator is required after running
react-native link.
Installation
npm install react-native-fontawesome-pro --saveor
yarn add react-native-fontawesome-proThe postinstall script will then automatically install the pro packages for you.
Usage
Configure FontAwesomePro in your main app.js file. Optionally set the default font from "regular" to "solid" or "light":
import { configureFontAwesomePro } from "react-native-fontawesome-pro";
configureFontAwesomePro();
// configureFontAwesomePro("solid");
// configureFontAwesomePro("light");Add icons to a component:
import Icon from "react-native-fontawesome-pro";
<View>
<Icon name="chevron-right" color="red" type="regular" onPress={() => alert("do something")} />
<Icon name="chevron-right" color="blue" type="solid" size={24}/>
<Icon name="chevron-right" color="green" type="light" size={10} />
</View>Props
Values for the Icon name prop can be found on fontawesome.com/icons.
| prop | type | default value |
|---|---|---|
name |
string | "" (If a valid name value is not provided, Font Awesome defaults to "question-circle") |
color |
string, html color keyword or hexdecimal | "black" |
size |
int | 20 |
type |
string, one of the available Font Awesome prefix types: "regular", "solid", "light", or "brands" | "regular" |
iconStyle |
style object | undefined |
containerStyle |
style object | undefined |
onPress |
function | undefined |
activeOpacity |
number (beween 0 and 1) | 0.2 (same as default) |
