move images out of public/static folder

This way, we get compile error if there problem with images. Also allows
images to be optimized.

src/components/ActionButton.tsx

@@ -43,10 +43,7 @@ class ActionButton<T = undefined> extends React.Component<ActionButtonProps<T>>
                             : undefined
                     }
                 >
-                    <Image
-                        src={`/static/images/${this.props.icon}`}
-                        alt={this.props.id}
-                    />
+                    <Image src={this.props.icon} alt={this.props.id} />
                 </Button>
             </OverlayTrigger>
         );

src/components/BluetoothButton.tsx

@@ -9,6 +9,8 @@ import { RootState } from '../reducers';
 import { BLEConnectionState } from '../reducers/ble';
 import { BootloaderConnectionState } from '../reducers/bootloader';
 import ActionButton, { ActionButtonProps } from './ActionButton';
+import btConnectedIcon from './images/bt-connected.svg';
+import btDisconnectedIcon from './images/bt-disconnected.svg';
 
 type Dispatch = ThunkDispatch<{}, {}, AnyAction>;
 
@@ -23,14 +25,14 @@ const mapStateToProps = (state: RootState): StateProps => {
     ) {
         return {
             tooltip: 'Connect using Bluetooth',
-            icon: 'btdisconnected.svg',
+            icon: btDisconnectedIcon,
             context: 'connect',
             enabled: true,
         };
     } else {
         return {
             tooltip: 'Disconnect Bluetooth',
-            icon: 'btconnected.svg',
+            icon: btConnectedIcon,
             context: 'disconnect',
             enabled: state.ble.connection === BLEConnectionState.Connected,
         };

src/components/FlashButton.tsx

@@ -8,6 +8,7 @@ import * as notification from '../actions/notification';
 import { RootState } from '../reducers';
 import { BootloaderConnectionState } from '../reducers/bootloader';
 import OpenFileButton, { OpenFileButtonProps } from './OpenFileButton';
+import firmwareIcon from './images/firmware.svg';
 
 type StateProps = Pick<OpenFileButtonProps, 'enabled'>;
 type DispatchProps = Pick<OpenFileButtonProps, 'onFile' | 'onReject' | 'onClick'>;
@@ -38,7 +39,7 @@ const mergeProps = (
 ): OpenFileButtonProps => ({
     fileExtension: '.zip',
     tooltip: 'Flash hub firmware',
-    icon: 'firmware.svg',
+    icon: firmwareIcon,
     ...ownProps,
     ...stateProps,
     ...dispatchProps,

src/components/LoadButton.tsx

@@ -7,6 +7,7 @@ import * as editor from '../actions/editor';
 import * as notification from '../actions/notification';
 import { RootState } from '../reducers';
 import OpenFileButton, { OpenFileButtonProps } from './OpenFileButton';
+import openIcon from './images/open.svg';
 
 type StateProps = Pick<OpenFileButtonProps, 'enabled'>;
 type DispatchProps = Pick<OpenFileButtonProps, 'onFile' | 'onReject'>;
@@ -34,7 +35,7 @@ const mergeProps = (
 ): OpenFileButtonProps => ({
     fileExtension: '.py',
     tooltip: 'Load file',
-    icon: 'open.svg',
+    icon: openIcon,
     ...ownProps,
     ...stateProps,
     ...dispatchProps,

src/components/OpenFileButton.tsx

@@ -101,10 +101,7 @@ class OpenFileButton extends React.Component<OpenFileButtonProps> {
                                 : {})}
                         >
                             <input {...getInputProps()} />
-                            <Image
-                                src={`/static/images/${this.props.icon}`}
-                                alt={this.props.id}
-                            />
+                            <Image src={this.props.icon} alt={this.props.id} />
                         </Button>
                     </OverlayTrigger>
                 )}

src/components/ReplButton.tsx

@@ -8,6 +8,7 @@ import { startRepl } from '../actions/hub';
 import { RootState } from '../reducers';
 import { HubRuntimeState } from '../reducers/hub';
 import ActionButton, { ActionButtonProps } from './ActionButton';
+import replIcon from './images/repl.svg';
 
 type Dispatch = ThunkDispatch<{}, {}, AnyAction>;
 
@@ -33,7 +34,7 @@ const mergeProps = (
     ownProps: OwnProps,
 ): ActionButtonProps => ({
     tooltip: 'Start REPL in terminal',
-    icon: 'repl.svg',
+    icon: replIcon,
     ...ownProps,
     ...stateProps,
     ...dispatchProps,

src/components/RunButton.tsx

@@ -11,6 +11,7 @@ import * as notification from '../actions/notification';
 import { RootState } from '../reducers';
 import { HubRuntimeState } from '../reducers/hub';
 import ActionButton, { ActionButtonProps } from './ActionButton';
+import runIcon from './images/run.svg';
 
 type Dispatch = ThunkDispatch<{}, {}, AnyAction>;
 
@@ -53,7 +54,7 @@ const mergeProps = (
     ownProps: OwnProps,
 ): ButtonProps => ({
     tooltip: 'Download and run this program',
-    icon: 'run.svg',
+    icon: runIcon,
     ...ownProps,
     ...stateProps,
     ...dispatchProps,

src/components/SaveButton.tsx

@@ -6,6 +6,7 @@ import { Dispatch } from 'redux';
 import * as editor from '../actions/editor';
 import { RootState } from '../reducers';
 import ActionButton, { ActionButtonProps } from './ActionButton';
+import downloadIcon from './images/download.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled' | 'context'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
@@ -27,7 +28,7 @@ const mergeProps = (
     ownProps: OwnProps,
 ): ActionButtonProps => ({
     tooltip: 'Save file',
-    icon: 'download.svg',
+    icon: downloadIcon,
     ...ownProps,
     ...stateProps,
     ...dispatchProps,

src/components/StopButton.tsx

@@ -8,6 +8,7 @@ import { stop } from '../actions/hub';
 import { RootState } from '../reducers';
 import { HubRuntimeState } from '../reducers/hub';
 import ActionButton, { ActionButtonProps } from './ActionButton';
+import stopIcon from './images/stop.svg';
 
 type Dispatch = ThunkDispatch<{}, {}, AnyAction>;
 
@@ -31,7 +32,7 @@ const mergeProps = (
     ownProps: OwnProps,
 ): ActionButtonProps => ({
     tooltip: 'Stop everything',
-    icon: 'stop.svg',
+    icon: stopIcon,
     ...ownProps,
     ...stateProps,
     ...dispatchProps,