https://github.com/andreypopp/react-fa

DEPRECATED: use https://github.com/FortAwesome/react-fontawesome instead
https://github.com/andreypopp/react-fa

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/andreypopp/react-fa
• Owner: andreypopp
• Created: 2014-09-03T21:06:53.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T12:18:43.000Z (about 2 years ago)
• Last Synced: 2025-02-08T05:09:44.926Z (13 days ago)
• Language: JavaScript
• Homepage: http://andreypopp.github.io/react-fa/
• Size: 2.07 MB
• Stars: 489
• Watchers: 13
• Forks: 42
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

# Font Awesome icons as React components

## Installation

React Font Awesome is distributed via [npm][]:

```bash

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:

```bash

npm install webpack

```

You also need a couple of loaders for webpack:

```bash

npm install babel-loader style-loader css-loader url-loader file-loader

npm install extract-text-webpack-plugin

```

## Usage

Just as simple as:

```javascript

import React from 'react'

import ReactDOM from 'react-dom'

import {Icon} from 'react-fa'

ReactDOM.renderComponent(

  ,

  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`):

```javascript

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:

```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](http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809) for details.

[webpack]: http://webpack.github.io/

[npm]: http://npmjs.org

[More Info]: http://fontawesome.io/examples/ 'Scroll to stacked icons'