From 95a44f2b1da23e4c0e15cd6eb14c61a38ba6a88a Mon Sep 17 00:00:00 2001
From: Aleksey Gorbunov <gorbunovalexeyleti@gmail.com>
Date: Wed, 6 Nov 2024 10:35:59 +0100
Subject: [PATCH] fix: stop passing unnecessary props to DOM nodes (#52)

* Stop pass unnecessary props to dom node

* Fix typings in DynamicIcon

---------

Co-authored-by: Aleksei <al.gorbunov@slotegrator.space>
---
 .../src/components/DynamicIcon/LoadableIcon.tsx       | 11 +++++++++--
 packages/react-web3-icons/src/utils/omit.ts           | 11 +++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-web3-icons/src/utils/omit.ts

diff --git a/packages/react-web3-icons/src/components/DynamicIcon/LoadableIcon.tsx b/packages/react-web3-icons/src/components/DynamicIcon/LoadableIcon.tsx
index 26c3fedc..2a218b94 100644
--- 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
new file mode 100644
index 00000000..2c23fc9a
--- /dev/null
+++ 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);
+    }),
+  );
+};