Merge pull request #412 from kipr/use-fa-package

Switch to Font Awesome npm packages

package.json

@@ -38,6 +38,10 @@
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/react": "^16.9.25",
     "babylonjs": "^4.2.0",
     "babylonjs-loaders": "^4.2.0",

src/components/AboutDialog.tsx

@@ -5,6 +5,8 @@ import { Dialog } from './Dialog';
 import { ThemeProps } from './theme';
 import { Fa } from './Fa';
 
+import { faCopyright } from '@fortawesome/free-solid-svg-icons';
+
 import KIPR_LOGO_BLACK from '../assets/KIPR-Logo-Black-Text-Clear-Large.png';
 import KIPR_LOGO_WHITE from '../assets/KIPR-Logo-White-Text-Clear-Large.png';
 
@@ -73,7 +75,7 @@ export class AboutDialog extends React.PureComponent<Props> {
           </LogoRow>
           Version {SIMULATOR_VERSION} ({SIMULATOR_GIT_HASH})
           <br /> <br />
-          <Bold>Copyright <Fa icon='copyright' /> 2022 <Link theme={theme} href="https://kipr.org/" target="_blank">KISS Institute for Practical Robotics</Link> and External Contributors</Bold>
+          <Bold>Copyright <Fa icon={faCopyright} /> 2022 <Link theme={theme} href="https://kipr.org/" target="_blank">KISS Institute for Practical Robotics</Link> and External Contributors</Bold>
           <br /> <br />
           This software is licensed under the terms of the <Link theme={theme} href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GNU General Public License v3</Link>.
           <br /> <br />

src/components/ComboBox.tsx

@@ -8,6 +8,7 @@ import { Color } from "../state/State/Scene/Color";
 import { Fa } from "./Fa";
 import { Text } from "./Text";
 import { ThemeProps } from "./theme";
+import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 
 const Container = styled('div', (props: ThemeProps & { $focus?: boolean; $minimal?: boolean; }) => ({
   width: !props.$minimal ? '100%' : undefined,
@@ -163,7 +164,7 @@ class ComboBox extends React.PureComponent<ComboBox.Props, ComboBox.State> {
     return (
       <Container ref={this.bindRef_} style={style} className={className} theme={theme} onClick={this.onClick_} $focus={focus} $minimal={minimal}>
         <CurrentOptionContainer theme={theme}><Text text={options[index].text} /></CurrentOptionContainer>
-        <DropIcon icon={focus ? 'caret-up' : 'caret-down'} />
+        <DropIcon icon={focus ? faCaretUp : faCaretDown} />
         {ReactDom.createPortal((focus && this.ref_)
           ? <DropDown theme={theme} style={dropDownStyle}>
             {options.map((option, i) => (

src/components/Console/ClearCharm.tsx

@@ -6,6 +6,8 @@ import { Fa } from '../Fa';
 import { ThemeProps } from '../theme';
 import { charmColor } from '../charm-util';
 
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
 export interface ClearCharmProps extends StyleProps, ThemeProps {
   onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
@@ -30,7 +32,7 @@ class ClearCharm extends React.PureComponent<Props> {
 
     return (
       <Container theme={theme} onClick={onClick}>
-        <Fa icon='times' /> Clear
+        <Fa icon={faTimes} /> Clear
       </Container>
     );
   }

src/components/Console/index.tsx

@@ -11,6 +11,8 @@ import { Fa } from '../Fa';
 import { Button } from '../Button';
 import { BarComponent } from '../Widget';
 
+import { faFile } from '@fortawesome/free-solid-svg-icons';
+
 export const createConsoleBarComponents = (
   theme: Theme, 
   onClearConsole: () => void,
@@ -22,7 +24,7 @@ export const createConsoleBarComponents = (
     onClick: onClearConsole,
     children:
       <>
-        <Fa icon='file' />
+        <Fa icon={faFile} />
         {' Clear'}
       </>,
   }));

src/components/EditableList.tsx

@@ -1,3 +1,4 @@
+import { faCog, faEye, faEyeSlash, faSync, faTimes } from "@fortawesome/free-solid-svg-icons";
 import * as React from "react";
 import { styled, withStyleDeep } from "styletron-react";
 import { StyleProps } from "../style";
@@ -145,22 +146,22 @@ namespace EditableList {
             <StandardItem.OptionsContainer>
               {onVisibilityChange && (
                 <StandardItem.VisibilityIconContainer onClick={this.onVisibilityChange_}>
-                  <StandardItem.OptionIcon icon={visible ? 'eye' : 'eye-slash'} />
+                  <StandardItem.OptionIcon icon={visible ? faEye : faEyeSlash} />
                 </StandardItem.VisibilityIconContainer>
               )}
               {onReset && (
                 <StandardItem.ResetIconContainer onClick={visible ? onReset : undefined} $disabled={!visible}>
-                  <StandardItem.OptionIcon icon='sync' />
+                  <StandardItem.OptionIcon icon={faSync} />
                 </StandardItem.ResetIconContainer>
               )}
               {onSettings && (
                 <StandardItem.SettingsIconContainer onClick={onSettings}>
-                  <StandardItem.OptionIcon icon='cog' />
+                  <StandardItem.OptionIcon icon={faCog} />
                 </StandardItem.SettingsIconContainer>
               )}
               {onRemove && (
                 <StandardItem.RemoveIconContainer onClick={onRemove}>
-                  <StandardItem.OptionIcon icon='times' />
+                  <StandardItem.OptionIcon icon={faTimes} />
                 </StandardItem.RemoveIconContainer>
               )}
 

src/components/Editor/Editor.tsx

@@ -13,6 +13,8 @@ import { Ivygate, Message } from 'ivygate';
 import LanguageSelectCharm from './LanguageSelectCharm';
 import ProgrammingLanguage from '../../ProgrammingLanguage';
 
+import { faFileDownload, faIndent } from '@fortawesome/free-solid-svg-icons';
+
 export enum EditorActionState {
   None,
   Compiling,
@@ -80,7 +82,7 @@ export const createEditorBarComponents = ({
     onClick: onIndentCode,
     children:
       <>
-        <Fa icon='indent'/>
+        <Fa icon={faIndent} />
         {' Indent'}
       </>
   }));
@@ -90,7 +92,7 @@ export const createEditorBarComponents = ({
     onClick: onDownloadCode,
     children:
       <>
-        <Fa icon='file-download'/>
+        <Fa icon={faFileDownload} />
         {' Download'}
       </>
   }));

src/components/Editor/ErrorCharm.tsx

@@ -6,6 +6,8 @@ import { Fa } from '../Fa';
 import { ThemeProps } from '../theme';
 import { charmColor } from '../charm-util';
 
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+
 export interface ErrorCharmProps extends StyleProps, ThemeProps {
   count: number;
 
@@ -33,7 +35,7 @@ class ErrorCharm extends React.PureComponent<Props> {
 
     return (
       <Container theme={theme} onClick={onClick}>
-        <Fa icon='times-circle' /> {count} Error{count === 1 ? '' : 's'}
+        <Fa icon={faTimesCircle} /> {count} Error{count === 1 ? '' : 's'}
       </Container>
     );
   }

src/components/Editor/LanguageSelectCharm.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { styled, withStyleDeep } from 'styletron-react';
 import { StyleProps } from '../../style';
 import Charm from '../Charm';
-import { Fa } from '../Fa';
 import { ThemeProps } from '../theme';
 import { charmColor } from '../charm-util';
 import ComboBox from '../ComboBox';

src/components/Editor/PerfectCharm.tsx

@@ -6,6 +6,8 @@ import { Fa } from '../Fa';
 import { ThemeProps } from '../theme';
 import { charmColor } from '../charm-util';
 
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+
 export interface PerfectCharmProps extends StyleProps, ThemeProps {
 }
 
@@ -28,7 +30,7 @@ class PerfectCharm extends React.PureComponent<Props> {
 
     return (
       <Container theme={theme}>
-        <Fa icon='check' /> Perfect!
+        <Fa icon={faCheck} /> Perfect!
       </Container>
     );
   }

src/components/Editor/WarningCharm.tsx

@@ -6,6 +6,8 @@ import { Fa } from '../Fa';
 import { ThemeProps } from '../theme';
 import { charmColor } from '../charm-util';
 
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
 export interface WarningCharmProps extends StyleProps, ThemeProps {
   count: number;
 
@@ -33,7 +35,7 @@ class WarningCharm extends React.PureComponent<Props> {
 
     return (
       <Container theme={theme} onClick={onClick}>
-        <Fa icon='exclamation-triangle' /> {count} Warning{count === 1 ? '' : 's'}
+        <Fa icon={faExclamationTriangle} /> {count} Warning{count === 1 ? '' : 's'}
       </Container>
     );
   }

src/components/Fa.tsx

@@ -1,13 +1,14 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 
 import { StyleProps } from '../style';
 
 export interface FaProps extends StyleProps {
-  icon: string;
-  brand?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
-  onMouseEnter?: (event: React.MouseEvent<HTMLSpanElement>) => void;
-  onMouseLeave?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+  icon: IconProp;
+  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+  onMouseEnter?: (event: React.MouseEvent<SVGSVGElement>) => void;
+  onMouseLeave?: (event: React.MouseEvent<SVGSVGElement>) => void;
   disabled?: boolean;
 }
 
@@ -16,19 +17,20 @@ type Props = FaProps;
 export class Fa extends React.PureComponent<Props> {
   render() {
     const { props } = this;
-    const { className, icon, onClick, onMouseEnter, onMouseLeave, disabled, brand } = props;
+    const { className, icon, onClick, onMouseEnter, onMouseLeave, disabled } = props;
     const style: React.CSSProperties = {
       ...props.style,
       cursor: onClick && !disabled ? 'pointer' : undefined,
       opacity: disabled ? 0.5 : undefined
     };
     return (
-      <span
+      <FontAwesomeIcon
+        icon={icon}
         style={style}
         onClick={!disabled ? onClick : undefined}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        className={`${className} ${brand ? `fab` : `fas`} fa-${icon}`}
+        className={className}
       />
     );
   }

src/components/Feedback/SentimentCharm.tsx

@@ -6,8 +6,10 @@ import { Fa } from '../Fa';
 import { ThemeProps } from '../theme';
 import { charmColor } from '../charm-util';
 
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
 export interface SentimentCharmProps extends StyleProps, ThemeProps {
-  icon: string;
+  icon: IconProp;
   selected: boolean;
   onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
 }

src/components/Feedback/index.tsx

@@ -9,6 +9,8 @@ import DialogBar from "../DialogBar";
 import { ThemeProps } from '../theme';
 import { Fa } from '../Fa';
 
+import { faFrown, faMeh, faPaperPlane, faSmileBeam } from '@fortawesome/free-solid-svg-icons';
+
 export interface FeedbackDialogProp extends ThemeProps, StyleProps {
   onClose: () => void;
   onSubmit: () => void;
@@ -57,13 +59,13 @@ export class FeedbackDialog extends React.PureComponent<Props, State> {
 
     return (
       <FeedbackRowContainer theme={theme}>
-        <SentimentCharm theme={theme} icon='frown' selected={getValue(currentFeedback) === Sentiment.Sad} onClick={
+        <SentimentCharm theme={theme} icon={faFrown} selected={getValue(currentFeedback) === Sentiment.Sad} onClick={
           () => onFeedbackChange(getUpdatedFeedback(Sentiment.Sad))
         }/>
-        <SentimentCharm theme={theme} icon='meh' selected={getValue(currentFeedback) === Sentiment.Okay} onClick={
+        <SentimentCharm theme={theme} icon={faMeh} selected={getValue(currentFeedback) === Sentiment.Okay} onClick={
           () => onFeedbackChange(getUpdatedFeedback(Sentiment.Okay))
         }/>
-        <SentimentCharm theme={theme} icon='smile-beam' selected={getValue(currentFeedback) === Sentiment.Happy} onClick={
+        <SentimentCharm theme={theme} icon={faSmileBeam} selected={getValue(currentFeedback) === Sentiment.Happy} onClick={
           () => onFeedbackChange(getUpdatedFeedback(Sentiment.Happy))
         }/>
       </FeedbackRowContainer>
@@ -176,7 +178,7 @@ export class FeedbackDialog extends React.PureComponent<Props, State> {
           }
         </FeedbackContainer>
         <DialogBar theme={theme} onAccept={onSubmit}>
-          <Fa icon='paper-plane'/> Submit
+          <Fa icon={faPaperPlane}/> Submit
         </DialogBar>
       </Dialog>
     );

src/components/Form.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 import * as React from 'react';
 import { styled } from 'styletron-react';
 import Dict from '../Dict';
@@ -137,7 +139,7 @@ class Form extends React.PureComponent<Form.Props, Form.State> {
             StyledText.component ({
               component: Fa,
               props: {
-                icon: valid ? 'check' : 'times',
+                icon: valid ? faCheck : faTimes,
                 style: {
                   color: valid ? GREEN.standard : RED.standard,
                 },
@@ -187,7 +189,7 @@ namespace Form {
     onFinalize: (values: { [id: string]: any }) => void;
 
     finalizeText?: string;
-    finalizeIcon?: string;
+    finalizeIcon?: IconProp;
 
     finalizeDisabled?: boolean;
 

src/components/Info/Info.tsx

@@ -13,6 +13,7 @@ import { ReferenceFrame } from '../../unit-math';
 import { connect } from 'react-redux';
 import { State as ReduxState } from '../../state';
 import { SceneAction } from '../../state/reducer';
+import { faSync } from '@fortawesome/free-solid-svg-icons';
 
 
 export interface InfoProps extends StyleProps, ThemeProps {
@@ -150,7 +151,7 @@ class Info extends React.PureComponent<Props & ReduxInfoProps, State> {
         StyledText.component({
           component: ResetIcon,
           props: {
-            icon: 'sync',
+            icon: faSync,
             onClick: this.onResetLocationClick_,
             theme
           }

src/components/Info/SensorWidget.tsx

@@ -14,6 +14,7 @@ import { Fa } from '../Fa';
 import { connect } from 'react-redux';
 import { State as ReduxState } from '../../state';
 import { RobotState } from '../../RobotState';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 
 export interface SensorWidgetProps extends ThemeProps, StyleProps {
   name: string;
@@ -147,7 +148,7 @@ class SensorWidget extends React.PureComponent<Props & ReduxSensorWidgetProps, S
       StyledText.component({
         component: StyledToolIcon,
         props: {
-          icon: 'eye',
+          icon: faEye,
           theme,
           onClick: this.onShowPlotClick_,
           disabled: showPlot,
@@ -158,7 +159,7 @@ class SensorWidget extends React.PureComponent<Props & ReduxSensorWidgetProps, S
       StyledText.component({
         component: StyledToolIcon,
         props: {
-          icon: 'eye-slash',
+          icon: faEyeSlash,
           theme,
           onClick: this.onHidePlotClick_,
           disabled: !showPlot

src/components/Layout/LayoutPicker.tsx

@@ -5,6 +5,7 @@ import { StyleProps } from '../../style';
 import { Fa } from '../Fa';
 import { Layout } from './Layout';
 import { ThemeProps } from '../theme';
+import { faCaretSquareLeft, faClone, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 
 export interface LayoutPickerProps extends StyleProps, ThemeProps {
   layout: Layout,
@@ -107,15 +108,15 @@ class LayoutPicker extends React.PureComponent<Props, State> {
     return (
       <Container theme={theme}>
         <Item theme={theme} style={{ fontWeight: 500, backgroundColor: theme.borderColor }}>Layouts</Item>
-        <Item theme={theme} disabled={layout === Layout.Overlay} onClick={layout !== Layout.Overlay ? this.onOverlayClick_ : undefined}><ItemIcon icon='clone' /> Overlay</Item>
-        <Item theme={theme} disabled={layout === Layout.Side} onClick={layout !== Layout.Side ? this.onSideClick_ : undefined}><ItemIcon icon='caret-square-left' /> Side</Item>
-        {/* <Item theme={theme} disabled={layout === Layout.Bottom} onClick={layout !== Layout.Bottom ? this.onBottomClick_ : undefined}><ItemIcon icon='caret-square-down' /> Bottom</Item> */}
+        <Item theme={theme} disabled={layout === Layout.Overlay} onClick={layout !== Layout.Overlay ? this.onOverlayClick_ : undefined}><ItemIcon icon={faClone} /> Overlay</Item>
+        <Item theme={theme} disabled={layout === Layout.Side} onClick={layout !== Layout.Side ? this.onSideClick_ : undefined}><ItemIcon icon={faCaretSquareLeft} /> Side</Item>
+        {/* <Item theme={theme} disabled={layout === Layout.Bottom} onClick={layout !== Layout.Bottom ? this.onBottomClick_ : undefined}><ItemIcon icon={faCaretSquareDown} /> Bottom</Item> */}
 
         {layout === Layout.Overlay ? (
           <>
             <Item theme={theme} style={{ fontWeight: 500, backgroundColor: theme.borderColor }}>Layout Options</Item>
-            <Item theme={theme} onClick={onShowAll}><ItemIcon icon='eye' /> Show All</Item>
-            <Item theme={theme} onClick={onHideAll}><ItemIcon icon='eye-slash' /> Hide All</Item>
+            <Item theme={theme} onClick={onShowAll}><ItemIcon icon={faEye} /> Show All</Item>
+            <Item theme={theme} onClick={onHideAll}><ItemIcon icon={faEyeSlash} /> Hide All</Item>
           </>
         ) : undefined}
       </Container>

src/components/Layout/OverlayLayout.tsx

@@ -8,7 +8,6 @@ import { Console, createConsoleBarComponents } from '../Console';
 import { Editor, createEditorBarComponents } from '../Editor';
 import World, { createWorldBarComponents } from '../World';
 
-import { Fa } from '../Fa';
 import { Info } from '../Info';
 import { LayoutProps } from './Layout';
 import { SimulatorArea } from '../SimulatorArea';