From 8bf4008c51352775164143c2a897e4656dec7cf3 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 29 Apr 2020 18:34:37 -0400
Subject: [PATCH 1/4] Migrate from React-InlineSVG to SVGR

---
 client/components/AddRemoveButton.jsx         |   17 +-
 client/components/Nav.jsx                     |   23 +-
 client/components/NavBasic.jsx                |    9 +-
 client/components/PreviewNav.jsx              |    9 +-
 client/modules/App/components/Overlay.jsx     |    5 +-
 client/modules/IDE/components/About.jsx       |   21 +-
 client/modules/IDE/components/AssetList.jsx   |    5 +-
 .../CollectionList/CollectionList.jsx         |    9 +-
 .../CollectionList/CollectionListRow.jsx      |    5 +-
 client/modules/IDE/components/Console.jsx     |   33 +-
 .../modules/IDE/components/CopyableInput.jsx  |    5 +-
 .../modules/IDE/components/EditableInput.jsx  |    9 +-
 client/modules/IDE/components/Editor.jsx      |   19 +-
 client/modules/IDE/components/Feedback.jsx    |    5 +-
 client/modules/IDE/components/FileNode.jsx    |   17 +-
 .../modules/IDE/components/NewFileModal.jsx   |    5 +-
 .../modules/IDE/components/NewFolderModal.jsx |    5 +-
 client/modules/IDE/components/Preferences.jsx |   11 +-
 .../IDE/components/QuickAddList/Icons.jsx     |   11 +-
 .../IDE/components/Searchbar/Searchbar.jsx    |    5 +-
 client/modules/IDE/components/Sidebar.jsx     |    5 +-
 client/modules/IDE/components/SketchList.jsx  |   13 +-
 client/modules/IDE/components/Toast.jsx       |    5 +-
 client/modules/IDE/components/Toolbar.jsx     |   20 +-
 .../IDE/components/UploadFileModal.jsx        |    5 +-
 client/modules/User/components/APIKeyForm.jsx |    5 +-
 client/modules/User/components/APIKeyList.jsx |    5 +-
 client/modules/User/components/Collection.jsx |   17 +-
 .../modules/User/components/GithubButton.jsx  |    5 +-
 .../modules/User/components/GoogleButton.jsx  |    5 +-
 client/styles/abstracts/_mixins.scss          |    4 +-
 client/styles/abstracts/_placeholders.scss    |   25 +-
 client/styles/abstracts/_variables.scss       |   12 +-
 client/styles/components/_api-key.scss        |    6 +-
 client/styles/components/_asset-list.scss     |    2 +-
 client/styles/components/_collection.scss     |    8 +-
 client/styles/components/_console.scss        |    6 +-
 client/styles/components/_editable-input.scss |    2 +-
 client/styles/components/_editor.scss         |   10 +-
 client/styles/components/_nav.scss            |    6 +-
 client/styles/components/_quick-add.scss      |   22 +-
 client/styles/components/_searchbar.scss      |    2 +
 client/styles/components/_sidebar.scss        |   16 +-
 client/styles/components/_sketch-list.scss    |    2 +-
 client/styles/components/_toolbar.scss        |   17 +-
 package-lock.json                             | 1188 +++++++++++++++--
 package.json                                  |    2 +-
 webpack/config.dev.js                         |   25 +-
 webpack/config.prod.js                        |   27 +-
 49 files changed, 1344 insertions(+), 351 deletions(-)

diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx
index f0ec1272..7350c177 100644
--- a/client/components/AddRemoveButton.jsx
+++ b/client/components/AddRemoveButton.jsx
@@ -1,17 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import InlineSVG from 'react-inlinesvg';
 
-const addIcon = require('../images/plus.svg');
-const removeIcon = require('../images/minus.svg');
+import AddIcon from '../images/plus.svg';
+import RemoveIcon from '../images/minus.svg';
 
 const AddRemoveButton = ({ type, onClick }) => {
-  const alt = type === 'add' ? 'add to collection' : 'remove from collection';
-  const icon = type === 'add' ? addIcon : removeIcon;
+  const alt = type === 'add' ? 'Add to collection' : 'Remove from collection';
+  const Icon = type === 'add' ? AddIcon : RemoveIcon;
 
   return (
-    <button className="overlay__close-button" onClick={onClick}>
-      <InlineSVG src={icon} alt={alt} />
+    <button
+      className="overlay__close-button"
+      onClick={onClick}
+      aria-label={alt}
+    >
+      <Icon focusable="false" aria-hidden="true" />
     </button>
   );
 };
diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index a34b9e46..5d9a522a 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { Link } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
@@ -12,10 +11,10 @@ import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
 import { logoutUser } from '../modules/User/actions';
 
 import { metaKeyName, } from '../utils/metaKey';
-import caretLeft from '../images/left-arrow.svg';
 
-const triangleUrl = require('../images/down-filled-triangle.svg');
-const logoUrl = require('../images/p5js-logo-small.svg');
+import CaretLeftIcon from '../images/left-arrow.svg';
+import TriangleIcon from '../images/down-filled-triangle.svg';
+import LogoIcon from '../images/p5js-logo-small.svg';
 
 const __process = (typeof global !== 'undefined' ? global : window).process;
 
@@ -229,11 +228,11 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+          <LogoIcon title="p5.js Logo" className="svg__logo" />
         </li>
         <li className="nav__item nav__item--no-icon">
           <Link to="/" className="nav__back-link">
-            <InlineSVG src={caretLeft} className="nav__back-icon" />
+            <CaretLeftIcon className="nav__back-icon" />
             <span className="nav__item-header">
               Back to Editor
             </span>
@@ -247,7 +246,7 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+          <LogoIcon title="p5.js Logo" className="svg__logo" />
         </li>
         <li className={navDropdownState.file}>
           <button
@@ -261,7 +260,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">File</span>
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -363,7 +362,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Edit</span>
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" />
           </button>
           <ul className="nav__dropdown" >
             <li className="nav__dropdown-item">
@@ -423,7 +422,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Sketch</span>
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -498,7 +497,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Help</span>
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -575,7 +574,7 @@ class Nav extends React.PureComponent {
             }}
           >
             My Account
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx
index 88c9f313..65ef0555 100644
--- a/client/components/NavBasic.jsx
+++ b/client/components/NavBasic.jsx
@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
-const logoUrl = require('../images/p5js-logo-small.svg');
-const arrowUrl = require('../images/triangle-arrow-left.svg');
+import LogoIcon from '../images/p5js-logo-small.svg';
+import ArrowIcon from '../images/triangle-arrow-left.svg';
 
 class NavBasic extends React.PureComponent {
   static defaultProps = {
@@ -15,13 +14,13 @@ class NavBasic extends React.PureComponent {
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
         <ul className="nav__items-left">
           <li className="nav__item-logo">
-            <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+            <LogoIcon title="p5.js Logo" className="svg__logo" />
           </li>
           { this.props.onBack && (
             <li className="nav__item">
               <button onClick={this.props.onBack}>
                 <span className="nav__item-header">
-                  <InlineSVG src={arrowUrl} alt="Left arrow" />
+                  <ArrowIcon title="Left arrow" />
                 </span>
                 Back to the editor
               </button>
diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx
index 8afdcb9d..7faaf622 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.jsx
@@ -1,16 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
 
-const logoUrl = require('../images/p5js-logo-small.svg');
-const editorUrl = require('../images/code.svg');
+import LogoIcon from '../images/p5js-logo-small.svg';
+import CodeIcon from '../images/code.svg';
 
 const PreviewNav = ({ owner, project }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+        <LogoIcon title="p5.js Logo" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
       <p className="toolbar__project-owner">by</p>
@@ -18,7 +17,7 @@ const PreviewNav = ({ owner, project }) => (
     </div>
     <div className="nav__items-right">
       <Link to={`/${owner.username}/sketches/${project.id}`}>
-        <InlineSVG className="preview-nav__editor-svg" src={editorUrl} />
+        <CodeIcon className="preview-nav__editor-svg" />
       </Link>
     </div>
   </nav>
diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 415a9a0e..712583c3 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { browserHistory } from 'react-router';
 
-const exitUrl = require('../../../images/exit.svg');
+import ExitIcon from '../../../images/exit.svg';
 
 class Overlay extends React.Component {
   constructor(props) {
@@ -82,7 +81,7 @@ class Overlay extends React.Component {
               <div className="overlay__actions">
                 {actions}
                 <button className="overlay__close-button" onClick={this.close} >
-                  <InlineSVG src={exitUrl} alt="close overlay" />
+                  <ExitIcon title="close overlay" />
                 </button>
               </div>
             </header>
diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index a8133e98..dbe86f30 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { Helmet } from 'react-helmet';
 
-const squareLogoUrl = require('../../../images/p5js-square-logo.svg');
-// const playUrl = require('../../../images/play.svg');
-const asteriskUrl = require('../../../images/p5-asterisk.svg');
+import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
+// import PlayIcon from '../../../images/play.svg';
+import AsteriskIcon from '../../../images/p5-asterisk.svg';
 
 function About(props) {
   return (
@@ -13,7 +12,7 @@ function About(props) {
         <title>p5.js Web Editor | About</title>
       </Helmet>
       <div className="about__content-column">
-        <InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
+        <SquareLogoIcon className="about__logo" title="p5.js Square Logo" />
         {/* Video button to hello p5 video page */}
         {/* <p className="about__play-video">
           <a
@@ -21,7 +20,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" />
+            <PlayIcon className="about__play-video-button" title="Play Hello Video" />
           Play hello! video</a>
         </p>  */}
       </div>
@@ -33,7 +32,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
             Examples
           </a>
         </p>
@@ -43,7 +42,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
             Learn
           </a>
         </p>
@@ -56,7 +55,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
             Libraries
           </a>
         </p>
@@ -66,7 +65,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
             Reference
           </a>
         </p>
@@ -76,7 +75,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
             Forum
           </a>
         </p>
diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx
index da834dc2..50b90dad 100644
--- a/client/modules/IDE/components/AssetList.jsx
+++ b/client/modules/IDE/components/AssetList.jsx
@@ -5,11 +5,10 @@ import { bindActionCreators } from 'redux';
 import { Link } from 'react-router';
 import { Helmet } from 'react-helmet';
 import prettyBytes from 'pretty-bytes';
-import InlineSVG from 'react-inlinesvg';
 
 import Loader from '../../App/components/loader';
 import * as AssetActions from '../actions/assets';
-import downFilledTriangle from '../../../images/down-filled-triangle.svg';
+import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
 class AssetListRowBase extends React.Component {
   constructor(props) {
@@ -87,7 +86,7 @@ class AssetListRowBase extends React.Component {
             onBlur={this.onBlurComponent}
             onFocus={this.onFocusComponent}
           >
-            <InlineSVG src={downFilledTriangle} alt="Menu" />
+            <DownFilledTriangleIcon title="Menu" />
           </button>
           {optionsOpen &&
             <ul
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index e39d3c86..7a09aa5b 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import InlineSVG from 'react-inlinesvg';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
@@ -19,8 +18,8 @@ import { SketchSearchbar } from '../Searchbar';
 
 import CollectionListRow from './CollectionListRow';
 
-const arrowUp = require('../../../../images/sort-arrow-up.svg');
-const arrowDown = require('../../../../images/sort-arrow-down.svg');
+import ArrowUpIcon from '../../../../images/sort-arrow-up.svg';
+import ArrowDownIcon from '../../../../images/sort-arrow-down.svg';
 
 class CollectionList extends React.Component {
   constructor(props) {
@@ -94,10 +93,10 @@ class CollectionList extends React.Component {
         <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <InlineSVG src={arrowUp} />
+            <ArrowUpIcon />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <InlineSVG src={arrowDown} />
+            <ArrowDownIcon />
           }
         </button>
       </th>
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 0f7f9a53..47395192 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -1,7 +1,6 @@
 import format from 'date-fns/format';
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
@@ -10,7 +9,7 @@ import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
 
-const downFilledTriangle = require('../../../../images/down-filled-triangle.svg');
+import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
 
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
@@ -130,7 +129,7 @@ class CollectionListRowBase extends React.Component {
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
         >
-          <InlineSVG src={downFilledTriangle} alt="Menu" />
+          <DownFilledTriangleIcon title="Menu" />
         </button>
         {optionsOpen &&
           <ul
diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index dd24d7fe..08e98706 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -1,27 +1,26 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import { Console as ConsoleFeed } from 'console-feed';
 import {
   CONSOLE_FEED_WITHOUT_ICONS, CONSOLE_FEED_LIGHT_STYLES,
   CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_CONTRAST_STYLES
 } from '../../../styles/components/_console-feed.scss';
-import warnLightUrl from '../../../images/console-warn-light.svg';
-import warnDarkUrl from '../../../images/console-warn-dark.svg';
-import warnContrastUrl from '../../../images/console-warn-contrast.svg';
-import errorLightUrl from '../../../images/console-error-light.svg';
-import errorDarkUrl from '../../../images/console-error-dark.svg';
-import errorContrastUrl from '../../../images/console-error-contrast.svg';
-import debugLightUrl from '../../../images/console-debug-light.svg';
-import debugDarkUrl from '../../../images/console-debug-dark.svg';
-import debugContrastUrl from '../../../images/console-debug-contrast.svg';
-import infoLightUrl from '../../../images/console-info-light.svg';
-import infoDarkUrl from '../../../images/console-info-dark.svg';
-import infoContrastUrl from '../../../images/console-info-contrast.svg';
+import warnLightUrl from '../../../images/console-warn-light.svg?byUrl';
+import warnDarkUrl from '../../../images/console-warn-dark.svg?byUrl';
+import warnContrastUrl from '../../../images/console-warn-contrast.svg?byUrl';
+import errorLightUrl from '../../../images/console-error-light.svg?byUrl';
+import errorDarkUrl from '../../../images/console-error-dark.svg?byUrl';
+import errorContrastUrl from '../../../images/console-error-contrast.svg?byUrl';
+import debugLightUrl from '../../../images/console-debug-light.svg?byUrl';
+import debugDarkUrl from '../../../images/console-debug-dark.svg?byUrl';
+import debugContrastUrl from '../../../images/console-debug-contrast.svg?byUrl';
+import infoLightUrl from '../../../images/console-info-light.svg?byUrl';
+import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl';
+import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
 
-const upArrowUrl = require('../../../images/up-arrow.svg');
-const downArrowUrl = require('../../../images/down-arrow.svg');
+import UpArrowIcon from '../../../images/up-arrow.svg';
+import DownArrowIcon from '../../../images/down-arrow.svg';
 
 class Console extends React.Component {
   componentDidUpdate(prevProps) {
@@ -99,10 +98,10 @@ class Console extends React.Component {
               onClick={this.props.collapseConsole}
               aria-label="collapse console"
             >
-              <InlineSVG src={downArrowUrl} />
+              <DownArrowIcon />
             </button>
             <button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="expand console">
-              <InlineSVG src={upArrowUrl} />
+              <UpArrowIcon />
             </button>
           </div>
         </div>
diff --git a/client/modules/IDE/components/CopyableInput.jsx b/client/modules/IDE/components/CopyableInput.jsx
index 2ebc9547..954a877f 100644
--- a/client/modules/IDE/components/CopyableInput.jsx
+++ b/client/modules/IDE/components/CopyableInput.jsx
@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Clipboard from 'clipboard';
-import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 
-import shareUrl from '../../../images/share.svg';
+import ShareIcon from '../../../images/share.svg';
 
 class CopyableInput extends React.Component {
   constructor(props) {
@@ -71,7 +70,7 @@ class CopyableInput extends React.Component {
             href={value}
             className="copyable-input__preview"
           >
-            <InlineSVG src={shareUrl} alt={`open ${label} view in new tab`} />
+            <ShareIcon title={`open ${label} view in new tab`} />
           </a>
         }
       </div>
diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index eef5e0b8..7a59a283 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -1,12 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
-const editIconUrl = require('../../../images/pencil.svg');
-
-function EditIcon() {
-  return <InlineSVG className="editable-input__icon" src={editIconUrl} alt="Edit" />;
-}
+import EditIcon from '../../../images/pencil.svg';
 
 function EditableInput({
   validate, value, emptyPlaceholder, InputComponent, inputProps, onChange
@@ -54,7 +49,7 @@ function EditableInput({
     <span className={classes}>
       <button className="editable-input__label" onClick={beginEditing}>
         <span>{displayValue}</span>
-        <EditIcon />
+        <EditIcon className="editable-input__icon" />
       </button>
 
       <InputComponent
diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index 95f9ba9b..f11dec9b 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -24,7 +24,6 @@ import 'codemirror/addon/edit/matchbrackets';
 import { JSHINT } from 'jshint';
 import { CSSLint } from 'csslint';
 import { HTMLHint } from 'htmlhint';
-import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
 import '../../../utils/htmlmixed';
@@ -36,6 +35,11 @@ import { metaKey, } from '../../../utils/metaKey';
 
 import search from '../../../utils/codemirror-search';
 
+import beepUrl from '../../../sounds/audioAlert.mp3';
+import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
+import RightArrowIcon from '../../../images/right-arrow.svg';
+import LeftArrowIcon from '../../../images/left-arrow.svg';
+
 search(CodeMirror);
 
 const beautifyCSS = beautifyJS.css;
@@ -45,11 +49,6 @@ window.JSHINT = JSHINT;
 window.CSSLint = CSSLint;
 window.HTMLHint = HTMLHint;
 
-const beepUrl = require('../../../sounds/audioAlert.mp3');
-const unsavedChangesDotUrl = require('../../../images/unsaved-changes-dot.svg');
-const rightArrowUrl = require('../../../images/right-arrow.svg');
-const leftArrowUrl = require('../../../images/left-arrow.svg');
-
 const IS_TAB_INDENT = false;
 const INDENTATION_AMOUNT = 2;
 
@@ -325,19 +324,21 @@ class Editor extends React.Component {
             className="sidebar__contract"
             onClick={this.props.collapseSidebar}
           >
-            <InlineSVG src={leftArrowUrl} />
+            <LeftArrowIcon />
           </button>
           <button
             aria-label="expand file navigation"
             className="sidebar__expand"
             onClick={this.props.expandSidebar}
           >
-            <InlineSVG src={rightArrowUrl} />
+            <RightArrowIcon />
           </button>
           <div className="editor__file-name">
             <span>
               {this.props.file.name}
-              {this.props.unsavedChanges ? <InlineSVG src={unsavedChangesDotUrl} /> : null}
+              <span className="editor__unsaved-changes">
+                {this.props.unsavedChanges ? <UnsavedChangesDotIcon /> : null}
+              </span>
             </span>
             <Timer
               projectSavedTime={this.props.projectSavedTime}
diff --git a/client/modules/IDE/components/Feedback.jsx b/client/modules/IDE/components/Feedback.jsx
index 49b1b42d..8ebf18fe 100644
--- a/client/modules/IDE/components/Feedback.jsx
+++ b/client/modules/IDE/components/Feedback.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { Helmet } from 'react-helmet';
-import githubLogoUrl from '../../../images/github.svg';
+import GitHubLogo from '../../../images/github.svg';
 
 function Feedback(props) {
   return (
@@ -24,7 +23,7 @@ function Feedback(props) {
             className="feedback__github-link"
           >
             Go to Github
-            <InlineSVG className="feedback__github-logo" src={githubLogoUrl} />
+            <GitHubLogo className="feedback__github-logo" />
           </a>
         </p>
       </div>
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 4d560fc1..249307e9 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -2,14 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../actions/ide';
 import * as FileActions from '../actions/files';
-import downArrowUrl from '../../../images/down-filled-triangle.svg';
-import folderRightUrl from '../../../images/triangle-arrow-right.svg';
-import folderDownUrl from '../../../images/triangle-arrow-down.svg';
-import fileUrl from '../../../images/file.svg';
+import DownArrowIcon from '../../../images/down-filled-triangle.svg';
+import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
+import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
+import FileIcon from '../../../images/file.svg';
 
 export class FileNode extends React.Component {
   constructor(props) {
@@ -185,7 +184,7 @@ export class FileNode extends React.Component {
             <span className="file-item__spacer"></span>
             { isFile &&
               <span className="sidebar__file-item-icon">
-                <InlineSVG src={fileUrl} />
+                <FileIcon />
               </span>
             }
             { isFolder &&
@@ -194,13 +193,13 @@ export class FileNode extends React.Component {
                   className="sidebar__file-item-closed"
                   onClick={this.showFolderChildren}
                 >
-                  <InlineSVG className="folder-right" src={folderRightUrl} />
+                  <FolderRightIcon className="folder-right" />
                 </button>
                 <button
                   className="sidebar__file-item-open"
                   onClick={this.hideFolderChildren}
                 >
-                  <InlineSVG className="folder-down" src={folderDownUrl} />
+                  <FolderDownIcon className="folder-down" />
                 </button>
               </div>
             }
@@ -229,7 +228,7 @@ export class FileNode extends React.Component {
               onBlur={this.onBlurComponent}
               onFocus={this.onFocusComponent}
             >
-              <InlineSVG src={downArrowUrl} />
+              <DownArrowIcon />
             </button>
             <div className="sidebar__file-item-options">
               <ul title="file options">
diff --git a/client/modules/IDE/components/NewFileModal.jsx b/client/modules/IDE/components/NewFileModal.jsx
index 36c3cc4d..b8fff2af 100644
--- a/client/modules/IDE/components/NewFileModal.jsx
+++ b/client/modules/IDE/components/NewFileModal.jsx
@@ -3,13 +3,12 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import { reduxForm } from 'redux-form';
-import InlineSVG from 'react-inlinesvg';
 import NewFileForm from './NewFileForm';
 import { closeNewFileModal } from '../actions/ide';
 import { createFile } from '../actions/files';
 import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
-const exitUrl = require('../../../images/exit.svg');
+import ExitIcon from '../../../images/exit.svg';
 
 
 // At some point this will probably be generalized to a generic modal
@@ -36,7 +35,7 @@ class NewFileModal extends React.Component {
           <div className="modal__header">
             <h2 className="modal__title">Create File</h2>
             <button className="modal__exit-button" onClick={this.props.closeNewFileModal}>
-              <InlineSVG src={exitUrl} alt="Close New File Modal" />
+              <ExitIcon title="Close New File Modal" />
             </button>
           </div>
           <NewFileForm
diff --git a/client/modules/IDE/components/NewFolderModal.jsx b/client/modules/IDE/components/NewFolderModal.jsx
index 4af43a89..6f9ac5c9 100644
--- a/client/modules/IDE/components/NewFolderModal.jsx
+++ b/client/modules/IDE/components/NewFolderModal.jsx
@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { reduxForm } from 'redux-form';
-import InlineSVG from 'react-inlinesvg';
 import NewFolderForm from './NewFolderForm';
 
-const exitUrl = require('../../../images/exit.svg');
+import ExitIcon from '../../../images/exit.svg';
 
 class NewFolderModal extends React.Component {
   componentDidMount() {
@@ -18,7 +17,7 @@ class NewFolderModal extends React.Component {
           <div className="modal__header">
             <h2 className="modal__title">Create Folder</h2>
             <button className="modal__exit-button" onClick={this.props.closeModal}>
-              <InlineSVG src={exitUrl} alt="Close New Folder Modal" />
+              <ExitIcon title="Close New Folder Modal" />
             </button>
           </div>
           <NewFolderForm {...this.props} />
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 5b2a2898..4abd970b 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -1,15 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { Helmet } from 'react-helmet';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 // import { bindActionCreators } from 'redux';
 // import { connect } from 'react-redux';
 // import * as PreferencesActions from '../actions/preferences';
 
-const plusUrl = require('../../../images/plus.svg');
-const minusUrl = require('../../../images/minus.svg');
-const beepUrl = require('../../../sounds/audioAlert.mp3');
+import PlusIcon from '../../../images/plus.svg';
+import MinusIcon from '../../../images/minus.svg';
+import beepUrl from '../../../sounds/audioAlert.mp3';
 
 class Preferences extends React.Component {
   constructor(props) {
@@ -150,7 +149,7 @@ class Preferences extends React.Component {
                 aria-label="decrease font size"
                 disabled={this.state.fontSize <= 8}
               >
-                <InlineSVG src={minusUrl} alt="Decrease Font Size" />
+                <MinusIcon title="Decrease Font Size" />
                 <h6 className="preference__label">Decrease</h6>
               </button>
               <form onSubmit={this.onFontInputSubmit}>
@@ -171,7 +170,7 @@ class Preferences extends React.Component {
                 aria-label="increase font size"
                 disabled={this.state.fontSize >= 36}
               >
-                <InlineSVG src={plusUrl} alt="Increase Font Size" />
+                <PlusIcon title="Increase Font Size" />
                 <h6 className="preference__label">Increase</h6>
               </button>
             </div>
diff --git a/client/modules/IDE/components/QuickAddList/Icons.jsx b/client/modules/IDE/components/QuickAddList/Icons.jsx
index 41e0c52f..852e6787 100644
--- a/client/modules/IDE/components/QuickAddList/Icons.jsx
+++ b/client/modules/IDE/components/QuickAddList/Icons.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import InlineSVG from 'react-inlinesvg';
 
-const check = require('../../../../images/check_encircled.svg');
-const close = require('../../../../images/close.svg');
+import CheckIcon from '../../../../images/check_encircled.svg';
+import CloseIcon from '../../../../images/close.svg';
 
 const Icons = ({ isAdded }) => {
   const classes = [
@@ -13,9 +12,9 @@ const Icons = ({ isAdded }) => {
 
   return (
     <div className={classes}>
-      <InlineSVG className="quick-add__remove-icon" src={close} alt="Remove from collection" />
-      <InlineSVG className="quick-add__in-icon" src={check} alt="In collection" />
-      <InlineSVG className="quick-add__add-icon" src={close} alt="Add to collection" />
+      <CloseIcon className="quick-add__remove-icon" title="Remove from collection" />
+      <CheckIcon className="quick-add__in-icon" title="In collection" />
+      <CloseIcon className="quick-add__add-icon" title="Add to collection" />
     </div>
   );
 };
diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index b602d874..0eb9752d 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { throttle } from 'lodash';
 
-const searchIcon = require('../../../../images/magnifyingglass.svg');
+import SearchIcon from '../../../../images/magnifyingglass.svg';
 
 class Searchbar extends React.Component {
   constructor(props) {
@@ -46,7 +45,7 @@ class Searchbar extends React.Component {
     return (
       <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
         <div className="searchbar__button">
-          <InlineSVG className="searchbar__icon" src={searchIcon} />
+          <SearchIcon className="searchbar__icon" />
         </div>
         <input
           className="searchbar__input"
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 87b2c13d..cfc8cb95 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import InlineSVG from 'react-inlinesvg';
 import ConnectedFileNode from './FileNode';
 
-const downArrowUrl = require('../../../images/down-filled-triangle.svg');
+import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 
 class Sidebar extends React.Component {
   constructor(props) {
@@ -84,7 +83,7 @@ class Sidebar extends React.Component {
               onBlur={this.onBlurComponent}
               onFocus={this.onFocusComponent}
             >
-              <InlineSVG src={downArrowUrl} />
+              <DownArrowIcon />
             </button>
             <ul className="sidebar__project-options">
               <li>
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 7633e6e8..bb09761f 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -2,7 +2,6 @@ import format from 'date-fns/format';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import InlineSVG from 'react-inlinesvg';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
@@ -19,9 +18,9 @@ import Loader from '../../App/components/loader';
 import Overlay from '../../App/components/Overlay';
 import AddToCollectionList from './AddToCollectionList';
 
-const arrowUp = require('../../../images/sort-arrow-up.svg');
-const arrowDown = require('../../../images/sort-arrow-down.svg');
-const downFilledTriangle = require('../../../images/down-filled-triangle.svg');
+import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
+import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
+import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
 class SketchListRowBase extends React.Component {
   constructor(props) {
@@ -169,7 +168,7 @@ class SketchListRowBase extends React.Component {
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
         >
-          <InlineSVG src={downFilledTriangle} alt="Menu" />
+          <DownFilledTriangleIcon title="Menu" />
         </button>
         {optionsOpen &&
           <ul
@@ -380,10 +379,10 @@ class SketchList extends React.Component {
         <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <InlineSVG src={arrowUp} />
+            <ArrowUpIcon />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <InlineSVG src={arrowDown} />
+            <ArrowDownIcon />
           }
         </button>
       </th>
diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx
index 81440e80..9392cd2e 100644
--- a/client/modules/IDE/components/Toast.jsx
+++ b/client/modules/IDE/components/Toast.jsx
@@ -2,10 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import InlineSVG from 'react-inlinesvg';
 import * as ToastActions from '../actions/toast';
 
-const exitUrl = require('../../../images/exit.svg');
+import ExitIcon from '../../../images/exit.svg';
 
 function Toast(props) {
   return (
@@ -14,7 +13,7 @@ function Toast(props) {
         {props.text}
       </p>
       <button className="toast__close" onClick={props.hideToast}>
-        <InlineSVG src={exitUrl} alt="Close Keyboard Shortcuts Overlay" />
+        <ExitIcon title="Close Keyboard Shortcuts Overlay" />
       </button>
     </section>
   );
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
index 35c29f7d..28fb9fb4 100644
--- a/client/modules/IDE/components/Toolbar.jsx
+++ b/client/modules/IDE/components/Toolbar.jsx
@@ -3,16 +3,14 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import classNames from 'classnames';
-import InlineSVG from 'react-inlinesvg';
-
 import * as IDEActions from '../actions/ide';
 import * as preferenceActions from '../actions/preferences';
 import * as projectActions from '../actions/project';
 
-const playUrl = require('../../../images/play.svg');
-const stopUrl = require('../../../images/stop.svg');
-const preferencesUrl = require('../../../images/preferences.svg');
-const editProjectNameUrl = require('../../../images/pencil.svg');
+import PlayIcon from '../../../images/play.svg';
+import StopIcon from '../../../images/stop.svg';
+import PreferencesIcon from '../../../images/preferences.svg';
+import EditProjectNameIcon from '../../../images/pencil.svg';
 
 class Toolbar extends React.Component {
   constructor(props) {
@@ -73,7 +71,7 @@ class Toolbar extends React.Component {
           aria-label="play sketch"
           disabled={this.props.infiniteLoop}
         >
-          <InlineSVG src={playUrl} alt="Play Sketch" />
+          <PlayIcon title="Play Sketch" />
         </button>
         <button
           className={playButtonClass}
@@ -81,14 +79,14 @@ class Toolbar extends React.Component {
           aria-label="play only visual sketch"
           disabled={this.props.infiniteLoop}
         >
-          <InlineSVG src={playUrl} alt="Play only visual Sketch" />
+          <PlayIcon title="Play only visual Sketch" />
         </button>
         <button
           className={stopButtonClass}
           onClick={this.props.stopSketch}
           aria-label="stop sketch"
         >
-          <InlineSVG src={stopUrl} alt="Stop Sketch" />
+          <StopIcon alt="Stop Sketch" />
         </button>
         <div className="toolbar__autorefresh">
           <input
@@ -119,7 +117,7 @@ class Toolbar extends React.Component {
             <span>{this.props.project.name}</span>
             {
               this.canEditProjectName() &&
-              <InlineSVG className="toolbar__edit-name-button" src={editProjectNameUrl} alt="Edit Project Name" />
+              <EditProjectNameIcon className="toolbar__edit-name-button" title="Edit Project Name" />
             }
           </a>
           <input
@@ -153,7 +151,7 @@ class Toolbar extends React.Component {
           onClick={this.props.openPreferences}
           aria-label="preferences"
         >
-          <InlineSVG src={preferencesUrl} alt="Preferences" />
+          <PreferencesIcon role="img" />
         </button>
       </div>
     );
diff --git a/client/modules/IDE/components/UploadFileModal.jsx b/client/modules/IDE/components/UploadFileModal.jsx
index 491a9d10..4f3d3522 100644
--- a/client/modules/IDE/components/UploadFileModal.jsx
+++ b/client/modules/IDE/components/UploadFileModal.jsx
@@ -2,11 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
 import prettyBytes from 'pretty-bytes';
 import FileUploader from './FileUploader';
 import { getreachedTotalSizeLimit } from '../selectors/users';
-import exitUrl from '../../../images/exit.svg';
+import ExitIcon from '../../../images/exit.svg';
 
 const __process = (typeof global !== 'undefined' ? global : window).process;
 const limit = __process.env.UPLOAD_LIMIT || 250000000;
@@ -34,7 +33,7 @@ class UploadFileModal extends React.Component {
           <div className="modal__header">
             <h2 className="modal__title">Upload File</h2>
             <button className="modal__exit-button" onClick={this.props.closeModal}>
-              <InlineSVG src={exitUrl} alt="Close New File Modal" />
+              <ExitIcon title="Close New File Modal" />
             </button>
           </div>
           { this.props.reachedTotalSizeLimit &&
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index dc2f87fa..9e7493f1 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
 import CopyableInput from '../../IDE/components/CopyableInput';
 
 import APIKeyList from './APIKeyList';
 
-const plusIcon = require('../../../images/plus-icon.svg');
+import PlusIcon from '../../../images/plus-icon.svg';
 
 export const APIKeyPropType = PropTypes.shape({
   id: PropTypes.object.isRequired,
@@ -86,7 +85,7 @@ class APIKeyForm extends React.Component {
               disabled={this.state.keyLabel === ''}
               type="submit"
             >
-              <InlineSVG src={plusIcon} className="api-key-form__create-icon" />
+              <PlusIcon className="api-key-form__create-icon" />
               Create
             </button>
           </form>
diff --git a/client/modules/User/components/APIKeyList.jsx b/client/modules/User/components/APIKeyList.jsx
index a298196b..0c10f426 100644
--- a/client/modules/User/components/APIKeyList.jsx
+++ b/client/modules/User/components/APIKeyList.jsx
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import format from 'date-fns/format';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import orderBy from 'lodash/orderBy';
 
 import { APIKeyPropType } from './APIKeyForm';
 
-const trashCan = require('../../../images/trash-can.svg');
+import TrashCanIcon from '../../../images/trash-can.svg';
 
 function APIKeyList({ apiKeys, onRemove }) {
   return (
@@ -33,7 +32,7 @@ function APIKeyList({ apiKeys, onRemove }) {
               <td>{lastUsed}</td>
               <td className="api-key-list__action">
                 <button className="api-key-list__delete-button" onClick={() => onRemove(key)}>
-                  <InlineSVG src={trashCan} alt="Delete Key" />
+                  <TrashCanIcon title="Delete Key" />
                 </button>
               </td>
             </tr>
diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 0c8723b0..bb798161 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -2,7 +2,6 @@ import format from 'date-fns/format';
 import PropTypes from 'prop-types';
 import React, { useState, useRef, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
-import InlineSVG from 'react-inlinesvg';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
@@ -20,11 +19,11 @@ import Overlay from '../../App/components/Overlay';
 import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { SketchSearchbar } from '../../IDE/components/Searchbar';
-import dropdownArrow from '../../../images/down-arrow.svg';
 
-const arrowUp = require('../../../images/sort-arrow-up.svg');
-const arrowDown = require('../../../images/sort-arrow-down.svg');
-const removeIcon = require('../../../images/close.svg');
+import DropdownArrowIcon from '../../../images/down-arrow.svg';
+import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
+import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
+import RemoveIcon from '../../../images/close.svg';
 
 const ShareURL = ({ value }) => {
   const [showURL, setShowURL] = useState(false);
@@ -56,7 +55,7 @@ const ShareURL = ({ value }) => {
         onClick={() => setShowURL(!showURL)}
       >
         <span>Share</span>
-        <InlineSVG className="collection-share__arrow" src={dropdownArrow} />
+        <DropdownArrowIcon className="collection-share__arrow" />
       </button>
       { showURL &&
         <div className="collection__share-dropdown">
@@ -99,7 +98,7 @@ class CollectionItemRowBase extends React.Component {
             className="collection-row__remove-button"
             onClick={this.handleSketchRemove}
           >
-            <InlineSVG src={removeIcon} alt="Remove" />
+            <RemoveIcon title="Remove" />
           </button>
         </td>
       </tr>);
@@ -307,10 +306,10 @@ class Collection extends React.Component {
         <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <InlineSVG src={arrowUp} />
+            <ArrowUpIcon />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <InlineSVG src={arrowDown} />
+            <ArrowDownIcon />
           }
         </button>
       </th>
diff --git a/client/modules/User/components/GithubButton.jsx b/client/modules/User/components/GithubButton.jsx
index b612a2bb..58bc2f64 100644
--- a/client/modules/User/components/GithubButton.jsx
+++ b/client/modules/User/components/GithubButton.jsx
@@ -1,8 +1,7 @@
-import InlineSVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const githubUrl = require('../../../images/github.svg');
+import GithubIcon from '../../../images/github.svg';
 
 function GithubButton(props) {
   return (
@@ -10,7 +9,7 @@ function GithubButton(props) {
       className="github-button"
       href="/auth/github"
     >
-      <InlineSVG src={githubUrl} className="github-icon" />
+      <GithubIcon className="github-icon" />
       <span>{props.buttonText}</span>
     </a>
   );
diff --git a/client/modules/User/components/GoogleButton.jsx b/client/modules/User/components/GoogleButton.jsx
index f431379c..5f07f5c7 100644
--- a/client/modules/User/components/GoogleButton.jsx
+++ b/client/modules/User/components/GoogleButton.jsx
@@ -1,8 +1,7 @@
-import InlineSVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import googleUrl from '../../../images/google.svg';
+import GoogleIcon from '../../../images/google.svg';
 
 function GoogleButton(props) {
   return (
@@ -10,7 +9,7 @@ function GoogleButton(props) {
       className="google-button"
       href="/auth/google/"
     >
-      <InlineSVG src={googleUrl} className="google-icon" />
+      <GoogleIcon className="google-icon" />
       <span>{props.buttonText}</span>
     </a>
   );
diff --git a/client/styles/abstracts/_mixins.scss b/client/styles/abstracts/_mixins.scss
index 1d51f204..2bbd8dd3 100644
--- a/client/styles/abstracts/_mixins.scss
+++ b/client/styles/abstracts/_mixins.scss
@@ -21,13 +21,13 @@
 @mixin icon() {
   @include themify() {
     color: getThemifyVariable('icon-color');
-    & g, & polygon {
+    & g, & polygon, & path {
       opacity: 1;
       fill: getThemifyVariable('icon-color');
     }
     &:hover {
       color: getThemifyVariable('icon-hover-color');
-      & g, & polygon {
+      & g, & polygon, & path {
         opacity: 1;
         fill: getThemifyVariable('icon-hover-color');
       }
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 4e0b172f..1c793d4b 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -5,26 +5,25 @@
 		width: #{44 / $base-font-size}rem;
 		text-align: center;
 		border-radius: 100%;
-		line-height: #{49 / $base-font-size}rem;
 		cursor: pointer;
 		border: none;
 		outline: none;
 		background-color: getThemifyVariable('toolbar-button-background-color');
 		color: getThemifyVariable('toolbar-button-color');
-		& g {
+		& g, & path {
 			fill: getThemifyVariable('toolbar-button-color');
 		}
 		&:hover {
 			background-color: getThemifyVariable('button-background-hover-color');
 			color: getThemifyVariable('button-hover-color');
 
-			& g {
+			& g, & path {
 				fill: getThemifyVariable('button-hover-color');
 			}
 		}
 		&--selected {
 	    background-color: getThemifyVariable('button-background-hover-color');
-	    & g {
+	    & g, & path {
 	        fill: getThemifyVariable('button-hover-color');
 	    }
 	  }
@@ -34,12 +33,12 @@
 %icon-toast{
 	@include themify() {
 		color: $toast-text-color
-		& g {
+		& g, & path {
 			fill: $toast-text-color
 		}
 		&:hover {
 			color: getThemifyVariable('icon-toast-hover-color');
-			& g {
+			& g, & path {
 				opacity: 1;
 				fill: getThemifyVariable('icon-toast-hover-color');
 			}
@@ -59,12 +58,12 @@
 
 %none-themify-icon-with-hover {
 	color: $medium-dark;
-	& g {
+	& g, & path {
 		fill: $medium-dark;
 	}
 	&:hover {
 		color: $p5js-pink;
-		& g {
+		& g, & path {
 			opacity: 1;
 			fill: $p5js-pink;
 		}
@@ -83,7 +82,7 @@
 		border: 2px solid getThemifyVariable('button-border-color');
 		border-radius: 2px;
 		padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
-		& g {
+		& g, & path {
 			fill: getThemifyVariable('button-color');
 			opacity: 1;
 		}
@@ -91,7 +90,7 @@
 			border-color: getThemifyVariable('button-background-hover-color');
 			background-color: getThemifyVariable('button-background-hover-color');
 			color: getThemifyVariable('button-hover-color');
-			& g {
+			& g, & path {
 				fill: getThemifyVariable('button-hover-color');
 			}
 		}
@@ -99,7 +98,7 @@
 			border-color: getThemifyVariable('button-background-active-color');
 			background-color: getThemifyVariable('button-background-active-color');
 			color: getThemifyVariable('button-active-color');
-			& g {
+			& g, & path {
 				fill: getThemifyVariable('button-active-color');
 			}
 		}
@@ -114,13 +113,13 @@
 		padding: 0;
 		margin-bottom: #{28 / $base-font-size}rem;
 		line-height: #{50 / $base-font-size}rem;
-		& g {
+		& g, & path {
 			fill: getThemifyVariable('modal-button-color');
 		}
 		&:enabled:hover {
 			background-color: getThemifyVariable('button-background-hover-color');
 			color: getThemifyVariable('button-hover-color');
-			& g {
+			& g, & path {
 				fill: getThemifyVariable('button-hover-color');
 			}
 		}
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 4fca97fd..80c924b1 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -88,8 +88,8 @@ $themes: (
     nav-border-color: $middle-light,
     error-color: $p5js-pink,
     table-row-stripe-color: $medium-light,
-    codefold-icon-open: url(../images/triangle-arrow-down.svg),
-    codefold-icon-closed: url(../images/triangle-arrow-right.svg),
+    codefold-icon-open: url(../images/triangle-arrow-down.svg?byUrl),
+    codefold-icon-closed: url(../images/triangle-arrow-right.svg?byUrl),
 
     primary-button-color: $lightest,
     primary-button-background-color: $p5js-pink,
@@ -163,8 +163,8 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5js-pink,
     table-row-stripe-color: $dark,
-    codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
-    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
+    codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
+    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 
     primary-button-color: $lightest,
     primary-button-background-color: $p5js-pink,
@@ -236,8 +236,8 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
     table-row-stripe-color: $dark,
-    codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
-    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
+    codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
+    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 
     primary-button-color: $lightest,
     primary-button-background-color: $p5js-pink,
diff --git a/client/styles/components/_api-key.scss b/client/styles/components/_api-key.scss
index ed519aea..82753102 100644
--- a/client/styles/components/_api-key.scss
+++ b/client/styles/components/_api-key.scss
@@ -20,6 +20,8 @@
 
 .api-key-form__create-icon {
   display: flex;
+  height: #{12 / $base-font-size}rem;
+  margin-right: #{3 / $base-font-size}rem;
 }
 
 .api-key-form__create-button .isvg {
@@ -73,7 +75,7 @@
       position: initial;
       left: 0;
       top: 0;
-        & g {
+        & g, & path {
           opacity: 1;
           fill: getThemifyVariable('icon-color');
         }
@@ -82,7 +84,7 @@
 
 .api-key-list__delete-button:hover {
   @include themify() {
-      & g {
+      & g, & path {
         opacity: 1;
         fill: getThemifyVariable('icon-hover-color');
       }
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index c0cd524d..6f7c0359 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -82,7 +82,7 @@
   height:#{25 / $base-font-size}rem;
 
   @include themify() {
-    & polygon {
+    & polygon, & path {
       fill: getThemifyVariable('inactive-text-color');
     }
   }
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index fbc1fed7..347e573b 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -158,12 +158,12 @@
   @include icon();
   @include themify() {
     // icon graphic
-    polygon {
+    path {
       fill: getThemifyVariable('table-button-color');
     }
 
     // icon background circle
-    path {
+    path:first-child {
       fill: getThemifyVariable('table-button-background-color');
     }
 
@@ -174,11 +174,11 @@
 
     &:hover,
     &:focus {
-      polygon {
+      path {
         fill: getThemifyVariable('table-button-hover-color');
       }
 
-      path {
+      path:first-child {
         fill: getThemifyVariable('table-button-background-hover-color');
       }
     }
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 109b069f..29e26f62 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -58,7 +58,8 @@
 	@include icon();
 	@include themify() {
 		& g,
-		& polygon {
+		& polygon,
+		& path {
 			fill: getThemifyVariable('secondary-text-color');
 		}
 	}
@@ -72,7 +73,8 @@
 	@include icon();
 	@include themify() {
 		& g,
-		& polygon {
+		& polygon,
+		& path {
 			fill: getThemifyVariable('secondary-text-color');
 		}
 	}
diff --git a/client/styles/components/_editable-input.scss b/client/styles/components/_editable-input.scss
index c64fd240..f750af0d 100644
--- a/client/styles/components/_editable-input.scss
+++ b/client/styles/components/_editable-input.scss
@@ -30,7 +30,7 @@ button.editable-input__label {
   width: 100%;
 }
 
-.editable-input__icon svg {
+.editable-input__icon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 8042f929..7fc22f8e 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -211,12 +211,12 @@ pre.CodeMirror-line {
 
 // Previous button
 .CodeMirror-search-button.prev::after {
-  background-image: url(../images/up-arrow.svg)
+  background-image: url(../images/up-arrow.svg?byUrl)
 }
 
 // Next button
 .CodeMirror-search-button.next::after {
-  background-image: url(../images/down-arrow.svg)
+  background-image: url(../images/down-arrow.svg?byUrl)
 }
 
 /*
@@ -247,7 +247,7 @@ pre.CodeMirror-line {
 
   @include icon();
 
-  background: transparent url(../images/exit.svg) no-repeat;
+  background: transparent url(../images/exit.svg?byUrl) no-repeat;
 }
 
 // foldgutter
@@ -391,3 +391,7 @@ pre.CodeMirror-line {
   display: flex;
   justify-content: space-between;
 }
+
+.editor__unsaved-changes {
+  margin-left: #{2 / $base-font-size}rem;
+}
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index fe9de97e..8a8ab05d 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -48,7 +48,8 @@
   padding-left: #{15 / $base-font-size}rem;
 }
 
-.nav__item-header-triangle polygon {
+.nav__item-header-triangle polygon,
+.nav__item-header-triangle path {
   @include themify() {
     fill: getThemifyVariable('icon-color');
   }
@@ -67,7 +68,8 @@
     }
   }
 
-  .nav__item-header-triangle polygon {
+  .nav__item-header-triangle polygon,
+  .nav__item-header-triangle path {
     @include themify() {
       fill: getThemifyVariable('nav-hover-color');
     }
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
index 442c3088..838a1d65 100644
--- a/client/styles/components/_quick-add.scss
+++ b/client/styles/components/_quick-add.scss
@@ -44,12 +44,12 @@
   @include icon();
   @include themify() {
     // icon graphic
-    polygon {
+    path {
       fill: getThemifyVariable('table-button-color');
     }
 
     // icon background circle
-    path {
+    path:first-child {
       fill: getThemifyVariable('table-button-background-color');
     }
 
@@ -68,15 +68,15 @@
   display: inline-block;
 }
 
-.quick-add__icon--in-collection .quick-add__in-icon svg {
+.quick-add__icon--in-collection .quick-add__in-icon {
   @include themify() {
     // icon graphic
-    polygon {
+    & path {
       fill: getThemifyVariable('table-button-active-color');
     }
 
     // icon background circle
-    path {
+    & path:first-child {
       fill: getThemifyVariable('table-button-background-active-color');
     }
   }
@@ -91,14 +91,12 @@
 .quick-add__item-toggle:focus {
   cursor: pointer;
   @include themify() {
-    .quick-add__icon {
-      polygon {
-        fill: getThemifyVariable('table-button-hover-color');
-      }
+    & .quick-add__icon path {
+      fill: getThemifyVariable('table-button-hover-color');
+    }
 
-      path {
-        fill: getThemifyVariable('table-button-background-hover-color');
-      }
+    & .quick-add__icon path:first-child {
+      fill: getThemifyVariable('table-button-background-hover-color');
     }
   }
 
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index de70b31c..962542d5 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -38,6 +38,8 @@ div.searchbar__button {
     height: #{27 / $base-font-size}rem;
     transform: scaleX(-1);
     padding-top: #{3 / $base-font-size}rem;
+  }
+  & path {
     @include themify() {
       fill: getThemifyVariable('input-text-color');
     }
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index d7b782af..ffafc439 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -188,17 +188,17 @@
   height: #{25 / $base-font-size}rem;
   width: #{49 / $base-font-size}rem;
   border-radius: 2px;
-  & svg {
-    height: #{25 / $base-font-size}rem;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
   @include themify() {
     background-color: getThemifyVariable("toolbar-button-background-color");
-    & polygon {
+    & polygon, & path {
       fill: getThemifyVariable("toolbar-button-color");
     }
     &:hover {
       background-color: getThemifyVariable("button-background-hover-color");
-      & polygon {
+      & polygon, & path {
         fill: getThemifyVariable("button-hover-color");
       }
     }
@@ -211,7 +211,7 @@
     cursor: e-resize;
   }
   .sidebar--contracted & {
-    display: inline-block;
+    display: flex;
   }
 }
 
@@ -236,7 +236,7 @@
 .sidebar__folder-icon {
   padding: #{4 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
-  & g {
+  & path {
     @include themify() {
       fill: map-get($theme-map, 'primary-text-color');
     }
@@ -249,7 +249,7 @@
 .sidebar__file-item-icon {
   padding: #{4 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
-  & g {
+  & path {
     @include themify() {
       fill: getThemifyVariable('secondary-text-color');
     }
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index ec5ec853..fbca9fd5 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -96,7 +96,7 @@
   width:#{25 / $base-font-size}rem;
   height:#{25 / $base-font-size}rem;
   @include themify() {
-      & polygon {
+      & polygon, & path {
         fill: getThemifyVariable('inactive-text-color');
       }
   }
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index dc160b5e..bbbaa534 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -4,17 +4,18 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		padding: 0 0 0 #{3 / $base-font-size}rem;
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
 		&:disabled {
 			cursor: auto;
-			& g {
+			& g, & path {
 				fill: getThemifyVariable('button-border-color');
 			}
 			&:hover {
 				background-color: getThemifyVariable('toolbar-button-background-color');
-				& g {
+				& g, & path {
 					fill: getThemifyVariable('button-border-color');
 				}
 			}
@@ -42,6 +43,7 @@
 		justify-content: center;
 		align-items: center;
 		margin-right: #{15 / $base-font-size}rem;
+		padding: 0;
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
@@ -61,13 +63,11 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		line-height: #{52 / $base-font-size}rem;
+		padding: 0;
 		&--selected {
 			@extend %toolbar-button--selected;
-			line-height: #{52 / $base-font-size}rem;
 		}
 	}
-	line-height: #{52 / $base-font-size}rem;
 	margin-left: auto;
 	& span {
 		padding-left: #{1 / $base-font-size}rem;
@@ -82,7 +82,7 @@
 .toolbar__logo {
 	margin-right: #{30 / $base-font-size}rem;
 	@include themify() {
-		& g {
+		& g, & path {
 			fill: getThemifyVariable('logo-color');
 		}
 	}
@@ -152,11 +152,8 @@
 .toolbar__edit-name-button {
 	display: inline-block;
 	vertical-align: top;
+	width: #{18 / $base-font-size}rem;
 	height: #{18 / $base-font-size}rem;
-	& svg {
-		width: #{18 / $base-font-size}rem;
-		height: #{18 / $base-font-size}rem;
-	}
 	@include themify() {
 		& path {
 			fill: getThemifyVariable('secondary-text-color');
diff --git a/package-lock.json b/package-lock.json
index 95dede48..04e10900 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -368,6 +368,30 @@
         }
       }
     },
+    "@babel/helper-builder-react-jsx-experimental": {
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.9.5.tgz",
+      "integrity": "sha512-HAagjAC93tk748jcXpZ7oYRZH485RCq/+yEv9SIWezHRPv9moZArTnkUNciUNzvwHUABmiWKlcxJvMcu59UwTg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.8.3",
+        "@babel/helper-module-imports": "^7.8.3",
+        "@babel/types": "^7.9.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.6.tgz",
+          "integrity": "sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.9.5",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "@babel/helper-call-delegate": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-call-delegate/-/helper-call-delegate-7.8.3.tgz",
@@ -1348,6 +1372,12 @@
         "@babel/types": "^7.4.4"
       }
     },
+    "@babel/helper-validator-identifier": {
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz",
+      "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==",
+      "dev": true
+    },
     "@babel/helper-wrap-function": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz",
@@ -2408,6 +2438,17 @@
         "@babel/plugin-syntax-jsx": "^7.8.3"
       }
     },
+    "@babel/plugin-transform-react-jsx-development": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.9.0.tgz",
+      "integrity": "sha512-tK8hWKrQncVvrhvtOiPpKrQjfNX3DtkNLSX4ObuGcpS9p0QrGetKmlySIGR07y48Zft8WVgPakqd/bk46JrMSw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-react-jsx-experimental": "^7.9.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-syntax-jsx": "^7.8.3"
+      }
+    },
     "@babel/plugin-transform-react-jsx-self": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.8.3.tgz",
@@ -2630,6 +2671,19 @@
         }
       }
     },
+    "@babel/preset-modules": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.3.tgz",
+      "integrity": "sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
     "@babel/preset-react": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.8.3.tgz",
@@ -3638,6 +3692,782 @@
       "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz",
       "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ=="
     },
+    "@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
+      "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
+      "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
+      "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
+      "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
+      "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
+      "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
+      "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-transform-svg-component": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.4.0.tgz",
+      "integrity": "sha512-zLl4Fl3NvKxxjWNkqEcpdSOpQ3LGVH2BNFQ6vjaK6sFo2IrSznrhURIPI0HAphKiiIwNYjAfE0TNoQDSZv0U9A==",
+      "dev": true
+    },
+    "@svgr/babel-preset": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.4.0.tgz",
+      "integrity": "sha512-Gyx7cCxua04DBtyILTYdQxeO/pwfTBev6+eXTbVbxe4HTGhOUW6yo7PSbG2p6eJMl44j6XSequ0ZDP7bl0nu9A==",
+      "dev": true,
+      "requires": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
+        "@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
+        "@svgr/babel-plugin-transform-svg-component": "^5.4.0"
+      }
+    },
+    "@svgr/core": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-hWGm1DCCvd4IEn7VgDUHYiC597lUYhFau2lwJBYpQWDirYLkX4OsXu9IslPgJ9UpP7wsw3n2Ffv9sW7SXJVfqQ==",
+      "dev": true,
+      "requires": {
+        "@svgr/plugin-jsx": "^5.4.0",
+        "camelcase": "^6.0.0",
+        "cosmiconfig": "^6.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
+          "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
+          "dev": true
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "import-fresh": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+          "dev": true
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "@svgr/hast-util-to-babel-ast": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.4.0.tgz",
+      "integrity": "sha512-+U0TZZpPsP2V1WvVhqAOSTk+N+CjYHdZx+x9UBa1eeeZDXwH8pt0CrQf2+SvRl/h2CAPRFkm+Ey96+jKP8Bsgg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.9.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.6.tgz",
+          "integrity": "sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.9.5",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@svgr/plugin-jsx": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.4.0.tgz",
+      "integrity": "sha512-SGzO4JZQ2HvGRKDzRga9YFSqOqaNrgLlQVaGvpZ2Iht2gwRp/tq+18Pvv9kS9ZqOMYgyix2LLxZMY1LOe9NPqw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.7.5",
+        "@svgr/babel-preset": "^5.4.0",
+        "@svgr/hast-util-to-babel-ast": "^5.4.0",
+        "svg-parser": "^2.0.2"
+      }
+    },
+    "@svgr/plugin-svgo": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.4.0.tgz",
+      "integrity": "sha512-3Cgv3aYi1l6SHyzArV9C36yo4kgwVdF3zPQUC6/aCDUeXAofDYwE5kk3e3oT5ZO2a0N3lB+lLGvipBG6lnG8EA==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^6.0.0",
+        "merge-deep": "^3.0.2",
+        "svgo": "^1.2.2"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "import-fresh": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+          "dev": true
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "@svgr/webpack": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.4.0.tgz",
+      "integrity": "sha512-LjepnS/BSAvelnOnnzr6Gg0GcpLmnZ9ThGFK5WJtm1xOqdBE/1IACZU7MMdVzjyUkfFqGz87eRE4hFaSLiUwYg==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.9.0",
+        "@babel/plugin-transform-react-constant-elements": "^7.9.0",
+        "@babel/preset-env": "^7.9.5",
+        "@babel/preset-react": "^7.9.4",
+        "@svgr/core": "^5.4.0",
+        "@svgr/plugin-jsx": "^5.4.0",
+        "@svgr/plugin-svgo": "^5.4.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
+          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.8.3"
+          }
+        },
+        "@babel/compat-data": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.9.6.tgz",
+          "integrity": "sha512-5QPTrNen2bm7RBc7dsOmcA5hbrS4O2Vhmk5XOL4zWW/zD/hV0iinpefDlkm+tBBy8kDtFaaeEvmAqt+nURAV2g==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.11.1",
+            "invariant": "^2.2.4",
+            "semver": "^5.5.0"
+          }
+        },
+        "@babel/core": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.6.tgz",
+          "integrity": "sha512-nD3deLvbsApbHAHttzIssYqgb883yU/d9roe4RZymBCDaZryMJDbptVpEpeQuRh4BJ+SYI8le9YGxKvFEvl1Wg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "@babel/generator": "^7.9.6",
+            "@babel/helper-module-transforms": "^7.9.0",
+            "@babel/helpers": "^7.9.6",
+            "@babel/parser": "^7.9.6",
+            "@babel/template": "^7.8.6",
+            "@babel/traverse": "^7.9.6",
+            "@babel/types": "^7.9.6",
+            "convert-source-map": "^1.7.0",
+            "debug": "^4.1.0",
+            "gensync": "^1.0.0-beta.1",
+            "json5": "^2.1.2",
+            "lodash": "^4.17.13",
+            "resolve": "^1.3.2",
+            "semver": "^5.4.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.6.tgz",
+          "integrity": "sha512-+htwWKJbH2bL72HRluF8zumBxzuX0ZZUFl3JLNyoUjM/Ho8wnVpPXM6aUz8cfKDqQ/h7zHqKt4xzJteUosckqQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.9.6",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-builder-react-jsx": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.9.0.tgz",
+          "integrity": "sha512-weiIo4gaoGgnhff54GQ3P5wsUQmnSwpkvU0r6ZHq6TzoSzKy4JxHEgnxNytaKbov2a9z/CVNyzliuCOUPEX3Jw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.8.3",
+            "@babel/types": "^7.9.0"
+          }
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.9.6.tgz",
+          "integrity": "sha512-x2Nvu0igO0ejXzx09B/1fGBxY9NXQlBW2kZsSxCJft+KHN8t9XWzIvFxtPHnBOAXpVsdxZKZFbRUC8TsNKajMw==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.9.6",
+            "browserslist": "^4.11.1",
+            "invariant": "^2.2.4",
+            "levenary": "^1.1.1",
+            "semver": "^5.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.9.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
+          "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.8.3",
+            "@babel/template": "^7.8.3",
+            "@babel/types": "^7.9.5"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz",
+          "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.8.3"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz",
+          "integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.8.3",
+            "@babel/helper-replace-supers": "^7.8.6",
+            "@babel/helper-simple-access": "^7.8.3",
+            "@babel/helper-split-export-declaration": "^7.8.3",
+            "@babel/template": "^7.8.6",
+            "@babel/types": "^7.9.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.9.6.tgz",
+          "integrity": "sha512-qX+chbxkbArLyCImk3bWV+jB5gTNU/rsze+JlcF6Nf8tVTigPJSI1o1oBow/9Resa1yehUO9lIipsmu9oG4RzA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.8.3",
+            "@babel/helper-optimise-call-expression": "^7.8.3",
+            "@babel/traverse": "^7.9.6",
+            "@babel/types": "^7.9.6"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
+          "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.8.3"
+          }
+        },
+        "@babel/helpers": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.6.tgz",
+          "integrity": "sha512-tI4bUbldloLcHWoRUMAj4g1bF313M/o6fBKhIsb3QnGVPwRm9JsNf/gqMkQ7zjqReABiffPV6RWj7hEglID5Iw==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.8.3",
+            "@babel/traverse": "^7.9.6",
+            "@babel/types": "^7.9.6"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
+          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.9.0",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.6.tgz",
+          "integrity": "sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==",
+          "dev": true
+        },
+        "@babel/plugin-proposal-object-rest-spread": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.6.tgz",
+          "integrity": "sha512-Ga6/fhGqA9Hj+y6whNpPv8psyaK5xzrQwSPsGPloVkvmH+PqW1ixdnfJ9uIO06OjQNYol3PMnfmJ8vfZtkzF+A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+            "@babel/plugin-transform-parameters": "^7.9.5"
+          }
+        },
+        "@babel/plugin-proposal-optional-chaining": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
+          "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/plugin-syntax-optional-chaining": "^7.8.0"
+          }
+        },
+        "@babel/plugin-transform-classes": {
+          "version": "7.9.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.9.5.tgz",
+          "integrity": "sha512-x2kZoIuLC//O5iA7PEvecB105o7TLzZo8ofBVhP79N+DO3jaX+KYfww9TQcfBEZD0nikNyYcGB1IKtRq36rdmg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.8.3",
+            "@babel/helper-define-map": "^7.8.3",
+            "@babel/helper-function-name": "^7.9.5",
+            "@babel/helper-optimise-call-expression": "^7.8.3",
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/helper-replace-supers": "^7.8.6",
+            "@babel/helper-split-export-declaration": "^7.8.3",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/plugin-transform-destructuring": {
+          "version": "7.9.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.9.5.tgz",
+          "integrity": "sha512-j3OEsGel8nHL/iusv/mRd5fYZ3DrOxWC82x0ogmdN/vHfAP4MYw+AFKYanzWlktNwikKvlzUV//afBW5FTp17Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-for-of": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz",
+          "integrity": "sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-modules-amd": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.6.tgz",
+          "integrity": "sha512-zoT0kgC3EixAyIAU+9vfaUVKTv9IxBDSabgHoUCBP6FqEJ+iNiN7ip7NBKcYqbfUDfuC2mFCbM7vbu4qJgOnDw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "^7.9.0",
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.6.tgz",
+          "integrity": "sha512-7H25fSlLcn+iYimmsNe3uK1at79IE6SKW9q0/QeEHTMC9MdOZ+4bA+T1VFB5fgOqBWoqlifXRzYD0JPdmIrgSQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "^7.9.0",
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/helper-simple-access": "^7.8.3",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/plugin-transform-modules-systemjs": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.6.tgz",
+          "integrity": "sha512-NW5XQuW3N2tTHim8e1b7qGy7s0kZ2OH3m5octc49K1SdAKGxYxeIx7hiIz05kS1R2R+hOWcsr1eYwcGhrdHsrg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-hoist-variables": "^7.8.3",
+            "@babel/helper-module-transforms": "^7.9.0",
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/plugin-transform-modules-umd": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz",
+          "integrity": "sha512-uTWkXkIVtg/JGRSIABdBoMsoIeoHQHPTL0Y2E7xf5Oj7sLqwVsNXOkNk0VJc7vF0IMBsPeikHxFjGe+qmwPtTQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "^7.9.0",
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-parameters": {
+          "version": "7.9.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.5.tgz",
+          "integrity": "sha512-0+1FhHnMfj6lIIhVvS4KGQJeuhe1GI//h5uptK4PvLt+BGBxsoUJbd3/IW002yk//6sZPlFgsG1hY6OHLcy6kA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.8.3",
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-react-constant-elements": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.9.0.tgz",
+          "integrity": "sha512-wXMXsToAUOxJuBBEHajqKLFWcCkOSLshTI2ChCFFj1zDd7od4IOxiwLCOObNUvOpkxLpjIuaIdBMmNt6ocCPAw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-react-jsx": {
+          "version": "7.9.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz",
+          "integrity": "sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-builder-react-jsx": "^7.9.0",
+            "@babel/helper-builder-react-jsx-experimental": "^7.9.0",
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/plugin-syntax-jsx": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-react-jsx-self": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.9.0.tgz",
+          "integrity": "sha512-K2ObbWPKT7KUTAoyjCsFilOkEgMvFG+y0FqOl6Lezd0/13kMkkjHskVsZvblRPj1PHA44PrToaZANrryppzTvQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/plugin-syntax-jsx": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-react-jsx-source": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz",
+          "integrity": "sha512-K6m3LlSnTSfRkM6FcRk8saNEeaeyG5k7AVkBU2bZK3+1zdkSED3qNdsWrUgQBeTVD2Tp3VMmerxVO2yM5iITmw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/plugin-syntax-jsx": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-regenerator": {
+          "version": "7.8.7",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz",
+          "integrity": "sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==",
+          "dev": true,
+          "requires": {
+            "regenerator-transform": "^0.14.2"
+          }
+        },
+        "@babel/preset-env": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.9.6.tgz",
+          "integrity": "sha512-0gQJ9RTzO0heXOhzftog+a/WyOuqMrAIugVYxMYf83gh1CQaQDjMtsOpqOwXyDL/5JcWsrCm8l4ju8QC97O7EQ==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.9.6",
+            "@babel/helper-compilation-targets": "^7.9.6",
+            "@babel/helper-module-imports": "^7.8.3",
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/plugin-proposal-async-generator-functions": "^7.8.3",
+            "@babel/plugin-proposal-dynamic-import": "^7.8.3",
+            "@babel/plugin-proposal-json-strings": "^7.8.3",
+            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+            "@babel/plugin-proposal-numeric-separator": "^7.8.3",
+            "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+            "@babel/plugin-proposal-optional-catch-binding": "^7.8.3",
+            "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+            "@babel/plugin-proposal-unicode-property-regex": "^7.8.3",
+            "@babel/plugin-syntax-async-generators": "^7.8.0",
+            "@babel/plugin-syntax-dynamic-import": "^7.8.0",
+            "@babel/plugin-syntax-json-strings": "^7.8.0",
+            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
+            "@babel/plugin-syntax-numeric-separator": "^7.8.0",
+            "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+            "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
+            "@babel/plugin-syntax-optional-chaining": "^7.8.0",
+            "@babel/plugin-syntax-top-level-await": "^7.8.3",
+            "@babel/plugin-transform-arrow-functions": "^7.8.3",
+            "@babel/plugin-transform-async-to-generator": "^7.8.3",
+            "@babel/plugin-transform-block-scoped-functions": "^7.8.3",
+            "@babel/plugin-transform-block-scoping": "^7.8.3",
+            "@babel/plugin-transform-classes": "^7.9.5",
+            "@babel/plugin-transform-computed-properties": "^7.8.3",
+            "@babel/plugin-transform-destructuring": "^7.9.5",
+            "@babel/plugin-transform-dotall-regex": "^7.8.3",
+            "@babel/plugin-transform-duplicate-keys": "^7.8.3",
+            "@babel/plugin-transform-exponentiation-operator": "^7.8.3",
+            "@babel/plugin-transform-for-of": "^7.9.0",
+            "@babel/plugin-transform-function-name": "^7.8.3",
+            "@babel/plugin-transform-literals": "^7.8.3",
+            "@babel/plugin-transform-member-expression-literals": "^7.8.3",
+            "@babel/plugin-transform-modules-amd": "^7.9.6",
+            "@babel/plugin-transform-modules-commonjs": "^7.9.6",
+            "@babel/plugin-transform-modules-systemjs": "^7.9.6",
+            "@babel/plugin-transform-modules-umd": "^7.9.0",
+            "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
+            "@babel/plugin-transform-new-target": "^7.8.3",
+            "@babel/plugin-transform-object-super": "^7.8.3",
+            "@babel/plugin-transform-parameters": "^7.9.5",
+            "@babel/plugin-transform-property-literals": "^7.8.3",
+            "@babel/plugin-transform-regenerator": "^7.8.7",
+            "@babel/plugin-transform-reserved-words": "^7.8.3",
+            "@babel/plugin-transform-shorthand-properties": "^7.8.3",
+            "@babel/plugin-transform-spread": "^7.8.3",
+            "@babel/plugin-transform-sticky-regex": "^7.8.3",
+            "@babel/plugin-transform-template-literals": "^7.8.3",
+            "@babel/plugin-transform-typeof-symbol": "^7.8.4",
+            "@babel/plugin-transform-unicode-regex": "^7.8.3",
+            "@babel/preset-modules": "^0.1.3",
+            "@babel/types": "^7.9.6",
+            "browserslist": "^4.11.1",
+            "core-js-compat": "^3.6.2",
+            "invariant": "^2.2.2",
+            "levenary": "^1.1.1",
+            "semver": "^5.5.0"
+          }
+        },
+        "@babel/preset-react": {
+          "version": "7.9.4",
+          "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.9.4.tgz",
+          "integrity": "sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "@babel/plugin-transform-react-display-name": "^7.8.3",
+            "@babel/plugin-transform-react-jsx": "^7.9.4",
+            "@babel/plugin-transform-react-jsx-development": "^7.9.0",
+            "@babel/plugin-transform-react-jsx-self": "^7.9.0",
+            "@babel/plugin-transform-react-jsx-source": "^7.9.0"
+          }
+        },
+        "@babel/runtime": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
+          "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "@babel/template": {
+          "version": "7.8.6",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
+          "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "@babel/parser": "^7.8.6",
+            "@babel/types": "^7.8.6"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.6.tgz",
+          "integrity": "sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "@babel/generator": "^7.9.6",
+            "@babel/helper-function-name": "^7.9.5",
+            "@babel/helper-split-export-declaration": "^7.8.3",
+            "@babel/parser": "^7.9.6",
+            "@babel/types": "^7.9.6",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.9.6",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.6.tgz",
+          "integrity": "sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.9.5",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "babel-plugin-dynamic-import-node": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+          "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+          "dev": true,
+          "requires": {
+            "object.assign": "^4.1.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001043",
+            "electron-to-chromium": "^1.3.413",
+            "node-releases": "^1.1.53",
+            "pkg-up": "^2.0.0"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001048",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001048.tgz",
+          "integrity": "sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.423",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.423.tgz",
+          "integrity": "sha512-jXdnLcawJ/EMdN+j77TC3YyeAWiIjo1U63DFCKrjtLv4cu8ToyoF4HYXtFvkVVHhEtIl7lU1uDd307Xj1/YDjw==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "node-releases": {
+          "version": "1.1.53",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz",
+          "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==",
+          "dev": true
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
+          "dev": true
+        },
+        "regenerator-transform": {
+          "version": "0.14.4",
+          "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.4.tgz",
+          "integrity": "sha512-EaJaKPBI9GvKpvUz2mz4fhx7WPgvwRLY9v3hlNHWmAuJHI13T4nwKnNvm5RWJzEdnI5g5UwtOww+S8IdoUC2bw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.8.4",
+            "private": "^0.1.8"
+          }
+        }
+      }
+    },
     "@types/babel__core": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.3.tgz",
@@ -9351,22 +10181,26 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "optional": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "optional": true,
           "requires": {
             "delegates": "^1.0.0",
@@ -9375,12 +10209,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
@@ -9389,32 +10225,38 @@
         },
         "chownr": {
           "version": "1.1.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+          "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "optional": true
         },
         "debug": {
           "version": "3.2.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
           "optional": true,
           "requires": {
             "ms": "^2.1.1"
@@ -9422,22 +10264,26 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.7",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+          "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
           "optional": true,
           "requires": {
             "minipass": "^2.6.0"
@@ -9445,12 +10291,14 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "optional": true,
           "requires": {
             "aproba": "^1.0.3",
@@ -9465,7 +10313,8 @@
         },
         "glob": {
           "version": "7.1.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -9478,12 +10327,14 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "optional": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3"
@@ -9491,7 +10342,8 @@
         },
         "ignore-walk": {
           "version": "3.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
+          "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
           "optional": true,
           "requires": {
             "minimatch": "^3.0.4"
@@ -9499,7 +10351,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "optional": true,
           "requires": {
             "once": "^1.3.0",
@@ -9508,17 +10361,20 @@
         },
         "inherits": {
           "version": "2.0.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
           "optional": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -9526,12 +10382,14 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -9539,12 +10397,14 @@
         },
         "minimist": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "optional": true
         },
         "minipass": {
           "version": "2.9.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+          "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
           "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
@@ -9553,7 +10413,8 @@
         },
         "minizlib": {
           "version": "1.3.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+          "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
           "optional": true,
           "requires": {
             "minipass": "^2.9.0"
@@ -9561,7 +10422,8 @@
         },
         "mkdirp": {
           "version": "0.5.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.3.tgz",
+          "integrity": "sha512-P+2gwrFqx8lhew375MQHHeTlY8AuOJSrGf0R5ddkEndUkmwpgUob/vQuBD1V22/Cw1/lJr4x+EjllSezBThzBg==",
           "optional": true,
           "requires": {
             "minimist": "^1.2.5"
@@ -9569,12 +10431,14 @@
         },
         "ms": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "optional": true
         },
         "needle": {
           "version": "2.3.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.3.tgz",
+          "integrity": "sha512-EkY0GeSq87rWp1hoq/sH/wnTWgFVhYlnIkbJ0YJFfRgEFlz2RraCjBpFQ+vrEgEdp0ThfyHADmkChEhcb7PKyw==",
           "optional": true,
           "requires": {
             "debug": "^3.2.6",
@@ -9584,7 +10448,8 @@
         },
         "node-pre-gyp": {
           "version": "0.14.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz",
+          "integrity": "sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==",
           "optional": true,
           "requires": {
             "detect-libc": "^1.0.2",
@@ -9601,7 +10466,8 @@
         },
         "nopt": {
           "version": "4.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+          "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
           "optional": true,
           "requires": {
             "abbrev": "1",
@@ -9610,7 +10476,8 @@
         },
         "npm-bundled": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
+          "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
           "optional": true,
           "requires": {
             "npm-normalize-package-bin": "^1.0.1"
@@ -9618,12 +10485,14 @@
         },
         "npm-normalize-package-bin": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+          "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
           "optional": true
         },
         "npm-packlist": {
           "version": "1.4.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
           "optional": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -9633,7 +10502,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "optional": true,
           "requires": {
             "are-we-there-yet": "~1.1.2",
@@ -9644,17 +10514,20 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "optional": true,
           "requires": {
             "wrappy": "1"
@@ -9662,17 +10535,20 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "optional": true,
           "requires": {
             "os-homedir": "^1.0.0",
@@ -9681,17 +10557,20 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+          "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "optional": true,
           "requires": {
             "deep-extend": "^0.6.0",
@@ -9702,7 +10581,8 @@
         },
         "readable-stream": {
           "version": "2.3.7",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
           "optional": true,
           "requires": {
             "core-util-is": "~1.0.0",
@@ -9716,7 +10596,8 @@
         },
         "rimraf": {
           "version": "2.7.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
           "optional": true,
           "requires": {
             "glob": "^7.1.3"
@@ -9724,37 +10605,44 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
           "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "optional": true
         },
         "semver": {
           "version": "5.7.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
@@ -9764,7 +10652,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "optional": true,
           "requires": {
             "safe-buffer": "~5.1.0"
@@ -9772,7 +10661,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -9780,12 +10670,14 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
         "tar": {
           "version": "4.4.13",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
+          "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
           "optional": true,
           "requires": {
             "chownr": "^1.1.1",
@@ -9799,12 +10691,14 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "optional": true,
           "requires": {
             "string-width": "^1.0.2 || 2"
@@ -9812,12 +10706,14 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "optional": true
         },
         "yallist": {
           "version": "3.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
           "optional": true
         }
       }
@@ -10637,23 +11533,6 @@
         "underscore": "~1.7.0"
       }
     },
-    "httpplease": {
-      "version": "0.16.4",
-      "resolved": "https://registry.npmjs.org/httpplease/-/httpplease-0.16.4.tgz",
-      "integrity": "sha1-04Lr4jDvUHkIC06f/r8xap51wNo=",
-      "requires": {
-        "urllite": "~0.5.0",
-        "xmlhttprequest": "*",
-        "xtend": "~3.0.0"
-      },
-      "dependencies": {
-        "xtend": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz",
-          "integrity": "sha1-XM50B7r2Qsunvs2laBEcST9ZZlo="
-        }
-      }
-    },
     "httpreq": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/httpreq/-/httpreq-0.4.24.tgz",
@@ -13403,6 +14282,12 @@
         "package-json": "^4.0.0"
       }
     },
+    "lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
+      "dev": true
+    },
     "lazystream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
@@ -14616,6 +15501,61 @@
         }
       }
     },
+    "merge-deep": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
+      "integrity": "sha512-T7qC8kg4Zoti1cFd8Cr0M+qaZfOwjlPDEdZIIPPB2JZctjaPM4fX+i7HOId69tAti2fvO6X5ldfYUONDODsrkA==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "clone-deep": "^0.2.4",
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "clone-deep": {
+          "version": "0.2.4",
+          "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+          "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
+          "dev": true,
+          "requires": {
+            "for-own": "^0.1.3",
+            "is-plain-object": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "lazy-cache": "^1.0.3",
+            "shallow-clone": "^0.1.2"
+          }
+        },
+        "shallow-clone": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
+          "integrity": "sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.1",
+            "kind-of": "^2.0.1",
+            "lazy-cache": "^0.2.3",
+            "mixin-object": "^2.0.1"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+              "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.0.2"
+              }
+            },
+            "lazy-cache": {
+              "version": "0.2.7",
+              "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
+              "integrity": "sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -17472,6 +18412,60 @@
         "find-up": "^3.0.0"
       }
     },
+    "pkg-up": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
+      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
+      "dev": true,
+      "requires": {
+        "find-up": "^2.1.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "dev": true,
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        }
+      }
+    },
     "please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
@@ -19468,15 +20462,6 @@
         }
       }
     },
-    "react-inlinesvg": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-0.7.5.tgz",
-      "integrity": "sha512-oaU/t2vjf8yNGj3y2G3uYsS58BDwTi2jz0FIbZel3JwuJq/3vwpTR5Bsvp9WfY6sWn+f0KBW2vQ8oDy7csifIg==",
-      "requires": {
-        "httpplease": "^0.16.4",
-        "once": "^1.4.0"
-      }
-    },
     "react-inspector": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-2.3.1.tgz",
@@ -22344,6 +23329,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -23140,14 +24131,6 @@
         "prepend-http": "^1.0.1"
       }
     },
-    "urllite": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/urllite/-/urllite-0.5.0.tgz",
-      "integrity": "sha1-G3u5yj+w25Ug3hE0ZrvPfMNBRRo=",
-      "requires": {
-        "xtend": "~4.0.0"
-      }
-    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -24409,11 +25392,6 @@
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz",
       "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU="
     },
-    "xmlhttprequest": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
-      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
-    },
     "xregexp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz",
diff --git a/package.json b/package.json
index e8d83214..fb960610 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "@babel/plugin-transform-react-inline-elements": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
+    "@svgr/webpack": "^5.4.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^24.9.0",
@@ -167,7 +168,6 @@
     "react-dom": "^16.12.0",
     "react-helmet": "^5.1.3",
     "react-hot-loader": "^4.12.19",
-    "react-inlinesvg": "^0.7.5",
     "react-redux": "^5.1.2",
     "react-router": "^3.2.5",
     "react-split-pane": "^0.1.89",
diff --git a/webpack/config.dev.js b/webpack/config.dev.js
index ee26a4d2..dfd1bf2e 100644
--- a/webpack/config.dev.js
+++ b/webpack/config.dev.js
@@ -69,7 +69,7 @@ module.exports = {
         use: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
-        test: /\.(svg|mp3)$/,
+        test: /\.(mp3)$/,
         use: 'file-loader'
       },
       {
@@ -83,9 +83,30 @@ module.exports = {
          }
       },
       {
-        test: /fonts\/.*\.(eot|svg|ttf|woff|woff2)$/,
+        test: /fonts\/.*\.(eot|ttf|woff|woff2)$/,
         use: 'file-loader'
       },
+      {
+        test: /\.svg$/,
+        oneOf: [
+          {
+            resourceQuery: /byUrl/,
+            use: 'file-loader'
+          },
+          {
+            use: {
+              loader: '@svgr/webpack',
+              options: {
+                svgoConfig: {
+                  plugins: {
+                    removeViewBox: false
+                  }
+                }
+              }
+            }
+          }
+        ]
+      },
       {
         test: /_console-feed.scss/,
         use: {
diff --git a/webpack/config.prod.js b/webpack/config.prod.js
index 369386be..903e28d7 100644
--- a/webpack/config.prod.js
+++ b/webpack/config.prod.js
@@ -80,10 +80,6 @@ module.exports = [{
         exclude: /node_modules/,
         use: 'babel-loader'
       },
-      {
-        test: /\.(svg|mp3)$/,
-        use: 'file-loader'
-      },
       {
         test: /\.(png)$/,
         use: {
@@ -95,9 +91,30 @@ module.exports = [{
         }
       },
       {
-        test: /fonts\/.*\.(eot|svg|ttf|woff|woff2)$/,
+        test: /fonts\/.*\.(mp3|eot|ttf|woff|woff2)$/,
         use: 'file-loader'
       },
+      {
+        test: /\.svg$/,
+        oneOf: [
+          {
+            resourceQuery: /byUrl/,
+            use: 'file-loader'
+          },
+          {
+            use: {
+              loader: '@svgr/webpack',
+              options: {
+                svgoConfig: {
+                  plugins: {
+                    removeViewBox: false
+                  }
+                }
+              }
+            }
+          }
+        ]
+      },
       {
         test: /_console-feed.scss/,
         use: {

From cee22c32772a9e73109e50470cef6cf40c46b90e Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 5 May 2020 19:03:58 -0400
Subject: [PATCH 2/4] Move through svg icons and add aria labels

---
 client/components/Nav.jsx                     | 16 ++++----
 client/components/NavBasic.jsx                |  4 +-
 client/components/PreviewNav.jsx              |  6 +--
 client/modules/App/components/Overlay.jsx     |  4 +-
 client/modules/IDE/components/About.jsx       | 12 +++---
 client/modules/IDE/components/AssetList.jsx   |  3 +-
 .../CollectionList/CollectionList.jsx         | 28 ++++++++++++--
 .../CollectionList/CollectionListRow.jsx      |  1 +
 client/modules/IDE/components/Console.jsx     | 10 ++---
 .../modules/IDE/components/CopyableInput.jsx  |  3 +-
 .../modules/IDE/components/EditableInput.jsx  |  9 ++++-
 client/modules/IDE/components/Editor.jsx      | 12 +++---
 client/modules/IDE/components/Feedback.jsx    |  2 +-
 client/modules/IDE/components/FileNode.jsx    | 12 +++---
 .../modules/IDE/components/NewFileModal.jsx   |  8 +++-
 .../modules/IDE/components/NewFolderModal.jsx |  8 +++-
 client/modules/IDE/components/Preferences.jsx |  4 +-
 .../IDE/components/QuickAddList/Icons.jsx     |  6 +--
 .../components/QuickAddList/QuickAddList.jsx  | 35 +++++++++--------
 .../IDE/components/Searchbar/Searchbar.jsx    |  2 +-
 client/modules/IDE/components/Sidebar.jsx     |  4 +-
 client/modules/IDE/components/SketchList.jsx  | 34 ++++++++++++++---
 client/modules/IDE/components/Toast.jsx       |  4 +-
 client/modules/IDE/components/Toolbar.jsx     | 38 +++++++++++--------
 .../IDE/components/UploadFileModal.jsx        |  8 +++-
 client/modules/User/components/APIKeyForm.jsx |  2 +-
 client/modules/User/components/APIKeyList.jsx |  8 +++-
 client/styles/base/_base.scss                 | 12 ++++++
 28 files changed, 194 insertions(+), 101 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 5d9a522a..eb5ef944 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -228,11 +228,11 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <LogoIcon title="p5.js Logo" className="svg__logo" />
+          <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
         </li>
         <li className="nav__item nav__item--no-icon">
           <Link to="/" className="nav__back-link">
-            <CaretLeftIcon className="nav__back-icon" />
+            <CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
             <span className="nav__item-header">
               Back to Editor
             </span>
@@ -246,7 +246,7 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <LogoIcon title="p5.js Logo" className="svg__logo" />
+          <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
         </li>
         <li className={navDropdownState.file}>
           <button
@@ -260,7 +260,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">File</span>
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -362,7 +362,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Edit</span>
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown" >
             <li className="nav__dropdown-item">
@@ -422,7 +422,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Sketch</span>
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -497,7 +497,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Help</span>
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -574,7 +574,7 @@ class Nav extends React.PureComponent {
             }}
           >
             My Account
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx
index 65ef0555..411329d6 100644
--- a/client/components/NavBasic.jsx
+++ b/client/components/NavBasic.jsx
@@ -14,13 +14,13 @@ class NavBasic extends React.PureComponent {
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
         <ul className="nav__items-left">
           <li className="nav__item-logo">
-            <LogoIcon title="p5.js Logo" className="svg__logo" />
+            <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
           </li>
           { this.props.onBack && (
             <li className="nav__item">
               <button onClick={this.props.onBack}>
                 <span className="nav__item-header">
-                  <ArrowIcon title="Left arrow" />
+                  <ArrowIcon focusable="false" aria-hidden="true" />
                 </span>
                 Back to the editor
               </button>
diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx
index 7faaf622..6a983e19 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.jsx
@@ -9,15 +9,15 @@ const PreviewNav = ({ owner, project }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <LogoIcon title="p5.js Logo" className="svg__logo" />
+        <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
       <p className="toolbar__project-owner">by</p>
       <Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
     </div>
     <div className="nav__items-right">
-      <Link to={`/${owner.username}/sketches/${project.id}`}>
-        <CodeIcon className="preview-nav__editor-svg" />
+      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
+        <CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
       </Link>
     </div>
   </nav>
diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 712583c3..4e54b615 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -80,8 +80,8 @@ class Overlay extends React.Component {
               <h2 className="overlay__title">{title}</h2>
               <div className="overlay__actions">
                 {actions}
-                <button className="overlay__close-button" onClick={this.close} >
-                  <ExitIcon title="close overlay" />
+                <button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
+                  <ExitIcon focusable="false" aria-hidden="true" />
                 </button>
               </div>
             </header>
diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index dbe86f30..213a1f46 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -12,7 +12,7 @@ function About(props) {
         <title>p5.js Web Editor | About</title>
       </Helmet>
       <div className="about__content-column">
-        <SquareLogoIcon className="about__logo" title="p5.js Square Logo" />
+        <SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
         {/* Video button to hello p5 video page */}
         {/* <p className="about__play-video">
           <a
@@ -32,7 +32,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Examples
           </a>
         </p>
@@ -42,7 +42,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Learn
           </a>
         </p>
@@ -55,7 +55,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Libraries
           </a>
         </p>
@@ -65,7 +65,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Reference
           </a>
         </p>
@@ -75,7 +75,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Forum
           </a>
         </p>
diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx
index 50b90dad..f2fef386 100644
--- a/client/modules/IDE/components/AssetList.jsx
+++ b/client/modules/IDE/components/AssetList.jsx
@@ -85,8 +85,9 @@ class AssetListRowBase extends React.Component {
             onClick={this.toggleOptions}
             onBlur={this.onBlurComponent}
             onFocus={this.onFocusComponent}
+            aria-label="Toggle Open/Close Asset Options"
           >
-            <DownFilledTriangleIcon title="Menu" />
+            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
           </button>
           {optionsOpen &&
             <ul
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 7a09aa5b..9fd70479 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -82,21 +82,43 @@ class CollectionList extends React.Component {
     return null;
   }
 
+  _getButtonLabel = (fieldName, displayName) => {
+    const { field, direction } = this.props.sorting;
+    let buttonLabel;
+    if (field !== fieldName) {
+      if (field === 'name') {
+        buttonLabel = `Sort by ${displayName} ascending.`;
+      } else {
+        buttonLabel = `Sort by ${displayName} descending.`;
+      }
+    } else if (direction === SortingActions.DIRECTION.ASC) {
+      buttonLabel = `Sort by ${displayName} descending.`;
+    } else {
+      buttonLabel = `Sort by ${displayName} ascending.`;
+    }
+    return buttonLabel;
+  }
+
   _renderFieldHeader = (fieldName, displayName) => {
     const { field, direction } = this.props.sorting;
     const headerClass = classNames({
       'sketches-table__header': true,
       'sketches-table__header--selected': field === fieldName
     });
+    const buttonLabel = this._getButtonLabel(fieldName, displayName);
     return (
       <th scope="col">
-        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+        <button
+          className="sketch-list__sort-button"
+          onClick={() => this.props.toggleDirectionForField(fieldName)}
+          aria-label={buttonLabel}
+        >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon />
+            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon />
+            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
           }
         </button>
       </th>
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 47395192..37f992e4 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -128,6 +128,7 @@ class CollectionListRowBase extends React.Component {
           onClick={this.toggleOptions}
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
+          aria-label="Toggle Open/Close collection options"
         >
           <DownFilledTriangleIcon title="Menu" />
         </button>
diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index 08e98706..604bf9f0 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -90,18 +90,18 @@ class Console extends React.Component {
         <div className="preview-console__header">
           <h2 className="preview-console__header-title">Console</h2>
           <div className="preview-console__header-buttons">
-            <button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="clear console">
+            <button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console">
               Clear
             </button>
             <button
               className="preview-console__collapse"
               onClick={this.props.collapseConsole}
-              aria-label="collapse console"
+              aria-label="Close console"
             >
-              <DownArrowIcon />
+              <DownArrowIcon focusable="false" aria-hidden="true" />
             </button>
-            <button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="expand console">
-              <UpArrowIcon />
+            <button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="Open console" >
+              <UpArrowIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
         </div>
diff --git a/client/modules/IDE/components/CopyableInput.jsx b/client/modules/IDE/components/CopyableInput.jsx
index 954a877f..cbce2f3e 100644
--- a/client/modules/IDE/components/CopyableInput.jsx
+++ b/client/modules/IDE/components/CopyableInput.jsx
@@ -69,8 +69,9 @@ class CopyableInput extends React.Component {
             rel="noopener noreferrer"
             href={value}
             className="copyable-input__preview"
+            aria-label={`Open ${label} view in new tab`}
           >
-            <ShareIcon title={`open ${label} view in new tab`} />
+            <ShareIcon focusable="false" aria-hidden="true" />
           </a>
         }
       </div>
diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index 7a59a283..c10f3d70 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import EditIcon from '../../../images/pencil.svg';
 
+// TODO I think this needs a description prop so that it's accessible
 function EditableInput({
   validate, value, emptyPlaceholder, InputComponent, inputProps, onChange
 }) {
@@ -47,9 +48,13 @@ function EditableInput({
 
   return (
     <span className={classes}>
-      <button className="editable-input__label" onClick={beginEditing}>
+      <button
+        className="editable-input__label"
+        onClick={beginEditing}
+        aria-label={`Edit ${displayValue} value`}
+      >
         <span>{displayValue}</span>
-        <EditIcon className="editable-input__icon" />
+        <EditIcon className="editable-input__icon" focusable="false" aria-hidden="true" />
       </button>
 
       <InputComponent
diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index f11dec9b..9f2ac9e9 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -320,24 +320,26 @@ class Editor extends React.Component {
       >
         <header className="editor__header">
           <button
-            aria-label="collapse file navigation"
+            aria-label="Open Sketch files navigation"
             className="sidebar__contract"
             onClick={this.props.collapseSidebar}
           >
-            <LeftArrowIcon />
+            <LeftArrowIcon focusable="false" aria-hidden="true" />
           </button>
           <button
-            aria-label="expand file navigation"
+            aria-label="Close sketch files navigation"
             className="sidebar__expand"
             onClick={this.props.expandSidebar}
           >
-            <RightArrowIcon />
+            <RightArrowIcon focusable="false" aria-hidden="true" />
           </button>
           <div className="editor__file-name">
             <span>
               {this.props.file.name}
               <span className="editor__unsaved-changes">
-                {this.props.unsavedChanges ? <UnsavedChangesDotIcon /> : null}
+                {this.props.unsavedChanges ?
+                  <UnsavedChangesDotIcon role="img" aria-label="Sketch has unsaved changes" focusable="false" /> :
+                  null}
               </span>
             </span>
             <Timer
diff --git a/client/modules/IDE/components/Feedback.jsx b/client/modules/IDE/components/Feedback.jsx
index 8ebf18fe..409c1dcd 100644
--- a/client/modules/IDE/components/Feedback.jsx
+++ b/client/modules/IDE/components/Feedback.jsx
@@ -23,7 +23,7 @@ function Feedback(props) {
             className="feedback__github-link"
           >
             Go to Github
-            <GitHubLogo className="feedback__github-logo" />
+            <GitHubLogo className="feedback__github-logo" focusable="false" aria-hidden="true" />
           </a>
         </p>
       </div>
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 249307e9..bd077874 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -184,7 +184,7 @@ export class FileNode extends React.Component {
             <span className="file-item__spacer"></span>
             { isFile &&
               <span className="sidebar__file-item-icon">
-                <FileIcon />
+                <FileIcon focusable="false" aria-hidden="true" />
               </span>
             }
             { isFolder &&
@@ -192,14 +192,16 @@ export class FileNode extends React.Component {
                 <button
                   className="sidebar__file-item-closed"
                   onClick={this.showFolderChildren}
+                  aria-label="Open folder contents"
                 >
-                  <FolderRightIcon className="folder-right" />
+                  <FolderRightIcon className="folder-right" focusable="false" aria-hidden="true" />
                 </button>
                 <button
                   className="sidebar__file-item-open"
                   onClick={this.hideFolderChildren}
+                  aria-label="Close file contents"
                 >
-                  <FolderDownIcon className="folder-down" />
+                  <FolderDownIcon className="folder-down" focusable="false" aria-hidden="true" />
                 </button>
               </div>
             }
@@ -221,14 +223,14 @@ export class FileNode extends React.Component {
             />
             <button
               className="sidebar__file-item-show-options"
-              aria-label="view file options"
+              aria-label="Toggle open/close file options"
               ref={(element) => { this[`fileOptions-${this.props.id}`] = element; }}
               tabIndex="0"
               onClick={this.toggleFileOptions}
               onBlur={this.onBlurComponent}
               onFocus={this.onFocusComponent}
             >
-              <DownArrowIcon />
+              <DownArrowIcon focusable="false" aria-hidden="true" />
             </button>
             <div className="sidebar__file-item-options">
               <ul title="file options">
diff --git a/client/modules/IDE/components/NewFileModal.jsx b/client/modules/IDE/components/NewFileModal.jsx
index b8fff2af..412d9895 100644
--- a/client/modules/IDE/components/NewFileModal.jsx
+++ b/client/modules/IDE/components/NewFileModal.jsx
@@ -34,8 +34,12 @@ class NewFileModal extends React.Component {
         <div className="modal-content">
           <div className="modal__header">
             <h2 className="modal__title">Create File</h2>
-            <button className="modal__exit-button" onClick={this.props.closeNewFileModal}>
-              <ExitIcon title="Close New File Modal" />
+            <button
+              className="modal__exit-button"
+              onClick={this.props.closeNewFileModal}
+              aria-label="Close New File Modal"
+            >
+              <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           <NewFileForm
diff --git a/client/modules/IDE/components/NewFolderModal.jsx b/client/modules/IDE/components/NewFolderModal.jsx
index 6f9ac5c9..13029d6c 100644
--- a/client/modules/IDE/components/NewFolderModal.jsx
+++ b/client/modules/IDE/components/NewFolderModal.jsx
@@ -16,8 +16,12 @@ class NewFolderModal extends React.Component {
         <div className="modal-content-folder">
           <div className="modal__header">
             <h2 className="modal__title">Create Folder</h2>
-            <button className="modal__exit-button" onClick={this.props.closeModal}>
-              <ExitIcon title="Close New Folder Modal" />
+            <button
+              className="modal__exit-button"
+              onClick={this.props.closeModal}
+              aria-label="Close New Folder Modal"
+            >
+              <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           <NewFolderForm {...this.props} />
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 4abd970b..1b5c342b 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -149,7 +149,7 @@ class Preferences extends React.Component {
                 aria-label="decrease font size"
                 disabled={this.state.fontSize <= 8}
               >
-                <MinusIcon title="Decrease Font Size" />
+                <MinusIcon focusable="false" aria-hidden="true" />
                 <h6 className="preference__label">Decrease</h6>
               </button>
               <form onSubmit={this.onFontInputSubmit}>
@@ -170,7 +170,7 @@ class Preferences extends React.Component {
                 aria-label="increase font size"
                 disabled={this.state.fontSize >= 36}
               >
-                <PlusIcon title="Increase Font Size" />
+                <PlusIcon focusable="false" aria-hidden="true" />
                 <h6 className="preference__label">Increase</h6>
               </button>
             </div>
diff --git a/client/modules/IDE/components/QuickAddList/Icons.jsx b/client/modules/IDE/components/QuickAddList/Icons.jsx
index 852e6787..ae59c7cf 100644
--- a/client/modules/IDE/components/QuickAddList/Icons.jsx
+++ b/client/modules/IDE/components/QuickAddList/Icons.jsx
@@ -12,9 +12,9 @@ const Icons = ({ isAdded }) => {
 
   return (
     <div className={classes}>
-      <CloseIcon className="quick-add__remove-icon" title="Remove from collection" />
-      <CheckIcon className="quick-add__in-icon" title="In collection" />
-      <CloseIcon className="quick-add__add-icon" title="Add to collection" />
+      <CloseIcon className="quick-add__remove-icon" role="img" aria-label="Descending" focusable="false" />
+      <CheckIcon className="quick-add__in-icon" role="img" aria-label="Descending" focusable="false" />
+      <CloseIcon className="quick-add__add-icon" role="img" aria-label="Descending" focusable="false" />
     </div>
   );
 };
diff --git a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
index 5694929d..be7a5ac3 100644
--- a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
+++ b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
@@ -6,22 +6,25 @@ import Icons from './Icons';
 
 const Item = ({
   isAdded, onSelect, name, url
-}) => (
-  <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
-    <button className="quick-add__item-toggle" onClick={onSelect}>
-      <Icons isAdded={isAdded} />
-    </button>
-    <span className="quick-add__item-name">{name}</span>
-    <Link
-      className="quick-add__item-view"
-      to={url}
-      target="_blank"
-      onClick={e => e.stopPropogation()}
-    >
-      View
-    </Link>
-  </li>
-);
+}) => {
+  const buttonLabel = isAdded ? 'Remove from collection' : 'Add to collection';
+  return (
+    <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
+      <button className="quick-add__item-toggle" onClick={onSelect} aria-label={buttonLabel}>
+        <Icons isAdded={isAdded} />
+      </button>
+      <span className="quick-add__item-name">{name}</span>
+      <Link
+        className="quick-add__item-view"
+        to={url}
+        target="_blank"
+        onClick={e => e.stopPropogation()}
+      >
+        View
+      </Link>
+    </li>
+  );
+};
 
 const ItemType = PropTypes.shape({
   name: PropTypes.string.isRequired,
diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index 0eb9752d..b81b3bea 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -45,7 +45,7 @@ class Searchbar extends React.Component {
     return (
       <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
         <div className="searchbar__button">
-          <SearchIcon className="searchbar__icon" />
+          <SearchIcon className="searchbar__icon" focusable="false" aria-hidden="true" />
         </div>
         <input
           className="searchbar__input"
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index cfc8cb95..141728af 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -75,7 +75,7 @@ class Sidebar extends React.Component {
           </h3>
           <div className="sidebar__icons">
             <button
-              aria-label="add file or folder"
+              aria-label="Toggle open/close sketch file options"
               className="sidebar__add"
               tabIndex="0"
               ref={(element) => { this.sidebarOptions = element; }}
@@ -83,7 +83,7 @@ class Sidebar extends React.Component {
               onBlur={this.onBlurComponent}
               onFocus={this.onFocusComponent}
             >
-              <DownArrowIcon />
+              <DownArrowIcon focusable="false" aria-hidden="true" />
             </button>
             <ul className="sidebar__project-options">
               <li>
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index bb09761f..c10855bd 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -167,8 +167,9 @@ class SketchListRowBase extends React.Component {
           onClick={this.toggleOptions}
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
+          aria-label="Toggle Open/Close Sketch Options"
         >
-          <DownFilledTriangleIcon title="Menu" />
+          <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
         </button>
         {optionsOpen &&
           <ul
@@ -325,7 +326,6 @@ class SketchList extends React.Component {
     super(props);
     this.props.getProjects(this.props.username);
     this.props.resetSorting();
-    this._renderFieldHeader = this._renderFieldHeader.bind(this);
 
     this.state = {
       isInitialDataLoad: true,
@@ -368,21 +368,43 @@ class SketchList extends React.Component {
     return null;
   }
 
-  _renderFieldHeader(fieldName, displayName) {
+  _getButtonLabel = (fieldName, displayName) => {
+    const { field, direction } = this.props.sorting;
+    let buttonLabel;
+    if (field !== fieldName) {
+      if (field === 'name') {
+        buttonLabel = `Sort by ${displayName} ascending.`;
+      } else {
+        buttonLabel = `Sort by ${displayName} descending.`;
+      }
+    } else if (direction === SortingActions.DIRECTION.ASC) {
+      buttonLabel = `Sort by ${displayName} descending.`;
+    } else {
+      buttonLabel = `Sort by ${displayName} ascending.`;
+    }
+    return buttonLabel;
+  }
+
+  _renderFieldHeader = (fieldName, displayName) => {
     const { field, direction } = this.props.sorting;
     const headerClass = classNames({
       'sketches-table__header': true,
       'sketches-table__header--selected': field === fieldName
     });
+    const buttonLabel = this._getButtonLabel(fieldName, displayName);
     return (
       <th scope="col">
-        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+        <button
+          className="sketch-list__sort-button"
+          onClick={() => this.props.toggleDirectionForField(fieldName)}
+          aria-label={buttonLabel}
+        >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon />
+            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon />
+            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
           }
         </button>
       </th>
diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx
index 9392cd2e..2b9a0d58 100644
--- a/client/modules/IDE/components/Toast.jsx
+++ b/client/modules/IDE/components/Toast.jsx
@@ -12,8 +12,8 @@ function Toast(props) {
       <p>
         {props.text}
       </p>
-      <button className="toast__close" onClick={props.hideToast}>
-        <ExitIcon title="Close Keyboard Shortcuts Overlay" />
+      <button className="toast__close" onClick={props.hideToast} aria-label="Close Alert" >
+        <ExitIcon focusable="false" aria-hidden="true" />
       </button>
     </section>
   );
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
index 28fb9fb4..dd5010ca 100644
--- a/client/modules/IDE/components/Toolbar.jsx
+++ b/client/modules/IDE/components/Toolbar.jsx
@@ -59,6 +59,8 @@ class Toolbar extends React.Component {
       'toolbar__project-name-container--editing': this.props.project.isEditingName
     });
 
+    const canEditProjectName = this.canEditProjectName();
+
     return (
       <div className="toolbar">
         <button
@@ -68,25 +70,25 @@ class Toolbar extends React.Component {
             this.props.setTextOutput(true);
             this.props.setGridOutput(true);
           }}
-          aria-label="play sketch"
+          aria-label="Play sketch"
           disabled={this.props.infiniteLoop}
         >
-          <PlayIcon title="Play Sketch" />
+          <PlayIcon focusable="false" aria-hidden="true" />
         </button>
         <button
           className={playButtonClass}
           onClick={this.props.startSketch}
-          aria-label="play only visual sketch"
+          aria-label="Play only visual sketch"
           disabled={this.props.infiniteLoop}
         >
-          <PlayIcon title="Play only visual Sketch" />
+          <PlayIcon focusable="false" aria-hidden="true" />
         </button>
         <button
           className={stopButtonClass}
           onClick={this.props.stopSketch}
-          aria-label="stop sketch"
+          aria-label="Stop sketch"
         >
-          <StopIcon alt="Stop Sketch" />
+          <StopIcon focusable="false" aria-hidden="true" />
         </button>
         <div className="toolbar__autorefresh">
           <input
@@ -102,24 +104,28 @@ class Toolbar extends React.Component {
           </label>
         </div>
         <div className={nameContainerClass}>
-          <a
+          <button
             className="toolbar__project-name"
-            href={this.props.owner ? `/${this.props.owner.username}/sketches/${this.props.project.id}` : ''}
-            onClick={(e) => {
-              if (this.canEditProjectName()) {
-                e.preventDefault();
+            onClick={() => {
+              if (canEditProjectName) {
                 this.originalProjectName = this.props.project.name;
                 this.props.showEditProjectName();
                 setTimeout(() => this.projectNameInput.focus(), 0);
               }
             }}
+            disabled={!canEditProjectName}
+            aria-label="Edit sketch name"
           >
             <span>{this.props.project.name}</span>
             {
-              this.canEditProjectName() &&
-              <EditProjectNameIcon className="toolbar__edit-name-button" title="Edit Project Name" />
+              canEditProjectName &&
+              <EditProjectNameIcon
+                className="toolbar__edit-name-button"
+                focusable="false"
+                aria-hidden="true"
+              />
             }
-          </a>
+          </button>
           <input
             type="text"
             maxLength="128"
@@ -149,9 +155,9 @@ class Toolbar extends React.Component {
         <button
           className={preferencesButtonClass}
           onClick={this.props.openPreferences}
-          aria-label="preferences"
+          aria-label="Open Preferences"
         >
-          <PreferencesIcon role="img" />
+          <PreferencesIcon focusable="false" aria-hidden="true" />
         </button>
       </div>
     );
diff --git a/client/modules/IDE/components/UploadFileModal.jsx b/client/modules/IDE/components/UploadFileModal.jsx
index 4f3d3522..27fa7c6f 100644
--- a/client/modules/IDE/components/UploadFileModal.jsx
+++ b/client/modules/IDE/components/UploadFileModal.jsx
@@ -32,8 +32,12 @@ class UploadFileModal extends React.Component {
         <div className="modal-content">
           <div className="modal__header">
             <h2 className="modal__title">Upload File</h2>
-            <button className="modal__exit-button" onClick={this.props.closeModal}>
-              <ExitIcon title="Close New File Modal" />
+            <button
+              className="modal__exit-button"
+              onClick={this.props.closeModal}
+              aria-label="Close upload file modal"
+            >
+              <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           { this.props.reachedTotalSizeLimit &&
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index 9e7493f1..459efe31 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -85,7 +85,7 @@ class APIKeyForm extends React.Component {
               disabled={this.state.keyLabel === ''}
               type="submit"
             >
-              <PlusIcon className="api-key-form__create-icon" />
+              <PlusIcon className="api-key-form__create-icon" focusable="false" aria-hidden="true" />
               Create
             </button>
           </form>
diff --git a/client/modules/User/components/APIKeyList.jsx b/client/modules/User/components/APIKeyList.jsx
index 0c10f426..9201aa4b 100644
--- a/client/modules/User/components/APIKeyList.jsx
+++ b/client/modules/User/components/APIKeyList.jsx
@@ -31,8 +31,12 @@ function APIKeyList({ apiKeys, onRemove }) {
               <td>{format(new Date(key.createdAt), 'MMM D, YYYY h:mm A')}</td>
               <td>{lastUsed}</td>
               <td className="api-key-list__action">
-                <button className="api-key-list__delete-button" onClick={() => onRemove(key)}>
-                  <TrashCanIcon title="Delete Key" />
+                <button
+                  className="api-key-list__delete-button"
+                  onClick={() => onRemove(key)}
+                  aria-label="Delete API Key"
+                >
+                  <TrashCanIcon focusable="false" aria-hidden="true" />
                 </button>
               </td>
             </tr>
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 94b3d55a..58b1030b 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -96,3 +96,15 @@ textarea:focus {
 	outline: none;
 	box-shadow: 0 0 0 1px $outline-color;
 }
+
+// screen reader only class
+// from https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html#hiding-content-visually
+.sr-only:not(:focus):not(:active) {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}

From c708af14655775fb97e88dadefae0a83090fff73 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 5 May 2020 19:08:45 -0400
Subject: [PATCH 3/4] Finish adding aria labels

---
 client/modules/User/components/Collection.jsx | 34 ++++++++++++++++---
 .../modules/User/components/GithubButton.jsx  |  2 +-
 .../modules/User/components/GoogleButton.jsx  |  2 +-
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index bb798161..05f6b757 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -53,9 +53,10 @@ const ShareURL = ({ value }) => {
       <button
         className="collection-share__button"
         onClick={() => setShowURL(!showURL)}
+        aria-label="Show collection share URL"
       >
         <span>Share</span>
-        <DropdownArrowIcon className="collection-share__arrow" />
+        <DropdownArrowIcon className="collection-share__arrow" focusable="false" aria-hidden="true" />
       </button>
       { showURL &&
         <div className="collection__share-dropdown">
@@ -97,8 +98,9 @@ class CollectionItemRowBase extends React.Component {
           <button
             className="collection-row__remove-button"
             onClick={this.handleSketchRemove}
+            aria-label="Remove sketch from collection"
           >
-            <RemoveIcon title="Remove" />
+            <RemoveIcon focusable="false" aria-hidden="true" />
           </button>
         </td>
       </tr>);
@@ -295,21 +297,43 @@ class Collection extends React.Component {
     return null;
   }
 
+  _getButtonLabel = (fieldName, displayName) => {
+    const { field, direction } = this.props.sorting;
+    let buttonLabel;
+    if (field !== fieldName) {
+      if (field === 'name') {
+        buttonLabel = `Sort by ${displayName} ascending.`;
+      } else {
+        buttonLabel = `Sort by ${displayName} descending.`;
+      }
+    } else if (direction === SortingActions.DIRECTION.ASC) {
+      buttonLabel = `Sort by ${displayName} descending.`;
+    } else {
+      buttonLabel = `Sort by ${displayName} ascending.`;
+    }
+    return buttonLabel;
+  }
+
   _renderFieldHeader(fieldName, displayName) {
     const { field, direction } = this.props.sorting;
     const headerClass = classNames({
       'sketches-table__header': true,
       'sketches-table__header--selected': field === fieldName
     });
+    const buttonLabel = this._getButtonLabel(fieldName, displayName);
     return (
       <th scope="col">
-        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+        <button
+          className="sketch-list__sort-button"
+          onClick={() => this.props.toggleDirectionForField(fieldName)}
+          aria-label={buttonLabel}
+        >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon />
+            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon />
+            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
           }
         </button>
       </th>
diff --git a/client/modules/User/components/GithubButton.jsx b/client/modules/User/components/GithubButton.jsx
index 58bc2f64..32edfe8a 100644
--- a/client/modules/User/components/GithubButton.jsx
+++ b/client/modules/User/components/GithubButton.jsx
@@ -9,7 +9,7 @@ function GithubButton(props) {
       className="github-button"
       href="/auth/github"
     >
-      <GithubIcon className="github-icon" />
+      <GithubIcon className="github-icon" role="img" aria-label="GitHub Logo" focusable="false" />
       <span>{props.buttonText}</span>
     </a>
   );
diff --git a/client/modules/User/components/GoogleButton.jsx b/client/modules/User/components/GoogleButton.jsx
index 5f07f5c7..c508aa9b 100644
--- a/client/modules/User/components/GoogleButton.jsx
+++ b/client/modules/User/components/GoogleButton.jsx
@@ -9,7 +9,7 @@ function GoogleButton(props) {
       className="google-button"
       href="/auth/google/"
     >
-      <GoogleIcon className="google-icon" />
+      <GoogleIcon className="google-icon" role="img" aria-label="Google Logo" focusable="false" />
       <span>{props.buttonText}</span>
     </a>
   );

From 2c3aeee27a11466937b96e47b27b6c6165137133 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 6 May 2020 17:03:20 -0400
Subject: [PATCH 4/4] Update Nav snapshot with new SVG attributes

---
 .../__test__/__snapshots__/Nav.test.jsx.snap  | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/client/components/__test__/__snapshots__/Nav.test.jsx.snap b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
index a4f321eb..c1ae3128 100644
--- a/client/components/__test__/__snapshots__/Nav.test.jsx.snap
+++ b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
@@ -11,8 +11,11 @@ exports[`Nav renders correctly 1`] = `
     <li
       className="nav__item-logo"
     >
-      <span
-        className="isvg loading svg__logo"
+      <test-file-stub
+        aria-label="p5.js Logo"
+        className="svg__logo"
+        focusable="false"
+        role="img"
       />
     </li>
     <li
@@ -29,8 +32,10 @@ exports[`Nav renders correctly 1`] = `
         >
           File
         </span>
-        <span
-          className="isvg loading nav__item-header-triangle"
+        <test-file-stub
+          aria-hidden="true"
+          className="nav__item-header-triangle"
+          focusable="false"
         />
       </button>
       <ul
@@ -108,8 +113,10 @@ exports[`Nav renders correctly 1`] = `
         >
           Edit
         </span>
-        <span
-          className="isvg loading nav__item-header-triangle"
+        <test-file-stub
+          aria-hidden="true"
+          className="nav__item-header-triangle"
+          focusable="false"
         />
       </button>
       <ul
@@ -201,8 +208,10 @@ exports[`Nav renders correctly 1`] = `
         >
           Sketch
         </span>
-        <span
-          className="isvg loading nav__item-header-triangle"
+        <test-file-stub
+          aria-hidden="true"
+          className="nav__item-header-triangle"
+          focusable="false"
         />
       </button>
       <ul
@@ -282,8 +291,10 @@ exports[`Nav renders correctly 1`] = `
         >
           Help
         </span>
-        <span
-          className="isvg loading nav__item-header-triangle"
+        <test-file-stub
+          aria-hidden="true"
+          className="nav__item-header-triangle"
+          focusable="false"
         />
       </button>
       <ul