Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @davidegheri/react-native-fontawesome with all npm packages installed. Try it out:

require("@fortawesome/fontawesome-svg-core/package.json"); // @fortawesome/fontawesome-svg-core is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. var reactNativeFontawesome = require("@davidegheri/react-native-fontawesome")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@davidegheri/react-native-fontawesome v0.1.1

React Native component for Font Awesome 5

react-native-fontawesome

Coverage Status Build Status npm version

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 the library via library.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 the library via library.add(...)).
  • Or it could be an Object with prefix and iconName properties: {prefix: 'fab', iconName: 'apple'}.

Features

Size:

<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="6x" />

Power Transforms:

<FontAwesomeIcon icon="spinner" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="spinner" transform={{ rotate: 42 }} />

Masking:

<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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free