fix(dropdown): preserve styles on element icons

.changeset/bright-dropdown-icons.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Apply dropdown icon spacing and sizing to element icons while preserving their custom classes.

packages/kumo-docs-astro/src/components/demos/DropdownDemo.tsx

@@ -9,6 +9,7 @@ import {
   GearIcon,
   BookOpenIcon,
   ArrowSquareOutIcon,
+  ArrowsClockwiseIcon,
   CopyIcon,
   PencilSimpleIcon,
   TrashIcon,
@@ -192,6 +193,12 @@ export function DropdownOnClickDemo() {
           >
             Rename
           </DropdownMenu.Item>
+          <DropdownMenu.Item
+            icon={<ArrowsClockwiseIcon className="animate-spin" />}
+            onClick={() => setLastAction("Refreshed")}
+          >
+            Refresh
+          </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item
             icon={TrashIcon}

packages/kumo/src/components/dropdown/dropdown.tsx

@@ -140,7 +140,11 @@ const DropdownMenuContent = React.forwardRef<
 
 const renderIconNode = (IconComponent?: Icon | React.ReactNode) => {
   if (!IconComponent) return null;
-  if (React.isValidElement(IconComponent)) return IconComponent;
+  if (React.isValidElement<{ className?: string }>(IconComponent)) {
+    return React.cloneElement(IconComponent, {
+      className: cn("mr-2 h-4 w-4", IconComponent.props.className),
+    });
+  }
   const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;
   return <Comp className="mr-2 h-4 w-4" />;
 };