react-fontawesome-list

Fontawesome5 Free icon list component developed as React.js.

Real Demo

React Design Editor

Install

• npm install --save react-fontawesome-list

Getting Started

Basic

import React, { Component } from 'react';
import { Icons } from 'react-fontawesome-list'

class ExampleList extends Component {
  render() {
    <div>
      <Icons />
    </div>
  }
}

React-Fontawesome-List + Ant.Design Modal

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, Form } from 'antd';

import { Icon, Icons } from 'react-fontawesome-list';

class IconChooser extends Component {
    handlers = {
        onOk: () => {
            const { icon } = this.state;
            const { onChange } = this.props;
            if (onChange) {
                onChange(icon);
            }
            this.setState({
                visible: false,
            });
        },
        onCancel: () => {
            this.modalHandlers.onHide();
        },
        onClick: () => {
            this.modalHandlers.onShow();
        },
        onClickIcon: (icon) => {
            this.setState({
                icon,
            }, () => {
                const { onChange } = this.props;
                if (onChange) {
                    onChange(icon);
                }
                this.modalHandlers.onHide();
            });
        },
    }

    modalHandlers = {
        onShow: () => {
            this.setState({
                visible: true,
            });
        },
        onHide: () => {
            this.setState({
                visible: false,
            });
        },
    }

    static propTypes = {
        onChange: PropTypes.func,
    }

    state = {
        icon: {},
        visible: false,
    }

    render() {
        const { onOk, onCancel, onClick, onClickIcon } = this.handlers;
        const { icon, visible } = this.state;
        const label = (
            <React.Fragment>
                <span style={{ marginRight: 8 }}>
                    {'Icon'}
                </span>
                <Icon name={icon.name} prefix={icon.prefix} />
            </React.Fragment>
        );
        return (
            <React.Fragment>
                <Form.Item label={label} colon={false}>
                    <Button onClick={onClick}>
                        {'Choose Icon from Library'}
                    </Button>
                </Form.Item>
                <Modal
                    onOk={onOk}
                    onCancel={onCancel}
                    width="80%"
                    visible={visible}
                    bodyStyle={{ margin: 16, height: '600px' }}
                >
                    <Icons ref={(c) => { this.iconsRef = c; }} onClick={onClickIcon} search />
                </Modal>
            </React.Fragment>
        );
    }
}

export default IconChooser;

Icons

props

PropName	Default	PropTypes
onClick		function (icon)
search	false	Boolean
grid	4	String or Number
icons	[ ]	Array
icon		Object
selected	false	Boolean
style	{ width: '100%', height: '100%' }	Object
iconStyle	{ }	Object

Icon

props

PropName	Default	PropTypes
name		String
color		String
style		Object
className		String
size	1	Number
innerIcon		String
innerColor		String
innerClassName		String
innerSize	1	Number
prefix	fas	String

Demo

• git clone https://github.com/salgum1114/react-fontawesome-list.git - Clone the project
• npm start - Run script
• http://localhost:8080 - Host access