IconSlot

bunx --bun shadcn@latest add @woohl/icon-slot

import type { ReactElement } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/utils";

/** Wraps consumer icon nodes to enforce optical sizing. */
export function IconSlot({
  icon,
  size,
  className,
}: {
  icon: ReactElement | null | undefined;
  /** Optical size in px. Set by the component, not the call site. */
  size: number;
  className?: string;
}) {
  if (!icon) return null;

  return (
    <span
      aria-hidden
      data-slot="icon"
      className={cn(
        "inline-grid flex-none place-items-center [&>svg]:size-full",
        className,
      )}
      style={{ width: size, height: size }}
    >
      {icon}
    </span>
  );
}