react-native-fontawesomeicon

A lightweight, customizable FontAwesome icon component library built for React Native. This library provides an easy way to use FontAwesome icons by referencing icon paths in an SVG component.

Installation

First, install the package along with its required peer dependency:

npm install react-native-fontawesomeicon

You'll also need react-native-svg for SVG support:

npm install react-native-svg

Usage

Importing the Icon Component and Icons

After installation, you can import the FontAwesomeIcon component along with the icon paths you want to use.

import FontAwesomeIcon from 'react-native-fontawesomeicon';
import { icons } from 'react-native-fontawesomeicon'; // Import icons object

Rendering an Icon

To render an icon, pass the icon path, along with any other desired properties like colour, size, and style:

<FontAwesomeIcon icon={icons.solid.faArrowDown} size={24} colour="#333333" />

Props

The FontAwesomeIcon component accepts the following props:

icon (string): The SVG path data for the icon. Use paths from the icons object.
colour (string): The color of the icon. Default is '#000000A6'.
size (number): The icon's width and height in pixels. Default is 20.
style (object): Optional style object to apply additional styles, including color for overriding colour.

Example

import React from 'react';
import { View } from 'react-native';
import FontAwesomeIcon from 'react-native-fontawesomeicon';
import { icons } from 'react-native-fontawesomeicon';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <FontAwesomeIcon icon={icons.solid.faArrowDown} size={30} colour="#FF5733" />
      <FontAwesomeIcon icon={icons.solid.faCoffee} size={40} colour="#123456" />
    </View>
  );
}

Icons Available

The library includes a variety of FontAwesome icons. Refer to the icons object for the list of available icons:

icons.solid.faArrowDown
icons.solid.faCoffee
// ...add more icons as needed

License

MIT