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 & { iconKey: Web3IconType | string; abbreviation: string; + fallback?: Pick; 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: () => , + }; } 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 = >( + 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); + }), + ); +};