Nightly Procrastination Machine
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@davidegheri/react-native-fontawesome

0.1.1 • Public • Published

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.

Install

npm i @davidegheri/react-native-fontawesome

DownloadsWeekly Downloads

3

Version

0.1.1

License

MIT

Unpacked Size

12.8 kB

Total Files

10

Last publish

Collaborators

  • avatar