migrate from react-icons to @meronex/icons for better tree shaking

hyperglass/ui/components/BGPTable.js

@@ -10,7 +10,7 @@ import {
   Tooltip,
   useColorMode
 } from "@chakra-ui/core";
-import { MdLastPage } from "react-icons/md";
+import { MdLastPage } from "@meronex/icons/md";
 import dayjs from "dayjs";
 import relativeTimePlugin from "dayjs/plugin/relativeTime";
 import utcPlugin from "dayjs/plugin/utc";

hyperglass/ui/components/Footer/Footer.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { useState } from "react";
 import { Flex, useColorMode } from "@chakra-ui/core";
-import { FiCode } from "react-icons/fi";
-import { GoLinkExternal } from "react-icons/go";
+import { FiCode } from "@meronex/icons/fi";
+import { GoLinkExternal } from "@meronex/icons/go";
 import format from "string-format";
 import { useConfig } from "app/context";
 import { FooterButton } from "./FooterButton";

hyperglass/ui/components/LightningBolt.js

@@ -1,21 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@chakra-ui/core";
-
-export const LightningBolt = ({ size = 4, color = "currentColor" }) => {
-  const theme = useTheme();
-  return (
-    <svg
-      width={theme.space[size]}
-      height={theme.space[size]}
-      viewBox="0 0 16 16"
-      fill={theme.colors[color]}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-};

hyperglass/ui/components/ResetButton.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Button } from "@chakra-ui/core";
-import { FiChevronLeft } from "react-icons/fi";
+import { FiChevronLeft } from "@meronex/icons/fi";
 
 export const ResetButton = React.forwardRef(
   ({ isSubmitting, onClick }, ref) => (

hyperglass/ui/components/Result.js

@@ -15,6 +15,7 @@ import {
   useColorMode,
   useTheme
 } from "@chakra-ui/core";
+import { BsLightningFill } from "@meronex/icons/bs";
 import styled from "@emotion/styled";
 import useAxios from "axios-hooks";
 import strReplace from "react-string-replace";
@@ -25,7 +26,6 @@ import {
   BGPTable,
   CacheTimeout,
   CopyButton,
-  LightningBolt,
   RequeryButton,
   ResultHeader,
   TextOutput
@@ -266,7 +266,7 @@ export const Result = forwardRef(
                     placement="top"
                   >
                     <Box ml={1} display={data?.cached ? "block" : "none"}>
-                      <LightningBolt color={color[colorMode]} />
+                      <BsLightningFill color={color[colorMode]} />
                     </Box>
                   </Tooltip>
                   {isSm && (

hyperglass/ui/components/SubmitButton.js

@@ -7,7 +7,7 @@ import {
   useColorMode,
   useTheme
 } from "@chakra-ui/core";
-import { FiSearch } from "react-icons/fi";
+import { FiSearch } from "@meronex/icons/fi";
 import { opposingColor } from "app/util";
 
 const btnProps = {

hyperglass/ui/components/index.mjs

@@ -15,7 +15,6 @@ export * from "./HelpModal";
 export * from "./HyperglassForm";
 export * from "./Label";
 export * from "./Layout";
-export * from "./LightningBolt";
 export * from "./Loading";
 export * from "./LookingGlass";
 export * from "./Markdown";

hyperglass/ui/package.json

@@ -18,6 +18,7 @@
     "@chakra-ui/core": "^0.8",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
+    "@meronex/icons": "^4.0.0",
     "@styled-system/should-forward-prop": "^5.1.5",
     "axios": "^0.19.2",
     "axios-hooks": "^1.9.0",
@@ -31,7 +32,6 @@
     "react-countdown": "^2.2.1",
     "react-dom": "^16.13.1",
     "react-hook-form": "^5.7",
-    "react-icons": "^3.9.0",
     "react-markdown": "^4.3.1",
     "react-select": "^3.0.8",
     "react-string-replace": "^0.4.4",

hyperglass/ui/yarn.lock

@@ -1153,6 +1153,14 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@meronex/icons@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@meronex/icons/-/icons-4.0.0.tgz#26e089a8a4ec176a5b6778fd54fcdd25b4746c67"
+  integrity sha512-WnoxUT02qawZSvsoPSwe7YOqOk0APysIHugiD3dYdc/QNeoigN4PD8mmmtmZFKlv8/Z7eERub0BmPkWcJ1BI+w==
+  dependencies:
+    camelcase "^5.0.0"
+    ncp "^2.0.0"
+
 "@next/react-dev-overlay@9.5.3":
   version "9.5.3"
   resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.3.tgz#3275301f08045ecc709e3273031973a1f5e81427"
@@ -5245,6 +5253,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+ncp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+  integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
+
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -6140,13 +6153,6 @@ react-hook-form@^5.7:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-5.7.2.tgz#a84e259e5d37dd30949af4f79c4dac31101b79ac"
   integrity sha512-bJvY348vayIvEUmSK7Fvea/NgqbT2racA2IbnJz/aPlQ3GBtaTeDITH6rtCa6y++obZzG6E3Q8VuoXPir7QYUg==
 
-react-icons@^3.9.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
-  integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
-  dependencies:
-    camelcase "^5.0.0"
-
 react-input-autosize@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"