Adding Globe icon (#496)

* Adding Globe icon

* Fixing syntax issues

* Adding new stop icon

* Fixing import

src/components/Icon/IconCommon.tsx

@@ -59,6 +59,7 @@ import Fire from "@/components/icons/Fire";
 import FolderOpen from "@/components/icons/FolderOpen";
 import FolderClosed from "@/components/icons/FolderClosed";
 import Gift from "@/components/icons/Gift";
+import Globe from "@/components/icons/Globe";
 import Home from "@/components/icons/Home";
 import HorizontalLoading from "@/components/icons/HorizontalLoading";
 import Http from "@/components/icons/Http";
@@ -91,6 +92,7 @@ import SlideOut from "@/components/icons/SlideOut";
 import Sparkle from "@/components/icons/Sparkle";
 import Speaker from "@/components/icons/Speaker";
 import Speed from "@/components/icons/Speed";
+import Square from "@/components/icons/Square";
 import Star from "@/components/icons/Star";
 import Stop from "@/components/icons/Stop";
 import Support from "@/components/icons/Support";
@@ -206,6 +208,7 @@ export const ICONS_MAP = {
   "folder-open": FolderOpen,
   gear: Gear,
   gift: Gift,
+  globe: Globe,
   "git-merge": GitMerge,
   history: HistoryIcon,
   home: Home,
@@ -259,6 +262,7 @@ export const ICONS_MAP = {
   sparkle: Sparkle,
   speaker: Speaker,
   speed: Speed,
+  square: Square,
   star: Star,
   stop: Stop,
   support: Support,

src/components/Icon/types.ts

@@ -79,6 +79,7 @@ export const ICON_NAMES = [
   "gear",
   "gift",
   "git-merge",
+  "globe",
   "history",
   "horizontal-loading",
   "home",
@@ -131,6 +132,7 @@ export const ICON_NAMES = [
   "sparkle",
   "speaker",
   "speed",
+  "square",
   "star",
   "stop",
   "support",

src/components/icons/Globe.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const Globe = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M21 12H3M12 21C7.02944 21 3 16.9706 3 12M12 21C14.2512 18.5355 15.5305 15.3372 15.6 12C15.5305 8.66283 14.2512 5.46452 12 3M12 21C9.74885 18.5355 8.46952 15.3372 8.4 12C8.46952 8.66283 9.74885 5.46452 12 3M3 12C3 7.02944 7.02944 3 12 3"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Globe;

src/components/icons/Square.tsx

@@ -0,0 +1,24 @@
+import { SVGAttributes } from "react";
+
+const Square = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <rect
+      x="3.75"
+      y="3.75"
+      width="16.5"
+      height="16.5"
+      rx="1.25"
+      stroke="white"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
+
+export default Square;

src/components/icons/Stop.tsx

@@ -2,21 +2,44 @@ import { SVGAttributes } from "react";
 
 const Stop = (props: SVGAttributes<SVGElement>) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
+    width="24"
+    height="24"
     viewBox="0 0 24 24"
     fill="none"
+    xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
+    <mask
+      id="path-1-inside-1_9731_929"
+      fill="white"
+    >
+      <rect
+        x="9"
+        y="9"
+        width="6"
+        height="6"
+        rx="0.4"
+      />
+    </mask>
     <rect
-      x="3.75"
-      y="3.75"
-      width="16.5"
-      height="16.5"
-      rx="1.25"
+      x="9"
+      y="9"
+      width="6"
+      height="6"
+      rx="0.4"
+      fill="white"
+      stroke="white"
+      strokeWidth="3"
+      mask="url(#path-1-inside-1_9731_929)"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z"
       stroke="white"
       strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );