Feat: Node icons

mahesh-gfx · Aug 30, 2024 · faeb066 · faeb066
1 parent df87cd7
commit faeb066
Show file tree

Hide file tree

Showing 31 changed files with 460 additions and 30 deletions.
diff --git a/packages/frontend/src/components/ComponentLoader.tsx b/packages/frontend/src/components/ComponentLoader.tsx
@@ -0,0 +1,36 @@
+import React, { Suspense, useMemo } from "react";
+import icons from "./icons"; // Import the icons object
+import { IconProps } from "./icons";
+
+type IconNames = keyof typeof icons;
+
+interface IconLoaderProps extends IconProps {
+  iconName: IconNames;
+  fontSize?: "inherit" | "large" | "medium" | "small" | string;
+  color?: string;
+}
+
+const IconLoader: React.FC<IconLoaderProps> = ({
+  iconName,
+  color,
+  fontSize,
+}) => {
+  // Memoize the LazyIcon component
+  const LazyIcon = useMemo(() => {
+    const IconComponent = icons[iconName];
+    if (!IconComponent) {
+      throw new Error(`Icon "${iconName}" not found`);
+    }
+    return React.lazy(() =>
+      Promise.resolve({ default: IconComponent })
+    ) as React.FC<IconProps>;
+  }, [iconName]); // Depend on iconName to recreate the component when the icon changes
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <LazyIcon color={color} fontSize={fontSize} />
+    </Suspense>
+  );
+};
+
+export default IconLoader;
diff --git a/packages/frontend/src/components/NodePanel.tsx b/packages/frontend/src/components/NodePanel.tsx
@@ -1,4 +1,7 @@
 import React from "react";
+import "./styles/nodePanel.css";
+import IconLoader from "./ComponentLoader";
+import { getContrastColor } from "@data-viz-tool/shared";
 
 interface NodePanelProps {
   nodeTypes: Record<string, any>;
@@ -13,24 +16,13 @@ const NodePanel: React.FC<NodePanelProps> = ({ nodeTypes, onDragStart }) => {
     <aside
       style={{
         position: "absolute",
-        left: 10,
         top: "10%",
         zIndex: 4,
       }}
     >
-      <div
-        style={{
-          position: "fixed",
-          top: "85px",
-          left: "10px",
-          background: "white",
-          padding: "20px",
-          border: "1px solid black",
-          borderRadius: "20px",
-        }}
-      >
-        <span style={{ display: "block", fontWeight: "bold" }}>Node Types</span>
-        <span style={{ fontSize: "12px", color: "grey" }}>
+      <div className="node-panel">
+        <span className="node-panel-title">Nodes</span>
+        <span className="node-panel-sub-title">
           Drag and drop Nodes on the Canvas
         </span>
         <div style={{ padding: "10px" }}>
@@ -43,12 +35,22 @@ const NodePanel: React.FC<NodePanelProps> = ({ nodeTypes, onDragStart }) => {
                 margin: "5px 0",
                 cursor: "grab",
                 background: def.color,
-                color: "white",
+                color: getContrastColor(def.color),
                 padding: "5px 15px",
                 borderRadius: "20px",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: "10px",
               }}
             >
               {def.displayName || key}
+
+              <IconLoader
+                iconName={def.icon}
+                color={getContrastColor(def.color)}
+                fontSize="medium"
+              />
             </div>
           ))}
         </div>

