FontAwesome Navigation

We do not provide any licenses for using FontAwesome. For Licenses see the FontAwesome Page.

This component is build with the FontAwesome React Components:

• @fortawesome/fontawesome-svg-core ^1.2.12,
• @fortawesome/free-solid-svg-icons ^5.6.3,
• @fortawesome/react-fontawesome ^0.1.4,

For details see the Documentation.

Contribute

For contribution: GIT

Usage

Following Code:

import React from 'react';
import ReactDOM from 'react-dom';

import { NavigationLeft, NavigationElement } from './fontawesome-navigation';

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faIgloo,
    faHeart,
    faHome,
    faCalendar,
    faAddressBook,
    faCogs
} from '@fortawesome/free-solid-svg-icons';

library.add(faIgloo, faHeart, faHome, faCalendar, faAddressBook, faCogs);

ReactDOM.render(
    <NavigationLeft size={2}>
        <NavigationElement
            url="www.facebook.ch"
            title="Home"
            colors={{ background: '#ffa4a4', color: 'white' }}
        >
            <FontAwesomeIcon icon="home" />
        </NavigationElement>
        <NavigationElement
            url="www.google.ch"
            title="Calender"
            colors={{ background: '#fdd479', color: 'white' }}
        >
            <FontAwesomeIcon icon="calendar" />
        </NavigationElement>
        <NavigationElement
            url="www.google.ch"
            title="Adresses"
            colors={{ background: '#9e92ff', color: 'white' }}
        >
            <FontAwesomeIcon icon="address-book" />
        </NavigationElement>
        <NavigationElement
            url="www.google.ch"
            title="Like"
            colors={{ background: '#d4a4ff', color: 'white' }}
        >
            <FontAwesomeIcon icon="heart" />
        </NavigationElement>
        <NavigationElement
            url="www.google.ch"
            title="Settings"
            colors={{ background: '#ffa4df', color: 'white' }}
        >
            <FontAwesomeIcon icon="cogs" />
        </NavigationElement>
    </NavigationLeft>,
    document.getElementById('root')
);

Result in this UI:

Props

• NavigationTop, NavigationRight, NavigationBottom, NavigationLeft
  1. size: Size Multiplier
  2. colors: { backgroundColor: string }
• NavigationElement
  1. url: string.isRequired,
  2. title: string.isRequired,
  3. colors: { background: string, color: string }