Skip to content

Latest commit

 

History

History
128 lines (103 loc) · 3.78 KB

README.md

File metadata and controls

128 lines (103 loc) · 3.78 KB
Raw

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

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.