fix: added the ability to set the color of mono icons (#33)

bgd-labs · Aug 27, 2024 · 369bef3 · 369bef3
1 parent 5e2b6d6
commit 369bef3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/packages/react-web3-icons/src/components/DynamicIcon.tsx b/packages/react-web3-icons/src/components/DynamicIcon.tsx
@@ -8,7 +8,7 @@ import InlineSVG from "react-inlinesvg";
 import { Web3IconType } from "../icons/full";
 import { capitalize, IconComponentBaseProps } from "../utils";
 import { generateUniqueHash } from "../utils/generateUniqueHash";
-import { SVG } from "./SVG";
+import { formatMonoSvgCode, SVG } from "./SVG";
 
 /**
  * Wrapper for get icons dynamically
@@ -55,7 +55,15 @@ export const DynamicIcon = ({
 
           return {
             default: () => (
-              <SVG svgCode={iconData?.data} loader={loader} {...props} />
+              <SVG
+                svgCode={formatMonoSvgCode({
+                  mono,
+                  svgCode: iconData?.data,
+                  ...props,
+                })}
+                loader={loader}
+                {...props}
+              />
             ),
           };
         });

diff --git a/packages/react-web3-icons/src/components/SVG.tsx b/packages/react-web3-icons/src/components/SVG.tsx
@@ -3,6 +3,20 @@
 import loadable from "@loadable/component";
 import React, { ComponentProps } from "react";
 
+type Props = {
+  svgCode: string | undefined;
+} & ComponentProps<"img">;
+
+export const formatMonoSvgCode = ({
+  svgCode,
+  mono,
+  ...props
+}: { mono?: boolean } & Props) => {
+  return mono && props.color && svgCode
+    ? svgCode.replaceAll("currentColor", props.color)
+    : svgCode;
+};
+
 const Image = ({
   svgCode,
   ...props
@@ -26,10 +40,7 @@ export const SVG = ({
   svgCode,
   loader,
   ...props
-}: {
-  svgCode: string | undefined;
-  loader?: React.JSX.Element;
-} & ComponentProps<"img">) => {
+}: { loader?: React.JSX.Element } & Props) => {
   if (!svgCode) {
     const Icon = loadable(
       async () => {

diff --git a/packages/react-web3-icons/src/components/StaticIcon.tsx b/packages/react-web3-icons/src/components/StaticIcon.tsx
@@ -6,7 +6,7 @@ import InlineSVG from "react-inlinesvg";
 import { Web3IconType } from "../icons/full";
 import { IconComponentBaseProps } from "../utils";
 import { generateUniqueHash } from "../utils/generateUniqueHash";
-import { SVG } from "./SVG";
+import { formatMonoSvgCode, SVG } from "./SVG";
 
 /**
  * Wrapper for get icons directly from pack
@@ -53,5 +53,11 @@ export const StaticIcon = ({
     );
   }
 
-  return <SVG svgCode={svgCode} loader={loader} {...props} />;
+  return (
+    <SVG
+      svgCode={formatMonoSvgCode({ mono, svgCode, ...props })}
+      loader={loader}
+      {...props}
+    />
+  );
 };
diff --git a/packages/react-web3-icons/tsconfig.json b/packages/react-web3-icons/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "include": ["./src"],
   "compilerOptions": {
+    "target": "es2021",
     "esModuleInterop": true,
     "jsx": "react",
     "module": "CommonJS",