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 .