diff --git a/packages/frontend/src/components/icons/Binning.tsx b/packages/frontend/src/components/icons/Binning.tsx
@@ -0,0 +1,37 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function Binning(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M2.25 7.125C2.25 6.50368 2.75368 6 3.375 6H9.375C9.99632 6 10.5 6.50368 10.5 7.125V10.875C10.5 11.4963 9.99632 12 9.375 12H3.375C2.75368 12 2.25 11.4963 2.25 10.875V7.125Z"
+          stroke={props.color}
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.25 8.625C14.25 8.00368 14.7537 7.5 15.375 7.5H20.625C21.2463 7.5 21.75 8.00368 21.75 8.625V16.875C21.75 17.4963 21.2463 18 20.625 18H15.375C14.7537 18 14.25 17.4963 14.25 16.875V8.625Z"
+          stroke={props.color}
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3.75 16.125C3.75 15.5037 4.25368 15 4.875 15H10.125C10.7463 15 11.25 15.5037 11.25 16.125V18.375C11.25 18.9963 10.7463 19.5 10.125 19.5H4.875C4.25368 19.5 3.75 18.9963 3.75 18.375V16.125Z"
+          stroke={props.color}
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/packages/frontend/src/components/icons/ChartBar.tsx b/packages/frontend/src/components/icons/ChartBar.tsx
@@ -0,0 +1,29 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function ChartBar(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        id="icon"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <defs></defs>
+        <title>chart--histogram</title>
+        <path
+          fill={props.color}
+          d="M6,16c2.9727,0,4.2324-2.251,5.3447-4.2373C12.4741,9.7441,13.45,8,16,8s3.5259,1.7441,4.6553,3.7627C21.7676,13.749,23.0273,16,26,16h4V14H26c-1.7129,0-2.4834-1.2207-3.5991-3.2144C21.2075,8.6543,19.7231,6,16,6s-5.2075,2.6543-6.4009,4.7856C8.4834,12.7793,7.7129,14,6,14H4V2H2V28a2,2,0,0,0,2,2H30V28H28V22H26v6H21.9992L22,20H20v8H16V16H14V28H9.9992L10,20H8v8H4V16Z"
+        />
+        <rect
+          id="_Transparent_Rectangle_"
+          data-name="&lt;Transparent Rectangle&gt;"
+          fill="none"
+          width="32"
+          height="32"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/packages/frontend/src/components/icons/CleanData.tsx b/packages/frontend/src/components/icons/CleanData.tsx
@@ -0,0 +1,28 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function CleanData(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+      >
+        <path
+          d="M22.0621 25.6021L11.3291 5.4162C11.0698 4.92856 11.2549 4.32307 11.7426 4.06378C12.2302 3.8045 12.8357 3.98962 13.095 4.47726L23.828 24.6632L25.3504 23.8538C27.3009 22.8167 29.7229 23.5571 30.7601 25.5077L31.4081 26.7265L38.2771 36.7808L29.5401 41.4263L26.5133 35.4432L24.7287 36.3461L27.7739 42.3655L24.0282 44.3571L19.5334 33.0391L18.886 31.8212C17.8489 29.8707 18.5894 27.4487 20.5399 26.4116L22.0621 25.6021ZM26.2893 25.6197L21.4789 28.1775C20.5036 28.696 20.1333 29.907 20.6519 30.8823L21.2994 32.1001L29.6417 27.6644L28.9942 26.4466C28.4756 25.4714 27.2646 25.1011 26.2893 25.6197Z"
+          fill={props.color}
+        />
+        <path
+          d="M17.7682 35.3599C17.4148 34.9358 16.7846 34.8783 16.3603 35.2314L16.3619 35.2301L16.3505 35.2392C16.3385 35.2488 16.3177 35.265 16.2885 35.287C16.2299 35.3311 16.1377 35.3981 16.0141 35.4805C15.7664 35.6456 15.3956 35.8708 14.9201 36.0972C13.9666 36.5513 12.6144 37.0001 11 37.0001C10.4477 37.0001 10 37.4478 10 38.0001C10 38.5524 10.4477 39.0001 11 39.0001C12.9856 39.0001 14.6334 38.4489 15.7799 37.9029C16.3544 37.6294 16.8086 37.3545 17.1235 37.1446C17.2811 37.0395 17.4045 36.9503 17.4912 36.885C17.5346 36.8523 17.5689 36.8256 17.5938 36.8058L17.6241 36.7815L17.634 36.7735L17.6375 36.7705L17.639 36.7693L17.6402 36.7683C18.0645 36.4147 18.1218 35.7842 17.7682 35.3599Z"
+          fill={props.color}
+        />
+        <path
+          d="M19.832 40.4454C20.1384 40.9049 20.0142 41.5258 19.5547 41.8321L19.5526 41.8335L19.5495 41.8356L19.5399 41.8419L19.5077 41.8628C19.4806 41.8803 19.4423 41.9047 19.3935 41.9351C19.296 41.9957 19.1564 42.0803 18.9805 42.1808C18.6295 42.3814 18.1304 42.6476 17.5311 42.9139C16.3502 43.4388 14.7016 44.0001 13 44.0001C12.4477 44.0001 12 43.5524 12 43.0001C12 42.4478 12.4477 42.0001 13 42.0001C14.2984 42.0001 15.6498 41.5614 16.7189 41.0863C17.2446 40.8526 17.683 40.6187 17.9882 40.4443C18.1405 40.3573 18.2587 40.2857 18.3369 40.2369C18.376 40.2126 18.4051 40.1941 18.4234 40.1822L18.4427 40.1697L18.4453 40.168C18.9048 39.862 19.5258 39.986 19.832 40.4454Z"
+          fill={props.color}
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/packages/frontend/src/components/icons/FileCsv.tsx b/packages/frontend/src/components/icons/FileCsv.tsx
@@ -0,0 +1,53 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+const FileCSV = (props: any) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+        <rect width="256" height="256" fill="none" />
+        <path
+          d="M80,200.87A22.12,22.12,0,0,1,64,208c-13.26,0-24-12.54-24-28s10.74-28,24-28a22.12,22.12,0,0,1,16,7.13"
+          fill="none"
+          stroke={props.color}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="16"
+        />
+        <path
+          d="M139.9,153.6s-29.43-7.78-31.8,11,38.43,10.12,35.78,30.72c-2.47,19.16-31.78,11-31.78,11"
+          fill="none"
+          stroke={props.color}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="16"
+        />
+        <path
+          d="M48,112V40a8,8,0,0,1,8-8h96l56,56v24"
+          fill="none"
+          stroke={props.color}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="16"
+        />
+        <polyline
+          points="152 32 152 88 208 88"
+          fill="none"
+          stroke={props.color}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="16"
+        />
+        <polyline
+          points="168 152 188 208 208 152"
+          fill="none"
+          stroke={props.color}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="16"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default FileCSV;
diff --git a/packages/frontend/src/components/icons/FilterData.tsx b/packages/frontend/src/components/icons/FilterData.tsx
@@ -0,0 +1,20 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function FilterData(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="21"
+        viewBox="0 0 20 21"
+        fill="none"
+      >
+        <path
+          d="M1 4.99872H12C12 5.52915 12.2107 6.03786 12.5858 6.41293C12.9609 6.788 13.4696 6.99872 14 6.99872H16C16.5304 6.99872 17.0391 6.788 17.4142 6.41293C17.7893 6.03786 18 5.52915 18 4.99872H19C19.2652 4.99872 19.5196 4.89336 19.7071 4.70582C19.8946 4.51829 20 4.26393 20 3.99872C20 3.7335 19.8946 3.47915 19.7071 3.29161C19.5196 3.10408 19.2652 2.99872 19 2.99872H18C18 2.46829 17.7893 1.95958 17.4142 1.5845C17.0391 1.20943 16.5304 0.998718 16 0.998718H14C13.4696 0.998718 12.9609 1.20943 12.5858 1.5845C12.2107 1.95958 12 2.46829 12 2.99872H1C0.734784 2.99872 0.48043 3.10408 0.292893 3.29161C0.105357 3.47915 0 3.7335 0 3.99872C0 4.26393 0.105357 4.51829 0.292893 4.70582C0.48043 4.89336 0.734784 4.99872 1 4.99872ZM14 2.99872H16V3.99872V4.99872H14V2.99872ZM19 9.99872H10C10 9.46829 9.78929 8.95958 9.41421 8.58451C9.03914 8.20943 8.53043 7.99872 8 7.99872H6C5.46957 7.99872 4.96086 8.20943 4.58579 8.58451C4.21071 8.95958 4 9.46829 4 9.99872H1C0.734784 9.99872 0.48043 10.1041 0.292893 10.2916C0.105357 10.4791 0 10.7335 0 10.9987C0 11.2639 0.105357 11.5183 0.292893 11.7058C0.48043 11.8934 0.734784 11.9987 1 11.9987H4C4 12.5292 4.21071 13.0379 4.58579 13.4129C4.96086 13.788 5.46957 13.9987 6 13.9987H8C8.53043 13.9987 9.03914 13.788 9.41421 13.4129C9.78929 13.0379 10 12.5292 10 11.9987H19C19.2652 11.9987 19.5196 11.8934 19.7071 11.7058C19.8946 11.5183 20 11.2639 20 10.9987C20 10.7335 19.8946 10.4791 19.7071 10.2916C19.5196 10.1041 19.2652 9.99872 19 9.99872ZM6 11.9987V9.99872H8V10.9987V11.9987H6ZM19 16.9987H16C16 16.4683 15.7893 15.9596 15.4142 15.5845C15.0391 15.2094 14.5304 14.9987 14 14.9987H12C11.4696 14.9987 10.9609 15.2094 10.5858 15.5845C10.2107 15.9596 10 16.4683 10 16.9987H1C0.734784 16.9987 0.48043 17.1041 0.292893 17.2916C0.105357 17.4791 0 17.7335 0 17.9987C0 18.2639 0.105357 18.5183 0.292893 18.7058C0.48043 18.8934 0.734784 18.9987 1 18.9987H10C10 19.5292 10.2107 20.0379 10.5858 20.4129C10.9609 20.788 11.4696 20.9987 12 20.9987H14C14.5304 20.9987 15.0391 20.788 15.4142 20.4129C15.7893 20.0379 16 19.5292 16 18.9987H19C19.2652 18.9987 19.5196 18.8934 19.7071 18.7058C19.8946 18.5183 20 18.2639 20 17.9987C20 17.7335 19.8946 17.4791 19.7071 17.2916C19.5196 17.1041 19.2652 16.9987 19 16.9987ZM12 18.9987V16.9987H14V17.9987V18.9987H12Z"
+          fill={props.color}
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/packages/frontend/src/components/icons/Matrix.tsx b/packages/frontend/src/components/icons/Matrix.tsx
@@ -0,0 +1,20 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function Matrix(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="480"
+        height="480"
+        viewBox="0 0 480 480"
+      >
+        <title>matrix</title>
+        <path
+          fill={props.color}
+          d="M320 160l80 0 0-80-80 0 0 80z m-240 240l80 0 0-80-80 0 0 80z m0-120l80 0 0-80-80 0 0 80z m0-120l80 0 0-80-80 0 0 80z m120 240l80 0 0-80-80 0 0 80z m0-120l80 0 0-80-80 0 0 80z m0-120l80 0 0-80-80 0 0 80z m120 240l80 0 0-80-80 0 0 80z m0-120l80 0 0-80-80 0 0 80z"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/packages/frontend/src/components/icons/Normalize.tsx b/packages/frontend/src/components/icons/Normalize.tsx
@@ -0,0 +1,23 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function Normalize(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="449.094"
+        height="449.437"
+        viewBox="0 0 449.094 449.437"
+      >
+        <defs></defs>
+        <path
+          data-name="Color Fill 1"
+          className="cls-1"
+          d="M258,240c-1.021,18.322-16.425,36.238-39,32-12.3-2.309-22.682-10.68-27-21q-1-5.5-2-11H45l-6-2c-5.533-7-8.04-12.009-5-23,20.6-14.99,115.646-7.234,152-7q-4.5-32-9-64h-5q-7.5,18.5-15,37c-5.56,6.691-15.725,11.081-28,11-41.044-.27-41.261-57.959-43-96H73L62,185l-9,6c-26.333,7.167-21.468-28.253-18-48l6-49c-2.154-5.281-12.086-6.2-9-18,0.335-1.281,25.1-37.738,27-39,16.691-11.063,41.925-2.512,50,10q2.5,8.5,5,17H334q2-12.5,4-25c5.253-3.9,7.617-6.7,17-7l6,2c6.313,8.293,8.027,16.463,5,30,23.545-1.4,38.3,2.815,32,25-8.694,6.536-18.3,7.378-35,7-2.71,23.688-3.824,82.772-15,98-5.437,7.408-13.371,9.532-22,14,21.424-.21,48.959-2.442,67,2,5.533,7,8.04,12.009,5,23C378.233,247.4,292.7,240.241,258,240Zm-40-32h13c0.832-37,14.468-106.483,63-75,14.536,9.429,11.833,30.464,23,43l5-1q4.5-39.5,9-79H118q4.5,32,9,64h5q7.5-18.5,15-37c5.437-6.744,15.8-11.08,28-11C216.044,112.27,216.261,169.959,218,208Zm52-48-7,48,48-1C279.737,202.4,287.246,162.474,270,160Zm158,32,13,2c10.336,14.026,7.313,46.574,7,71,7.7-6.274,12.172-10.511,25-7,3.16,4.082,9.291,8.839,7,18-1.877,7.508-40.51,46.87-52,44-10.829-2.7-20.675-18.674-28-26-8.931-8.932-18.581-13.754-14-31,11.833-9.436,19.492-6.5,30,2-0.21-21.125-2.373-48.247,2-66ZM83,336c-4.406.112-4.935-.091-7,2-10.425,24.831-3.993,61.368-17,83-4.163,1.729-8.285,4.632-13,3-5.776-.771-7.251-2.555-11-5-7.758-24.519,6.207-56.825,8-84-9.661-4.428-12.519-12.029-9-24,17.725-12.852,64.787-7,94-7H309c26.66,0,60.891-3.589,84,2,5.533,7,8.04,12.009,5,23-9.076,6.625-18.843,4.453-33,8-0.4,18.41-7.7,74.675-16,86-9.855,13.446-39.626,17.361-55,6-7.432-5.492-11.962-17.226-16-26l-7-1-2,3q-4.5,21.5-9,43H387l6,2c5.533,7,8.04,12.009,5,23-17.725,12.852-64.787,7-94,7H123c-26.66,0-60.891,3.589-84-2-5.533-7-8.04-12.009-5-23,20.811-15.137,118.233-7.232,155-7v-1c-3.715-13.394-2.677-46.04-12-55h-7c-3.97,8.68-8.644,20.592-16,26-15.883,11.676-46.5,7.074-56-7C90.528,399.928,83.842,352.5,83,336ZM221,448h6c4.742-35.656,16.455-103.282,68-73,10.633,6.247,11.282,20.216,20,28,10.912,3.386,17.522-54.1,18-67H115v1c3.715,13.394,2.677,46.04,12,55h7c4-8.749,8.578-20.557,16-26,15.884-11.649,46.477-7.112,56,7C213.472,384.072,220.158,431.5,221,448Z"
+          transform="translate(-31.406 -31.875)"
+          fill={props.color}
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/packages/frontend/src/components/icons/ParallelCoordinates.tsx b/packages/frontend/src/components/icons/ParallelCoordinates.tsx
@@ -0,0 +1,29 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function ParallelCoordinates(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        id="icon"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <defs></defs>
+        <title>chart--parallel</title>
+        <path
+          fill={props.color}
+          d="M28,2V5.3071l-6,2.25V2H20V7.5229l-8-3.2V2H10V4.4458l-6,3.75V2H2V30H4V27.6182l6-3V30h2V24.3442l8,2.4V30h2V26.5542l6-3.75V30h2V2Zm0,5.4429V12.5L22,17V9.6929ZM20,9.6768v7.5571l-8-4.8V6.4771ZM10,6.8042v5.7417l-6,5.25V10.5542ZM4,25.3818V20.4541l6-5.25v7.1777Zm8-3.1259v-7.49l8,4.8v5.0894Zm10,1.94V19.5L28,15v5.4458Z"
+        />
+        <rect
+          id="_Transparent_Rectangle_"
+          data-name="&lt;Transparent Rectangle&gt;"
+          fill="none"
+          width="32"
+          height="32"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/packages/frontend/src/components/icons/PlayCircle.tsx b/packages/frontend/src/components/icons/PlayCircle.tsx
@@ -0,0 +1,20 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function PlayCircle(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
+          fill={props.color}
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/packages/frontend/src/components/icons/ReduceDimensions.tsx b/packages/frontend/src/components/icons/ReduceDimensions.tsx
@@ -0,0 +1,20 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function ReduceDimension(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="-1.5 -4 24 24"
+        width="24"
+        height="24"
+        preserveAspectRatio="xMinYMin"
+      >
+        <path
+          fill={"props.color"}
+          d="M10.638.786l8.85 3.551a1 1 0 0 1 .01 1.852l-8.85 3.664a1 1 0 0 1-.765 0L1.032 6.19a1 1 0 0 1 .01-1.852L9.892.786a1 1 0 0 1 .746 0zm5.759 8.31l3.091 1.241a1 1 0 0 1 .01 1.852l-8.85 3.664a1 1 0 0 1-.765 0L1.032 12.19a1 1 0 0 1 .01-1.852l3.091-1.24 5.176 2.142a2.5 2.5 0 0 0 1.912 0l5.176-2.142z"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}