From 915c9a1be0e794b4fbc3871bd526c17a575634c4 Mon Sep 17 00:00:00 2001
From: Benjamin Toby <devops@tben.me>
Date: Tue, 20 Oct 2026 13:35:20 +0100
Subject: [PATCH] Remove large imports

---
 AGENTS.md                 |  2 +-
 dev/src/pages/buttons.tsx |  6 +++---
 package.json              |  2 +-
 src/layout/Button.tsx     | 42 +++++++++------------------------------
 4 files changed, 14 insertions(+), 38 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 15b5126..32e521f 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -6,7 +6,7 @@
 - **Runtime/tooling:** Bun, not Node. Use `bun install`, `bun run <script>`, `bun test`, `bunx`. Never `npm`/`npx`/`yarn`/`pnpm`.
 - **Build:** `tsc` emits `src/` → `dist/` (JS + `.d.ts`), then `scripts/post-compile.ts` runs. There is no Next.js, Vite, PostCSS config or `tailwind.config` in this repo - don't add them.
 - **Styling:** Tailwind v4 via `src/base.css` (`@import "tailwindcss"`, `@source "./"`, `@theme inline` tokens). `tailwind-merge` (`twMerge`) for class composition.
-- **Icons:** `lucide-react` (peer dependency).
+- **Icons:** `lucide-react` (peer dependency). Components take icons as elements. Nothing a component imports may look one up by name: `LucideIcon` (`import * as icons`) puts all of lucide in every bundle of an app that reaches it, since bundlers can't tree-shake a namespace lookup, so only an app's own pages may import it.
 
 ## Commands
 
diff --git a/dev/src/pages/buttons.tsx b/dev/src/pages/buttons.tsx
index 768d7db..b57cc79 100644
--- a/dev/src/pages/buttons.tsx
+++ b/dev/src/pages/buttons.tsx
@@ -72,7 +72,7 @@ export default function ButtonsPage() {
 
             <DemoSection
                 title="Icons and loading"
-                description="Icons accept a lucide name or a React element. Loading keeps the label in place and swaps in a spinner."
+                description="Icons are React elements. Loading keeps the label in place and swaps in a spinner."
             >
                 <Row className="gap-3">
                     <Button
@@ -91,7 +91,7 @@ export default function ButtonsPage() {
                     <Button
                         title="Download button"
                         color="success"
-                        after_icon_name="Download"
+                        afterIcon={<Download size={16} />}
                     >
                         Download
                     </Button>
@@ -140,7 +140,7 @@ export default function ButtonsPage() {
                             href="#"
                             color="secondary"
                             variant="outlined"
-                            before_icon_name="Download"
+                            beforeIcon={<Download size={16} />}
                         >
                             Outlined link
                         </Button>
diff --git a/package.json b/package.json
index bd87e9d..1aaf85d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@moduletrace/twui",
-    "version": "0.1.2",
+    "version": "0.1.4",
     "description": "A modular skeletal React component framework for Tailwind CSS v4",
     "author": "Benjamin Toby",
     "type": "module",
diff --git a/src/layout/Button.tsx b/src/layout/Button.tsx
index b2b4e4b..79af0b2 100644
--- a/src/layout/Button.tsx
+++ b/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 && (