Update to FontAwesome5

frontend/src/Components/Icon.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { icons, kinds } from 'Helpers/Props';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { kinds } from 'Helpers/Props';
 import classNames from 'classnames';
 import styles from './Icon.css';
 
@@ -11,38 +12,42 @@ function Icon(props) {
     kind,
     size,
     title,
-    isSpinning
+    isSpinning,
+    ...otherProps
   } = props;
 
   return (
-    <i
+    <FontAwesomeIcon
       className={classNames(
-        name,
         className,
-        styles[kind],
-        isSpinning && icons.SPIN
+        styles[kind]
       )}
+      icon={name}
+      spin={isSpinning}
       title={title}
       style={{
         fontSize: `${size}px`
       }}
+      {...otherProps}
     />
   );
 }
 
 Icon.propTypes = {
   className: PropTypes.string,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
   title: PropTypes.string,
-  isSpinning: PropTypes.bool.isRequired
+  isSpinning: PropTypes.bool.isRequired,
+  fixedWidth: PropTypes.bool.isRequired
 };
 
 Icon.defaultProps = {
   kind: kinds.DEFAULT,
   size: 14,
-  isSpinning: false
+  isSpinning: false,
+  fixedWidth: false
 };
 
 export default Icon;

frontend/src/Components/Link/IconButton.js

@@ -35,7 +35,7 @@ IconButton.propTypes = {
   className: PropTypes.string.isRequired,
   iconClassName: PropTypes.string,
   kind: PropTypes.string,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.object.isRequired,
   size: PropTypes.number,
   isSpinning: PropTypes.bool
 };

frontend/src/Components/Link/SpinnerButton.js

@@ -45,7 +45,7 @@ SpinnerButton.propTypes = {
   className: PropTypes.string.isRequired,
   isSpinning: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool,
-  spinnerIcon: PropTypes.string.isRequired,
+  spinnerIcon: PropTypes.object.isRequired,
   children: PropTypes.node
 };
 

frontend/src/Components/Link/SpinnerIconButton.js

@@ -22,8 +22,8 @@ function SpinnerIconButton(props) {
 }
 
 SpinnerIconButton.propTypes = {
-  name: PropTypes.string.isRequired,
-  spinningName: PropTypes.string.isRequired,
+  name: PropTypes.object.isRequired,
+  spinningName: PropTypes.object.isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isSpinning: PropTypes.bool.isRequired
 };

frontend/src/Components/Menu/SelectedMenuItem.js

@@ -51,7 +51,7 @@ class SelectedMenuItem extends Component {
 SelectedMenuItem.propTypes = {
   name: PropTypes.string,
   children: PropTypes.node.isRequired,
-  selectedIconName: PropTypes.string.isRequired,
+  selectedIconName: PropTypes.object.isRequired,
   isSelected: PropTypes.bool.isRequired,
   onPress: PropTypes.func.isRequired
 };

frontend/src/Components/Menu/ToolbarMenuButton.css

@@ -7,7 +7,5 @@
 }
 
 .label {
-  height: 14px;
-  color: $toolbarLabelColor;
-  font-size: $extraSmallFontSize;
+  composes: label from 'Components/Page/Toolbar/PageToolbarButton.css';
 }

frontend/src/Components/Menu/ToolbarMenuButton.js

@@ -19,7 +19,7 @@ function ToolbarMenuButton(props) {
       <div>
         <Icon
           name={iconName}
-          size={22}
+          size={21}
         />
 
         <div className={styles.label}>
@@ -31,7 +31,7 @@ function ToolbarMenuButton(props) {
 }
 
 ToolbarMenuButton.propTypes = {
-  iconName: PropTypes.string.isRequired,
+  iconName: PropTypes.object.isRequired,
   text: PropTypes.string
 };
 

frontend/src/Components/Page/Sidebar/PageSidebarItem.js

@@ -87,7 +87,7 @@ class PageSidebarItem extends Component {
 }
 
 PageSidebarItem.propTypes = {
-  iconName: PropTypes.string,
+  iconName: PropTypes.object,
   title: PropTypes.string.isRequired,
   to: PropTypes.string.isRequired,
   isActive: PropTypes.bool,

frontend/src/Components/Page/Toolbar/PageToolbarButton.js

@@ -28,7 +28,7 @@ function PageToolbarButton(props) {
       <Icon
         name={isSpinning ? (spinningName || iconName) : iconName}
         isSpinning={isSpinning}
-        size={22}
+        size={21}
       />
 
       <div className={styles.labelContainer}>
@@ -42,8 +42,8 @@ function PageToolbarButton(props) {
 
 PageToolbarButton.propTypes = {
   label: PropTypes.string.isRequired,
-  iconName: PropTypes.string.isRequired,
-  spinningName: PropTypes.string,
+  iconName: PropTypes.object.isRequired,
+  spinningName: PropTypes.object,
   isSpinning: PropTypes.bool,
   isDisabled: PropTypes.bool
 };