refactor: replaced react-icons with svgs

packages/react-components/package.json

@@ -33,8 +33,7 @@
     "@leapwallet/elements": "0.12.1",
     "chain-registry": "1.28.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-icons": "^5.2.1"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "7.22.10",

packages/react-components/src/lib/components/NoticeBanner.tsx

@@ -1,5 +1,5 @@
-import { FiX } from 'react-icons/fi';
-import { GrAnnounce } from 'react-icons/gr';
+import X from '../icons/X';
+import Megaphone from '../icons/Megaphone';
 import { useState } from 'react';
 import { NetworkNotice, activeNotices } from '../utils/networkConfig';
 
@@ -20,7 +20,7 @@ export const NoticeBanner = ({
           <div className="flex flex-wrap items-center justify-between">
             <div className="flex w-0 flex-1 items-center">
               <span className="flex rounded-lgp-2">
-                <GrAnnounce className="h-6 w-6" aria-hidden="true" />
+                <Megaphone className="h-6 w-6" aria-hidden="true" />
               </span>
               <p className="ml-3 font-medium text-black">{bannerContent}</p>
             </div>
@@ -30,7 +30,7 @@ export const NoticeBanner = ({
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-black hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2"
               >
-                <FiX className="h-6 w-6" />
+                <X className="h-6 w-6" />
               </button>
             </div>
           </div>

packages/react-components/src/lib/icons/Megaphone.tsx

@@ -0,0 +1,20 @@
+const Megaphone = (props: { [key: string]: any }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46"
+      />
+    </svg>
+  );
+};
+
+export default Megaphone;

packages/react-components/src/lib/icons/X.tsx

@@ -0,0 +1,20 @@
+const X = (props: { [key: string]: any }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6 18 18 6M6 6l12 12"
+      />
+    </svg>
+  );
+};
+
+export default X;

yarn.lock

@@ -368,7 +368,6 @@ __metadata:
     prop-types: "npm:15.8.1"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
-    react-icons: "npm:^5.2.1"
     storybook: "npm:7.2.2"
     tailwindcss: "npm:3.3.3"
     typescript: "npm:5.5.0-beta"
@@ -21995,15 +21994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-icons@npm:^5.2.1":
-  version: 5.2.1
-  resolution: "react-icons@npm:5.2.1"
-  peerDependencies:
-    react: "*"
-  checksum: 10c0/9d52b975afaf27dab07dcaefd50497ba43cc57076fc26ccac5142965e01c7fd0c503a62ea31c3bb710e0b2959a4620c2fed12c3c86960ad8ceb63de7f0085f3a
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"