From 0d2580f23ef65372048fc790a1dfdd32257a220d Mon Sep 17 00:00:00 2001
From: izawartka <59137928+izawartka@users.noreply.github.com>
Date: Fri, 15 Aug 2025 20:29:46 +0200
Subject: [PATCH] Added SideMenuIcon as a component

*SideMenu icon used in the toolbar is now a component
---
 public/assets/side-menu.svg              | 8 --------
 src/components/toolbar/SideMenuToggle.js | 6 ++----
 src/icons/index.js                       | 4 ++++
 src/icons/toolbar/side-menu.js           | 9 +++++++++
 4 files changed, 15 insertions(+), 12 deletions(-)
 delete mode 100644 public/assets/side-menu.svg
 create mode 100644 src/icons/toolbar/side-menu.js

diff --git a/public/assets/side-menu.svg b/public/assets/side-menu.svg
deleted file mode 100644
index 063b4e0..0000000
--- a/public/assets/side-menu.svg
+++ /dev/null
@@ -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>
diff --git a/src/components/toolbar/SideMenuToggle.js b/src/components/toolbar/SideMenuToggle.js
index 2281b5a..881238a 100644
--- a/src/components/toolbar/SideMenuToggle.js
+++ b/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
-                    src={`${process.env.PUBLIC_URL}/assets/side-menu.svg`}
-                />
+                <SideMenuIcon />
             </button>
         </div>
     );
diff --git a/src/icons/index.js b/src/icons/index.js
index 7e8b268..a501b68 100644
--- a/src/icons/index.js
+++ b/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";
diff --git a/src/icons/toolbar/side-menu.js b/src/icons/toolbar/side-menu.js
new file mode 100644
index 0000000..1d26140
--- /dev/null
+++ b/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>
+);