react-font-icon v1.0.0

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

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

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 .