Package Exports

tlg-react-fontawesome-icon-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tlg-react-fontawesome-icon-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tlg-react-fontawesome-icon-picker

React Font Awesome Icon Picker is a basic icon picker for react application. This plugin is in initial stage and have some performace issues.

Installation

React Font Awesome Icon Picker is still not available in NPM website so you have to install it directly from this git repository using below command.

npm install https://github.com/SkyWalker653/react-fontawesome-icon-picker.git --save

Usage

import React from 'react';
import ReactIconPicker from "react-fontawesome-icon-picker";

class MyComponent extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        selectedIcon: {
          prefix: 'fas',
          iconName: 'coffee'
        }
      };
    }
    
    iconPickHandler = (icon) => {
      this.setState({
        selectedIcon: icon
      })
    }
    
    render() {
        return (
            <div>
              <ReactIconPicker pickIcon={this.iconPickHandler} /> <br/>
              Icon: <FontAwesomeIcon icon={[this.state.selectedIcon.prefix, this.state.selectedIcon.iconName]} /> <br/>
              Icon Name: {this.state.selectedIcon.prefix + ' fa-' + this.state.selectedIcon.iconName} <br/>
              Icon HTML code: {'<i class="' + this.state.selectedIcon.prefix + ' fa-' + this.state.selectedIcon.iconName + '"></i>'}
            </div>
        )
    }
}