Separate SVGX into a React component

Author: w3bdesign

components/Cart/CartPage/CartItem.component.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { v4 } from 'uuid';
 
-import SVGCloseX from 'components/SVG/SVGCloseX.component';
+import SVGX from "components/SVG/SVGX.component"
+
 
 const CartItem = ({
   item,
@@ -16,26 +16,15 @@ const CartItem = ({
     <tr className="bg-gray-100">
       <td className="px-4 py-2 border">
         <span>
-        <svg
-          id="xsvg"
+          <SVGX 
           onClick={() => {
             //setisExpanded(!isExpanded);
           }}
+          />
+        
+         
 
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="feather feather-x"
-        >
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
+        
 
         </span>
       </td>

components/Header/Hamburger.component.jsx

@@ -99,7 +99,7 @@ const Hamburger = () => {
           className="absolute right-0 z-10 w-full text-center text-black bg-white "
         >
           <ul>
-          <li className="w-full p-4 border-b border-gray-400 border-solid rounded">
+            <li className="w-full p-4 border-b border-gray-400 border-solid rounded">
               <Link href="/">
                 <a
                   className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"
@@ -119,7 +119,10 @@ const Hamburger = () => {
                 </a>
               </Link>
             </li>
-            <li id="mobile-li" className="w-full p-4 border-b border-gray-400 border-solid rounded">
+            <li
+              id="mobile-li"
+              className="w-full p-4 border-b border-gray-400 border-solid rounded"
+            >
               <Link href="/kategorier">
                 <a
                   className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"
@@ -128,7 +131,7 @@ const Hamburger = () => {
                   Kategorier
                 </a>
               </Link>
-            </li>            
+            </li>
           </ul>
         </animated.div>
       )}

components/SVG/SVGCloseX.component.jsx

@@ -1,19 +1,12 @@
 /**
- * The SVG that we display to close the cart or the mobile search 
- * @param {Object} props 
+ * The SVG that we display to close the cart or the mobile search
  */
-const SVGCloseX = (props) => {
-
-
-  const { isExpanded, setisExpanded } = props;
+const SVGCloseX = () => {
   return (
     <>
       <svg
         width="80px"
         height="80px"
-        onClick={() => {
-          setisExpanded(!isExpanded);
-        }}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 234.6 45.47"
       >

components/SVG/SVGMobileSearchIcon.component.jsx

@@ -47,7 +47,11 @@ const SVGMobileSearchIcon = () => {
           className="absolute right-0 z-50 w-full p-4 text-black bg-white"
         >
           <div className="absolute right-0 mr-6 -mt-12 cursor-pointer">
-            <SVGCloseX isExpanded={isExpanded} setisExpanded={setisExpanded} />
+            <SVGCloseX
+              onClick={() => {
+                setisExpanded(!isExpanded);
+              }}
+            />
           </div>
           <br />
           <MobileSearch />

components/SVG/SVGX.component.jsx

@@ -0,0 +1,28 @@
+/**
+ * The SVG that we display inside of the cart to remove items
+ */
+
+const SVGX = () => {
+  return (
+    <>
+      <svg
+        id="xsvg"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="feather feather-x"
+      >
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </>
+  );
+};
+
+export default SVGX;