From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: 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.
---
 opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
index 64e95014..ccaa4144 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 import { collapseButton, collapseButtonRight, sidebar, sidebarRight } from './Sidebar.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 
 function Sidebar({ isRight, collapsible = true, children }) {
     const [isCollapsed, setCollapsed] = useState(false)
@@ -14,9 +16,9 @@ function Sidebar({ isRight, collapsible = true, children }) {
             onClick={() => setCollapsed(!isCollapsed)}
         >
             {(isCollapsed && isRight) || (!isCollapsed && !isRight) ? (
-                <span className="fa fa-angle-left" title={isRight ? 'Expand' : 'Collapse'} />
+                <FontAwesomeIcon icon={faAngleLeft} title={isRight ? 'Expand' : 'Collapse'} />
             ) : (
-                <span className="fa fa-angle-right" title={isRight ? 'Collapse' : 'Expand'} />
+                <FontAwesomeIcon icon={faAngleRight} title={isRight ? 'Collapse' : 'Expand'} />
             )}
         </div>
     )
-- 
cgit v1.2.3