ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.

1 files changed, 3 insertions, 2 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
index 7b1eaae2..28207968 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -1,16 +1,17 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
 import Link from 'next/link'
 import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
 import {} from './Navbar.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faList } from '@fortawesome/free-solid-svg-icons'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
             <Link href="/projects">
                 <NavLink title="My Projects">
-                    <FontAwesome name="list" className="mr-2" />
+                    <FontAwesomeIcon icon={faList} className="mr-2" />
                     My Projects
                 </NavLink>
             </Link>