fix: icons in Nextjs App Router

src/components/icon-elements/Badge/Badge.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { cloneElement, isValidElement } from "react";
 import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
 import {
   Color,
@@ -18,14 +18,38 @@ const makeBadgeClassName = makeClassName("Badge");
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   color?: Color;
   size?: Size;
-  icon?: React.ElementType;
+  icon?: React.ElementType | React.ReactElement;
   tooltip?: string;
 }
 
 const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
   const { color, icon, size = Sizes.SM, tooltip, className, children, ...other } = props;
 
-  const Icon = icon ? icon : null;
+  let Icon;
+  if (icon) {
+    if (isValidElement(icon)) {
+      Icon = cloneElement(icon as React.ReactElement, {
+        className: tremorTwMerge(
+          makeBadgeClassName("icon"),
+          "shrink-0 -ml-1 mr-1.5",
+          iconSizes[size].height,
+          iconSizes[size].width,
+        ),
+      });
+    } else {
+      const IconElm = icon as React.ElementType;
+      Icon = (
+        <IconElm
+          className={tremorTwMerge(
+            makeBadgeClassName("icon"),
+            "shrink-0 -ml-1 mr-1.5",
+            iconSizes[size].height,
+            iconSizes[size].width,
+          )}
+        />
+      );
+    }
+  }
 
   const { tooltipProps, getReferenceProps } = useTooltip();
 
@@ -61,16 +85,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
       {...other}
     >
       <Tooltip text={tooltip} {...tooltipProps} />
-      {Icon ? (
-        <Icon
-          className={tremorTwMerge(
-            makeBadgeClassName("icon"),
-            "shrink-0 -ml-1 mr-1.5",
-            iconSizes[size].height,
-            iconSizes[size].width,
-          )}
-        />
-      ) : null}
+      {Icon}
       <span className={tremorTwMerge(makeBadgeClassName("text"), "whitespace-nowrap")}>
         {children}
       </span>

src/components/icon-elements/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { cloneElement, isValidElement } from "react";
 
 import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
 import { makeClassName, mergeRefs, Sizes, tremorTwMerge } from "lib";
@@ -17,7 +17,7 @@ export const IconVariants: { [key: string]: IconVariant } = {
 };
 
 export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
-  icon: React.ElementType;
+  icon: React.ElementType | React.ReactElement;
   variant?: IconVariant;
   tooltip?: string;
   size?: Size;
@@ -34,7 +34,31 @@ const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
     className,
     ...other
   } = props;
-  const Icon = icon;
+
+  let Icon;
+  if (isValidElement(icon)) {
+    Icon = cloneElement(icon as React.ReactElement, {
+      className: tremorTwMerge(
+        makeIconClassName("icon"),
+        "shrink-0",
+        iconSizes[size].height,
+        iconSizes[size].width,
+      ),
+    });
+  } else {
+    const IconElm = icon as React.ElementType;
+    Icon = (
+      <IconElm
+        className={tremorTwMerge(
+          makeIconClassName("icon"),
+          "shrink-0",
+          iconSizes[size].height,
+          iconSizes[size].width,
+        )}
+      />
+    );
+  }
+
   const iconColorStyles = getIconColors(variant, color);
 
   const { tooltipProps, getReferenceProps } = useTooltip();
@@ -61,14 +85,7 @@ const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
       {...other}
     >
       <Tooltip text={tooltip} {...tooltipProps} />
-      <Icon
-        className={tremorTwMerge(
-          makeIconClassName("icon"),
-          "shrink-0",
-          iconSizes[size].height,
-          iconSizes[size].width,
-        )}
-      />
+      {Icon}
     </span>
   );
 });

src/components/input-elements/BaseInput.tsx

@@ -1,5 +1,12 @@
 "use client";
