❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Use https://github.com/FortAwesome/react-fontawesome instead

react-fa
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-fa package

5.0.0 • Public • Published

Font Awesome icons as React components

Installation

React Font Awesome is distributed via npm:

npm install react react-fa

You also need to install webpack which is the only bundler at the moment capable to bundle not only JavaScript code but also stylesheets and static assets such as fonts and images:

npm install webpack

You also need a couple of loaders for webpack:

npm install babel-loader style-loader css-loader url-loader file-loader
npm install extract-text-webpack-plugin

Usage

Just as simple as:

import React from 'react'
import ReactDOM from 'react-dom'
import {Icon} from 'react-fa'
 
ReactDOM.renderComponent(
  <Icon spin name="spinner" />,
  document.getElementById('main')
)

Icon Component API

Props in [] are optional

Prop Type Default Description
name string undefined Required: Name of the Font Awesome Icon
[className] string undefined Set a CSS class for extra styles
[size] string undefined Increase size: 'lg', '2x', '3x', '4x', '5x'
[rotate] string undefined Rotate by deg: '45', '90', '135', '180', '225', '270', '315'
[flip] string undefined Flips Icon: 'horizontal', 'vertical'
[fixedWidth] boolean false Set Icon to a fixed width
[spin] boolean false Rotate Icon
[pulse] boolean false Rotate Icon in 8 steps
[stack] string undefined Stack Icons: '1x', '2x'. More Info
[inverse] boolean false Inverse the Icon color
[Component] string/func span Alternate DOM element

IconStack Component API

Prop Type Default Description
[children] node undefined Required: Child elements
[size] string undefined Increase size: 'lg', '2x', '3x', '4x', '5x'
[className] string undefined Set a CSS class for extra styles

Webpack Setup

Use the following webpack config (put it in webpack.config.js):

var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
module.exports = {
  entry: './index.js',
  output: {
    path: 'assets',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ]
}

which compile everything (js, stylesheets and icon fonts) into assets/ directory so you would need this basic HTML file to start your app:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="assets/bundle.css">
    </head>
    <body>
        <div id="main"></div>
        <script src="assets/bundle.js"></script> 
    </body>
</html>

Note: If you run into issues with loading the FontAwesome font when not using ExtractTextPlugin, this might be fixed by making your publicPath absolute. See this StackOverflow question for details.

Readme

Keywords

Package Sidebar

Install

npm i react-fa

Repository

github.com/andreypopp/react-fa

Homepage

andreypopp.github.io/react-fa/

Weekly Downloads

5,975

Version

5.0.0

License

MIT

Last publish

Collaborators

  • andreypopp
Try on RunKit
Report malware