react-fontawesome-list

The fontawesome5 icon list component

Usage no npm install needed!

<script type="module">
  import reactFontawesomeList from 'https://cdn.skypack.dev/react-fontawesome-list';
</script>

README

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;

image

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