New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-fa

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-fa

Font Awesome icons as React components

  • 5.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

PropTypeDefaultDescription
namestringundefinedRequired: Name of the Font Awesome Icon
[className]stringundefinedSet a CSS class for extra styles
[size]stringundefinedIncrease size: 'lg', '2x', '3x', '4x', '5x'
[rotate]stringundefinedRotate by deg: '45', '90', '135', '180', '225', '270', '315'
[flip]stringundefinedFlips Icon: 'horizontal', 'vertical'
[fixedWidth]booleanfalseSet Icon to a fixed width
[spin]booleanfalseRotate Icon
[pulse]booleanfalseRotate Icon in 8 steps
[stack]stringundefinedStack Icons: '1x', '2x'. More Info
[inverse]booleanfalseInverse the Icon color
[Component]string/funcspanAlternate DOM element

IconStack Component API

PropTypeDefaultDescription
[children]nodeundefinedRequired: Child elements
[size]stringundefinedIncrease size: 'lg', '2x', '3x', '4x', '5x'
[className]stringundefinedSet 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.

Keywords

FAQs

Package last updated on 03 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc