Added SideMenuIcon as a component

*SideMenu icon used in the toolbar is now a component

public/assets/side-menu.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
- <g fill="none" stroke="#000" stroke-linecap="round" stroke-width="10">
-  <path d="m20 25h60"/>
-  <path d="m20 50h60"/>
-  <path d="m20 75h60"/>
- </g>
-</svg>

src/components/toolbar/SideMenuToggle.js

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
-import { ReactSVG } from "react-svg";
 import SideMenuContext from '../../contexts/SideMenuContext';
+import { SideMenuIcon } from '../../icons';
 
 export default function SideMenuToggle() {
     const { setSideMenuOpen } = useContext(SideMenuContext);
@@ -12,9 +12,7 @@ export default function SideMenuToggle() {
     return (
         <div className='side-menu-toggle'>
             <button onClick={toggleSideMenu} className='invis-button'>
-                <ReactSVG
+                <SideMenuIcon />
-                    src={`${process.env.PUBLIC_URL}/assets/side-menu.svg`}
-                />
             </button>
         </div>
     );

src/icons/index.js

@@ -1,3 +1,7 @@
+/* Toolbar Icons */
+export { SideMenuIcon } from "./toolbar/side-menu";
+
+/* TrackHoverInfo Icons */
 export { HashIcon } from "./track-hover-info/hash";
 export { SpeedIcon } from "./track-hover-info/speed";
 export { LightningIcon } from "./track-hover-info/lightning";

src/icons/toolbar/side-menu.js

@@ -0,0 +1,9 @@
+export const SideMenuIcon = ({color = '#aaa', strokeWidth = 10}) => (
+    <svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" stroke={color} strokeLinecap="round" strokeWidth={strokeWidth}>
+            <path d="m20 25h60"/>
+            <path d="m20 50h60"/>
+            <path d="m20 75h60"/>
+        </g>
+    </svg>
+);