Remove large imports

src/layout/Button.tsx

@@ -8,8 +8,6 @@ import React, {
 } from "react";
 import { twMerge } from "tailwind-merge";
 import Loading from "../elements/Loading";
-import LucideIcon, { type TWUILucideIconName } from "../elements/lucide-icon";
-import type { LucideProps } from "lucide-react";
 
 export const TWUIButtonColors = [
     "primary",
@@ -53,12 +51,13 @@ export type TWUIButtonProps = DetailedHTMLProps<
         AnchorHTMLAttributes<HTMLAnchorElement>,
         HTMLAnchorElement
     >;
-    beforeIcon?: TWUILucideIconName | React.JSX.Element;
-    afterIcon?: TWUILucideIconName | React.JSX.Element;
-    before_icon_name?: TWUILucideIconName;
-    after_icon_name?: TWUILucideIconName;
-    before_icon_props?: LucideProps;
-    after_icon_props?: LucideProps;
+    /**
+     * An icon element before the children, e.g. `<Download size={16} />`.
+     * Icons are passed as elements, never looked up by name: a by-name
+     * lookup puts every lucide icon in every bundle that uses `Button`.
+     */
+    beforeIcon?: React.ReactNode;
+    afterIcon?: React.ReactNode;
     buttonContentProps?: DetailedHTMLProps<
         HTMLAttributes<HTMLDivElement>,
         HTMLDivElement
@@ -265,10 +264,6 @@ export default function Button({
     loading,
     loadingIconSize,
     loadingProps,
-    before_icon_name,
-    after_icon_name,
-    before_icon_props,
-    after_icon_props,
     ...props
 }: TWUIButtonProps) {
     const finalClassName =
@@ -308,28 +303,9 @@ export default function Button({
                     buttonContentProps?.className,
                 )}
             >
-                {before_icon_name ? (
-                    <LucideIcon
-                        {...before_icon_props}
-                        name={before_icon_name}
-                    />
-                ) : beforeIcon ? (
-                    typeof beforeIcon == "string" ? (
-                        <LucideIcon name={beforeIcon as TWUILucideIconName} />
-                    ) : (
-                        beforeIcon
-                    )
-                ) : null}
+                {beforeIcon}
                 {props.children}
-                {after_icon_name ? (
-                    <LucideIcon {...after_icon_props} name={after_icon_name} />
-                ) : afterIcon ? (
-                    typeof afterIcon == "string" ? (
-                        <LucideIcon name={afterIcon as TWUILucideIconName} />
-                    ) : (
-                        afterIcon
-                    )
-                ) : null}
+                {afterIcon}
             </div>
 
             {loading && (