fix: stop passing unnecessary props to DOM nodes (#52)

* Stop pass unnecessary props to dom node * Fix typings in DynamicIcon --------- Co-authored-by: Aleksei <[email protected]>
bgd-labs · Nov 6, 2024 · 95a44f2 · 95a44f2
1 parent 516e735
commit 95a44f2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/packages/react-web3-icons/src/components/DynamicIcon/LoadableIcon.tsx b/packages/react-web3-icons/src/components/DynamicIcon/LoadableIcon.tsx
@@ -3,11 +3,13 @@ import React, { JSX } from "react";
 
 import { Web3IconType } from "../../icons/full";
 import { IconComponentBaseProps, symbolToComponentName } from "../../utils";
+import { omit } from "../../utils/omit";
 import { IconPlaceholder } from "../Base/IconPlaceholder";
 
-export type LoadableIconProps = IconComponentBaseProps & {
+export type LoadableIconProps = Omit<IconComponentBaseProps, "loader"> & {
   iconKey: Web3IconType | string;
   abbreviation: string;
+  fallback?: Pick<IconComponentBaseProps, "loader">;
   fallbackComponent?: JSX.Element;
 };
 
@@ -22,7 +24,12 @@ export const LoadableIcon = loadable(
     const mode = mono ? "mono" : "full";
     const componentName = symbolToComponentName(iconKey);
     try {
-      return import(`../icons/${mode}/${componentName}`);
+      const iconEsModule = await import(`../icons/${mode}/${componentName}`);
+      const IconComponent = iconEsModule.default;
+      const imageComponentProps = omit(props, ["fallback"]);
+      return {
+        default: () => <IconComponent {...imageComponentProps} />,
+      };
     } catch (err) {
       if (fallbackComponent) {
         return {

diff --git a/packages/react-web3-icons/src/utils/omit.ts b/packages/react-web3-icons/src/utils/omit.ts
@@ -0,0 +1,11 @@
+export const omit = <T extends Record<string, unknown>>(
+  obj: T,
+  keys: (keyof T)[],
+) => {
+  const exclude = new Set(keys);
+  return Object.fromEntries(
+    (Object.entries(obj) as [keyof T, T[keyof T]][]).filter(([key]) => {
+      return !exclude.has(key);
+    }),
+  );
+};