From ecd75a6f6e3026c4f3bb355e6489dc4f98686538 Mon Sep 17 00:00:00 2001
From: Nicola Benaglia <nico.benaz@gmail.com>
Date: Sun, 20 Apr 2025 09:15:35 +0200
Subject: [PATCH] Convert svg into tsx

---
 src/assets/svgs/NavAdd.tsx      | 32 +++++++++++++++++++++++
 src/assets/svgs/NavBack.tsx     | 30 +++++++++++++++++++++
 src/assets/svgs/NavCloseTab.tsx | 46 +++++++++++++++++++++++++++++++++
 src/assets/svgs/NavMoreMenu.tsx | 30 +++++++++++++++++++++
 4 files changed, 138 insertions(+)
 create mode 100644 src/assets/svgs/NavAdd.tsx
 create mode 100644 src/assets/svgs/NavBack.tsx
 create mode 100644 src/assets/svgs/NavCloseTab.tsx
 create mode 100644 src/assets/svgs/NavMoreMenu.tsx

diff --git a/src/assets/svgs/NavAdd.tsx b/src/assets/svgs/NavAdd.tsx
new file mode 100644
index 0000000..dd45bad
--- /dev/null
+++ b/src/assets/svgs/NavAdd.tsx
@@ -0,0 +1,32 @@
+import { useTheme } from '@mui/material';
+import { SVGProps } from './interfaces';
+
+export const NavAdd: React.FC<SVGProps> = ({ color, opacity, ...children }) => {
+  const theme = useTheme();
+
+  const setColor = color ? color : theme.palette.text.primary;
+  const setOpacity = opacity ? opacity : 1;
+
+  return (
+    <svg
+      {...children}
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="20"
+        cy="19.9999"
+        r="18"
+        fill={theme.palette.background.paper}
+      />
+      <path
+        d="M30 21.6666H21.6666V30C21.6666 30.9166 20.9166 31.6666 20 31.6666C19.0833 31.6666 18.3333 30.9166 18.3333 30V21.6666H9.99998C9.08331 21.6666 8.33331 20.9166 8.33331 20C8.33331 19.0833 9.08331 18.3333 9.99998 18.3333H18.3333V9.99995C18.3333 9.08328 19.0833 8.33328 20 8.33328C20.9166 8.33328 21.6666 9.08328 21.6666 9.99995V18.3333H30C30.9166 18.3333 31.6666 19.0833 31.6666 20C31.6666 20.9166 30.9166 21.6666 30 21.6666Z"
+        fill={setColor}
+        fill-opacity={setOpacity}
+      />
+    </svg>
+  );
+};
diff --git a/src/assets/svgs/NavBack.tsx b/src/assets/svgs/NavBack.tsx
new file mode 100644
index 0000000..d5865f9
--- /dev/null
+++ b/src/assets/svgs/NavBack.tsx
@@ -0,0 +1,30 @@
+import { useTheme } from '@mui/material';
+import { SVGProps } from './interfaces';
+
+export const NavBack: React.FC<SVGProps> = ({
+  color,
+  opacity,
+  ...children
+}) => {
+  const theme = useTheme();
+
+  const setColor = color ? color : theme.palette.text.primary;
+  const setOpacity = opacity ? opacity : 1;
+
+  return (
+    <svg
+      {...children}
+      width="34"
+      height="34"
+      viewBox="0 0 34 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M28.3334 15.5833H11.0925L19.0117 7.6641L17 5.6666L5.66669 16.9999L17 28.3333L18.9975 26.3358L11.0925 18.4166H28.3334V15.5833Z"
+        fill={setColor}
+        opacity={setOpacity}
+      />
+    </svg>
+  );
+};
diff --git a/src/assets/svgs/NavCloseTab.tsx b/src/assets/svgs/NavCloseTab.tsx
new file mode 100644
index 0000000..8b2734e
--- /dev/null
+++ b/src/assets/svgs/NavCloseTab.tsx
@@ -0,0 +1,46 @@
+import { useTheme } from '@mui/material';
+import { SVGProps } from './interfaces';
+
+export const NavCloseTab: React.FC<SVGProps> = ({
+  color,
+  opacity,
+  ...children
+}) => {
+  const theme = useTheme();
+
+  const setColor = color ? color : theme.palette.text.primary;
+  const setOpacity = opacity ? opacity : 1;
+
+  return (
+    <svg
+      {...children}
+      width="17"
+      height="17"
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="8.5" cy="8.5" r="8.5" fill={theme.palette.text.primary} />
+      <circle
+        cx="8.5"
+        cy="8.50003"
+        r="6.61111"
+        fill={theme.palette.background.paper}
+      />
+      <path
+        d="M5.66675 5.66669L11.3334 11.3334"
+        stroke={theme.palette.text.primary}
+        stroke-width="2"
+        fill={setColor}
+        fill-opacity={setOpacity}
+      />
+      <path
+        d="M11.3333 5.66675L5.66658 11.3334"
+        stroke={theme.palette.text.primary}
+        stroke-width="2"
+        fill={setColor}
+        fill-opacity={setOpacity}
+      />
+    </svg>
+  );
+};
diff --git a/src/assets/svgs/NavMoreMenu.tsx b/src/assets/svgs/NavMoreMenu.tsx
new file mode 100644
index 0000000..ca641ba
--- /dev/null
+++ b/src/assets/svgs/NavMoreMenu.tsx
@@ -0,0 +1,30 @@
+import { useTheme } from '@mui/material';
+import { SVGProps } from './interfaces';
+
+export const NavMoreMenu: React.FC<SVGProps> = ({
+  color,
+  opacity,
+  ...children
+}) => {
+  const theme = useTheme();
+
+  const setColor = color ? color : theme.palette.text.primary;
+  const setOpacity = opacity ? opacity : 1;
+
+  return (
+    <svg
+      {...children}
+      width="34"
+      height="34"
+      viewBox="0 0 34 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.49996 14.1666C6.94163 14.1666 5.66663 15.4416 5.66663 16.9999C5.66663 18.5583 6.94163 19.8333 8.49996 19.8333C10.0583 19.8333 11.3333 18.5583 11.3333 16.9999C11.3333 15.4416 10.0583 14.1666 8.49996 14.1666ZM25.5 14.1666C23.9416 14.1666 22.6666 15.4416 22.6666 16.9999C22.6666 18.5583 23.9416 19.8333 25.5 19.8333C27.0583 19.8333 28.3333 18.5583 28.3333 16.9999C28.3333 15.4416 27.0583 14.1666 25.5 14.1666ZM17 14.1666C15.4416 14.1666 14.1666 15.4416 14.1666 16.9999C14.1666 18.5583 15.4416 19.8333 17 19.8333C18.5583 19.8333 19.8333 18.5583 19.8333 16.9999C19.8333 15.4416 18.5583 14.1666 17 14.1666Z"
+        fill={setColor}
+        fill-opacity={setOpacity}
+      />
+    </svg>
+  );
+};