Icons

To simplify the user interface, we will be using a free icon package called 'fontawesome' which provides exactly 1500 icons (with the free version).

The library and dependent modules are found in ./components/Layout.jsx.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee, faBars, faPlus, faPlay, faPause, faForward } from '@fortawesome/free-solid-svg-icons';
library.add(faCoffee, faBars, faPlus, faPlay, faPause, faForward); 

To add icons, simply pull it from the object deconstructing import i.e.

import { faCoffee, faBars, faPlus, faPlay, faPause, faForward } from '@fortawesome/free-solid-svg-icons';

If you're not sure what you're looking for you can find icons here.

Then you will need to add this to the library

library.add(faCoffee, faBars, faPlus, faPlay, faPause, faForward); 

Where ever you wish to use these icons you will need to do the following:

Import the React Component for handling the icons

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

Create the React Component and specify the icon note: the icon names used here are not the same as the imported ones! for example, the icon for faForward is used in the react component as forward

<FontAwesomeIcon icon="forward" />