-import React, { ReactNode, useCallback, useRef, useState } from "react";
+import React, {
+  ReactNode,
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
 import { ExclamationFilledIcon, EyeIcon, EyeOffIcon } from "assets";
 import { getSelectButtonColors, hasValue } from "components/input-elements/selectUtils";
 import { mergeRefs, tremorTwMerge } from "lib";
@@ -8,7 +15,7 @@ export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputEleme
   type?: "text" | "password" | "email" | "url" | "number";
   defaultValue?: string | number;
   value?: string | number;
-  icon?: React.ElementType | React.JSXElementConstructor<any>;
+  icon?: React.ElementType | React.JSXElementConstructor<any> | React.ReactElement;
   error?: boolean;
   errorMessage?: string;
   disabled?: boolean;
@@ -43,7 +50,37 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
     [isPasswordVisible, setIsPasswordVisible],
   );
 
-  const Icon = icon;
+  let Icon;
+  if (icon) {
+    if (isValidElement(icon)) {
+      Icon = cloneElement(icon as React.ReactElement, {
+        className: tremorTwMerge(
+          makeInputClassName("icon"),
+          // common
+          "shrink-0 h-5 w-5 mx-2.5 absolute left-0 flex items-center",
+          // light
+          "text-tremor-content-subtle",
+          // light
+          "dark:text-dark-tremor-content-subtle",
+        ),
+      });
+    } else {
+      const IconElm = icon as React.ElementType | React.JSXElementConstructor<any>;
+      Icon = (
+        <IconElm
+          className={tremorTwMerge(
+            makeInputClassName("icon"),
+            // common
+            "shrink-0 h-5 w-5 mx-2.5 absolute left-0 flex items-center",
+            // light
+            "text-tremor-content-subtle",
+            // light
+            "dark:text-dark-tremor-content-subtle",
+          )}
+        />
+      );
+    }
+  }
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -96,19 +133,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref
           className,
         )}
       >
-        {Icon ? (
-          <Icon
-            className={tremorTwMerge(
-              makeInputClassName("icon"),
-              // common
-              "shrink-0 h-5 w-5 mx-2.5 absolute left-0 flex items-center",
-              // light
-              "text-tremor-content-subtle",
-              // light
-              "dark:text-dark-tremor-content-subtle",
-            )}
-          />
-        ) : null}
+        {Icon}
         <input
           ref={mergeRefs([inputRef, ref])}
           defaultValue={defaultValue}

src/components/input-elements/Button/Button.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
-import React, { useEffect } from "react";
+import React, { cloneElement, isValidElement, useEffect } from "react";
 import { useTransition, type TransitionStatus } from "react-transition-state";
 
 import { HorizontalPositions, makeClassName, mergeRefs, Sizes, tremorTwMerge } from "lib";
@@ -15,7 +15,7 @@ export interface ButtonIconOrSpinnerProps {
   loading: boolean;
   iconSize: string;
   iconPosition: string;
-  Icon: React.ElementType | undefined;
+  icon: React.ReactElement | undefined;
   needMargin: boolean;
   transitionStatus: TransitionStatus;
 }
