React Font Icon

Easy to use React component for Fontawesome & Material Design font icons.

Installation

npm install --save react-font-icon

Usage

RFIcon

import React, { Component } from 'react';
import { RFIcon } from 'react-font-icon';

class Icon extends Component {
    render() {
        return <RFIcon  name="flag" color="#5f5f5f" type="fa"
                        gradient="90deg, #FEB984, #FF5542"
                        textShadow="0 0.5px 1px rgba(1, 0, 0, 0.3)"
                        fontSize="20em"
                        size="5x" />
    }
}

It uses the styled components . If you are not self hosting the Fontawesome & Material Design icons, no need to worry about linking the font urls to HTML. This component will import the icons from the respected urls.

Properties

Props	Fontawesome	Material Design
name	Fontawesome Icons	Material Design Icons
color	Html color codes	Html color codes
gradient	-webkit-linear-gradient	-webkit-linear-gradient
textShadow	CSS3 text-shadow	CSS3 text-shadow
fontSize	CSS font-size	CSS font-size
type	"fa" (default)	"md"
size	"lg","2x","3x","4x","5x"	NA
spin	Available	NA
rotate	"90","180","270"	NA

RFUrl

Set single time RFUrl properties before use the RFIcon.

import React, { Component } from 'react';
import { RFUrl, RFIcon } from 'react-font-icon';

class Icon extends Component {
    render() {
        RFUrl.useCustomCdnStyles = true;
        RFUrl.faVersion = "4.6.0";
        return <RFIcon  name="flag" color="#5f5f5f" type="fa"
                        gradient="90deg, #FEB984, #FF5542"
                        textShadow="0 0.5px 1px rgba(1, 0, 0, 0.3)"
                        fontSize="20em"
                        size="5x" />
    }
}

Properties

Props	Default
useCustomCdnStyles	false
faUrl	Fontawesome Url
faVersion	4.7.0
mdUrl	Material Design Url

useCustomCdnStyles

If you want to use the custom cdn styles for Fontawesome / Material Design , set the useCustomCdnStyles:true .

faUrl & mdUrl

You can set custom urls for faUrl(Fontawesome) and mdUrl(Material Design)

faVersion

Default Fontawesome version is 4.7.0. You can set any other old Fontawesome version .