Removed Custom Icon Component and Added Iconify icons

README.md

@@ -5,7 +5,7 @@ Form + field components for **Astro** with Tailwind utilities and Zod-ready vali
 - ✅ `<Form />` — submit handling + client validation plumbing
 - ✅ `<Field />` — text/email/password/number/textarea/select/date/time/file/checkbox/radio/switch
 - ✅ `<MultiSelect />` — searchable, checkbox-driven multi select dropdown
-- ✅ `<Button />`, `<Icon />` helpers
+- ✅ `<Button />` helpers
 - 🎯 Works with your Tailwind tokens (e.g., `bg-primary`, `text-foreground`, `border-border`)
 - 🧪 Zod integration: pass `schemaName` to `<Form />` and expose a schema as `window[schemaName]`
 
@@ -18,11 +18,16 @@ pnpm add @wrnexus/astro
 # or
 npm i @wrnexus/astro
 ```
+Install All Required packages
+
+```bash
+npm install tailwind-merge clsx class-variance-authority  @tailwindcss/forms zod --save-dev
+```
 
 Theme Use
 
 ```bash
-@import "@wrnexus/astro/theme.css";
+@import "@wrnexus/astro/style.css";
 
 @import "tailwindcss";
 

astro.config.mjs

@@ -2,10 +2,12 @@
 import { defineConfig } from 'astro/config';
 
 import tailwindcss from '@tailwindcss/vite';
+import icon from "astro-icon";
 
 // https://astro.build/config
 export default defineConfig({
   vite: {
     plugins: [tailwindcss()]
-  }
+  },
+  integrations: [icon()],
 });

package.json

@@ -69,10 +69,13 @@
   "dependencies": {
     "@tailwindcss/cli": "^4.1.12",
     "@tailwindcss/vite": "^4.1.12",
+    "astro-icon": "^1.1.5",
     "tailwindcss": "^4.1.12",
     "zod": "^3.25.76"
   },
   "devDependencies": {
+    "@iconify-json/lets-icons": "^1.2.1",
+    "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/tabler": "^1.2.22",
     "@iconify/json": "^2.2.373",
     "@iconify/utils": "^3.0.1",

scripts/make-dist.mjs

@@ -10,7 +10,6 @@ export { default as Button } from "../src/components/Button.astro";
 export { default as Form } from "../src/components/Form.astro";
 export { default as Field } from "../src/components/Field.astro";
 export { default as MultiSelect } from "../src/components/MultiSelect.astro";
-export { default as Icon } from "../src/components/Icon.astro";
 export { cn } from "../src/utils/cn.js";
 `;
 
@@ -20,7 +19,6 @@ export const Button: any;
 export const Form: any;
 export const Field: any;
 export const MultiSelect: any;
-export const Icon: any;
 export function cn(...classes: Array<string | number | false | null | undefined>): string;
 `;
 

src/components/Button.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLAttributes } from "astro/types";
 import { cn } from "../utils/cn";
-import Icon from "./Icon.astro";
+import { Icon } from "astro-icon/components";
 
 type Variant = "solid" | "outline" | "ghost" | "soft" | "link";
 type Color =

src/components/Field.astro

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from "astro/types";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
-import Icon from "./Icon.astro";
+import { Icon } from "astro-icon/components";
 
 type Kind =
     | "text"

src/components/MultiSelect.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLAttributes } from "astro/types";
 import { cn } from "../utils/cn";
-import Icon from "./Icon.astro";
+import { Icon } from "astro-icon/components";
 
 interface Option {
     value: string;

src/index.ts

@@ -2,7 +2,6 @@ export { default as Button } from "./components/Button.astro";
 export { default as Form } from "./components/Form.astro";
 export { default as Field } from "./components/Field.astro";
 export { default as MultiSelect } from "./components/MultiSelect.astro";
-export { default as Icon } from "./components/Icon.astro";
 
 // Utils
 export { cn } from "./utils/cn";

src/pages/icons.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from "../components/Icon.astro";
+import { Icon } from "astro-icon/components";
 import Base from "../layouts/Base.astro";
 ---