@@ -24,12 +24,10 @@ export const ButtonIconOrSpinner = ({
   loading,
   iconSize,
   iconPosition,
-  Icon,
+  icon,
   needMargin,
   transitionStatus,
 }: ButtonIconOrSpinnerProps) => {
-  Icon = Icon!;
-
   const margin = !needMargin
     ? ""
     : iconPosition === HorizontalPositions.Left
@@ -45,6 +43,13 @@ export const ButtonIconOrSpinner = ({
     exited: defaultSpinnerSize,
   };
 
+  let Icon: React.ReactElement | null = null;
+  if (icon) {
+    Icon = cloneElement(icon, {
+      className: tremorTwMerge(makeButtonClassName("icon"), "shrink-0", iconSize, margin),
+    });
+  }
+
   return loading ? (
     <LoadingSpinner
       className={tremorTwMerge(
@@ -57,12 +62,12 @@ export const ButtonIconOrSpinner = ({
       style={{ transition: `width 150ms` }}
     />
   ) : (
-    <Icon className={tremorTwMerge(makeButtonClassName("icon"), "shrink-0", iconSize, margin)} />
+    Icon
   );
 };
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: React.ElementType;
+  icon?: React.ElementType | React.ReactElement;
   iconPosition?: HorizontalPosition;
   size?: Size;
   color?: Color;
@@ -89,7 +94,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     ...other
   } = props;
 
-  const Icon = icon;
+  let Icon: React.ReactElement | undefined;
+  if (icon) {
+    if (isValidElement(icon)) {
+      Icon = icon as React.ReactElement;
+    } else {
+      const IconElm = icon as React.ElementType;
+      Icon = <IconElm />;
+    }
+  }
 
   const isDisabled = loading || disabled;
   const showButtonIconOrSpinner = Icon !== undefined || loading;
@@ -154,7 +167,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
           loading={loading}
           iconSize={iconSize}
           iconPosition={iconPosition}
-          Icon={Icon}
+          icon={Icon}
           transitionStatus={transitionState.status}
           needMargin={needIconMargin}
         />
@@ -174,7 +187,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
           loading={loading}
           iconSize={iconSize}
           iconPosition={iconPosition}
-          Icon={Icon}
+          icon={Icon}
           transitionStatus={transitionState.status}
           needMargin={needIconMargin}
         />

src/components/input-elements/MultiSelect/MultiSelect.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { isValidElement, useMemo, useRef, useState } from "react";
+import React, { cloneElement, isValidElement, useMemo, useRef, useState } from "react";
 import { SelectedValueContext } from "contexts";
 import { useInternalState } from "hooks";
 import { ArrowDownHeadIcon, SearchIcon, XCircleIcon } from "assets";
@@ -18,7 +18,7 @@ export interface MultiSelectProps extends React.HTMLAttributes<HTMLInputElement>
   placeholder?: string;
   placeholderSearch?: string;
   disabled?: boolean;
-  icon?: React.ElementType | React.JSXElementConstructor<any>;
+  icon?: React.ElementType | React.JSXElementConstructor<any> | React.ReactElement;
   required?: boolean;
   error?: boolean;
   errorMessage?: string;
@@ -45,7 +45,38 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
   } = props;
   const listboxButtonRef = useRef<HTMLButtonElement | null>(null);
 
-  const Icon = icon;
+  let Icon: React.ReactElement | undefined;
+
+  if (icon) {
+    if (isValidElement(icon)) {
+      Icon = cloneElement(icon as React.ReactElement, {
+        className: tremorTwMerge(
+          makeMultiSelectClassName("Icon"),
+          // common
+          "flex-none h-5 w-5",
+          // light
+          "text-tremor-content-subtle",
+          // dark
+          "dark:text-dark-tremor-content-subtle",
+        ),
+      });
+    } else {
+      const IconElm = icon as React.ElementType | React.JSXElementConstructor<any>;
+      Icon = (
+        <IconElm
+          className={tremorTwMerge(
+            makeMultiSelectClassName("Icon"),
+            // common
+            "flex-none h-5 w-5",
+            // light
+            "text-tremor-content-subtle",
+            // dark
+            "dark:text-dark-tremor-content-subtle",
+          )}
+        />
+      );
+    }
+  }
 
   const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
 
@@ -155,17 +186,7 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
                     "absolute inset-y-0 left-0 flex items-center ml-px pl-2.5",
                   )}
                 >
-                  <Icon
-                    className={tremorTwMerge(
-                      makeMultiSelectClassName("Icon"),
-                      // common
-                      "flex-none h-5 w-5",
-                      // light
-                      "text-tremor-content-subtle",
-                      // dark
-                      "dark:text-dark-tremor-content-subtle",
-                    )}
-                  />
+                  {Icon}
                 </span>
               )}
               <div className="h-6 flex items-center">