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.

    Install

    npm i react-fa

    DownloadsWeekly Downloads

    6,961

    Version

    5.0.0

    License

    MIT

    Last publish

    Collaborators

    • andreypopp