@getmicdrop/svelte-components 5.4.0 → 5.4.2

package/dist/primitives/Icons/EyeSlashOutline.svelte.d.ts

@@ -4,9 +4,13 @@ type EyeSlashOutline = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const EyeSlashOutline: import("svelte").Component<{
+    size?: string;
+    color?: string;
     class?: string;
 }, {}, "">;
 type $$ComponentProps = {
+    size?: string;
+    color?: string;
     class?: string;
 };
 //# sourceMappingURL=EyeSlashOutline.svelte.d.ts.map

package/dist/primitives/Icons/EyeSlashOutline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EyeSlashOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/EyeSlashOutline.svelte.js"],"names":[],"mappings":";;;;;AAaA;YAT6B,MAAM;WAS2B;wBAT3C;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"EyeSlashOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/EyeSlashOutline.svelte.js"],"names":[],"mappings":";;;;;AAaA;WAT4B,MAAM;YAAU,MAAM;YAAU,MAAM;WASJ;wBAT3C;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/primitives/Icons/FacebookIcon.svelte

@@ -1,8 +1,10 @@
 <script>
-  let { size = "20", color = "currentColor" } = $props();
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
 </script>
 
 <svg
+  class={className}
+  aria-hidden="true"
   width={size}
   height={size}
   viewBox="0 0 24 24"

package/dist/primitives/Icons/FacebookIcon.svelte.d.ts

@@ -6,9 +6,11 @@ type FacebookIcon = {
 declare const FacebookIcon: import("svelte").Component<{
     size?: string;
     color?: string;
+    class?: string;
 }, {}, "">;
 type $$ComponentProps = {
     size?: string;
     color?: string;
+    class?: string;
 };
 //# sourceMappingURL=FacebookIcon.svelte.d.ts.map

package/dist/primitives/Icons/FacebookIcon.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacebookIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/FacebookIcon.svelte.js"],"names":[],"mappings":";;;;;AAaA;WAT4B,MAAM;YAAU,MAAM;WASS;wBATxC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"FacebookIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/FacebookIcon.svelte.js"],"names":[],"mappings":";;;;;AAaA;WAT4B,MAAM;YAAU,MAAM;YAAU,MAAM;WASP;wBATxC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/primitives/Icons/FileCopyOutline.svelte

@@ -1,15 +1,17 @@
 <script>
-  let { class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="1.5"
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
->
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  fill="none"
+  stroke={color}
+  stroke-width="1.5"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
 </svg>

package/dist/primitives/Icons/FileCopyOutline.svelte.d.ts

@@ -4,9 +4,13 @@ type FileCopyOutline = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const FileCopyOutline: import("svelte").Component<{
+    size?: string;
+    color?: string;
     class?: string;
 }, {}, "">;
 type $$ComponentProps = {
+    size?: string;
+    color?: string;
     class?: string;
 };
 //# sourceMappingURL=FileCopyOutline.svelte.d.ts.map

package/dist/primitives/Icons/FileCopyOutline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileCopyOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/FileCopyOutline.svelte.js"],"names":[],"mappings":";;;;;AAaA;YAT6B,MAAM;WAS2B;wBAT3C;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"FileCopyOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/FileCopyOutline.svelte.js"],"names":[],"mappings":";;;;;AAaA;WAT4B,MAAM;YAAU,MAAM;YAAU,MAAM;WASJ;wBAT3C;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/primitives/Icons/Home.svelte

@@ -1,9 +1,10 @@
 <script>
-  let { size = "20", color = "currentColor" } = $props();
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
 </script>
 
 <svg
-  {size}
+  class={className}
+  aria-hidden="true"
   width={size}
   height={size}
   viewBox="0 0 20 21"

package/dist/primitives/Icons/Home.svelte.d.ts

@@ -6,9 +6,11 @@ type Home = {
 declare const Home: import("svelte").Component<{
     size?: string;
     color?: string;
+    class?: string;
 }, {}, "">;
 type $$ComponentProps = {
     size?: string;
     color?: string;
+    class?: string;
 };
 //# sourceMappingURL=Home.svelte.d.ts.map

package/dist/primitives/Icons/Home.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Home.svelte.js"],"names":[],"mappings":";;;;;AAcA;WAV4B,MAAM;YAAU,MAAM;WAUC;wBAVhC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"Home.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Home.svelte.js"],"names":[],"mappings":";;;;;AAcA;WAV4B,MAAM;YAAU,MAAM;YAAU,MAAM;WAUf;wBAVhC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/primitives/Icons/HomeSolid.svelte

@@ -1,14 +1,16 @@
 <script>
-  let { class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  fill="currentColor"
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
->
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  fill={color}
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
   <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
 </svg>

package/dist/primitives/Icons/HomeSolid.svelte.d.ts

@@ -4,9 +4,13 @@ type HomeSolid = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const HomeSolid: import("svelte").Component<{
+    size?: string;
+    color?: string;
     class?: string;
 }, {}, "">;
 type $$ComponentProps = {
+    size?: string;
+    color?: string;
     class?: string;
 };
 //# sourceMappingURL=HomeSolid.svelte.d.ts.map

package/dist/primitives/Icons/HomeSolid.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomeSolid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/HomeSolid.svelte.js"],"names":[],"mappings":";;;;;AAcA;YAV6B,MAAM;WAUqB;wBAVrC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"HomeSolid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/HomeSolid.svelte.js"],"names":[],"mappings":";;;;;AAcA;WAV4B,MAAM;YAAU,MAAM;YAAU,MAAM;WAUV;wBAVrC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/primitives/Icons/Icon.spec.js

@@ -86,11 +86,11 @@ describe("Icon Component Tests", () => {
     expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
   });
 
-  test("Default size is 20", () => {
+  test("Default size is 24", () => {
     const { container } = render(Icon, { props: { name: "Home" } });
     const svg = container.querySelector("svg");
     // Check width or height attribute
-    expect(svg).toHaveAttribute("width", "20");
+    expect(svg).toHaveAttribute("width", "24");
   });
 
   test("Accepts custom size prop", () => {

package/dist/primitives/Icons/Icon.svelte

@@ -50,14 +50,30 @@
     Cross,
   };
 
-  let { name, size = "20", color = "currentColor" }: { name: keyof typeof iconMap; size?: string; color?: string } = $props();
+  type IconName = keyof typeof iconMap;
+  
+  let { name, size = "24", color = "currentColor", class: className = "" }: { name: string; size?: string; color?: string; class?: string } = $props();
 
-  let Component = $derived(iconMap[name] || null);
+  // Support both lowercase and PascalCase icon names
+  function getIcon(iconName: string) {
+    // If already in iconMap, use directly
+    if (iconName in iconMap) {
+      return iconMap[iconName as IconName];
+    }
+    // Try PascalCase conversion (e.g., 'home' -> 'Home')
+    const pascalCase = iconName.charAt(0).toUpperCase() + iconName.slice(1);
+    if (pascalCase in iconMap) {
+      return iconMap[pascalCase as IconName];
+    }
+    return null;
+  }
+
+  let Component = $derived(getIcon(name));
 </script>
 
 {#if Component}
   {@const IconComponent = Component}
-  <IconComponent {size} {color} />
+  <IconComponent {size} {color} class={className} />
 {:else}
   <span>Icon "{name}" not found.</span>
 {/if}

package/dist/primitives/Icons/Icon.svelte.d.ts

@@ -1,8 +1,10 @@
-declare const Icon: import("svelte").Component<{
-    name: "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
+type $$ComponentProps = {
+    name: string;
     size?: string;
     color?: string;
-}, {}, "">;
+    class?: string;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;
 //# sourceMappingURL=Icon.svelte.d.ts.map

package/dist/primitives/Icons/Icon.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Icon.svelte.ts"],"names":[],"mappings":"AA8FA,QAAA,MAAM,IAAI;;WAhByD,MAAM;YAAU,MAAM;UAgBvC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Icon.svelte.ts"],"names":[],"mappings":"AA4BC,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAmF1F,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/primitives/Icons/Icons.spec.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Comprehensive Icon Test Suite
+ *
+ * Tests all icon components against the standardized IconProps API.
+ * Ensures consistency across the entire icon library.
+ */
+export {};
+//# sourceMappingURL=Icons.spec.d.ts.map

package/dist/primitives/Icons/Icons.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Icons.spec.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/dist/primitives/Icons/Icons.spec.js

@@ -0,0 +1,291 @@
+/**
+ * Comprehensive Icon Test Suite
+ *
+ * Tests all icon components against the standardized IconProps API.
+ * Ensures consistency across the entire icon library.
+ */
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+// =============================================================================
+// Outline Icons (stroke-based)
+// =============================================================================
+import ChevronLeftOutline from './ChevronLeftOutline.svelte';
+import ChevronRightOutline from './ChevronRightOutline.svelte';
+import ChevronDownOutline from './ChevronDownOutline.svelte';
+import ChevronUpOutline from './ChevronUpOutline.svelte';
+import CloseOutline from './CloseOutline.svelte';
+import CheckOutline from './CheckOutline.svelte';
+import ShareOutline from './ShareOutline.svelte';
+import SearchOutline from './SearchOutline.svelte';
+import EyeOutline from './EyeOutline.svelte';
+import EyeSlashOutline from './EyeSlashOutline.svelte';
+import CloseCircleOutline from './CloseCircleOutline.svelte';
+import ExclamationCircleOutline from './ExclamationCircleOutline.svelte';
+import InfoCircleOutline from './InfoCircleOutline.svelte';
+import MinusOutline from './MinusOutline.svelte';
+import PlusOutline from './PlusOutline.svelte';
+import ExclamationTriangleOutline from './ExclamationTriangleOutline.svelte';
+import DotsHorizontalOutline from './DotsHorizontalOutline.svelte';
+import FileCopyOutline from './FileCopyOutline.svelte';
+import ImageOutline from './ImageOutline.svelte';
+import TrashBinOutline from './TrashBinOutline.svelte';
+// =============================================================================
+// Solid Icons (fill-based)
+// =============================================================================
+import CheckCircleSolid from './CheckCircleSolid.svelte';
+import HomeSolid from './HomeSolid.svelte';
+// =============================================================================
+// Brand Icons
+// =============================================================================
+import LogoInstagram from './LogoInstagram.svelte';
+import FacebookIcon from './FacebookIcon.svelte';
+import InstagramIcon from './InstagramIcon.svelte';
+import TwitterIcon from './TwitterIcon.svelte';
+import TiktokIcon from './TiktokIcon.svelte';
+// =============================================================================
+// Legacy Icons
+// =============================================================================
+import ArrowLeft from './ArrowLeft.svelte';
+import ArrowRight from './ArrowRight.svelte';
+import Availability from './Availability.svelte';
+import Back from './Back.svelte';
+import CheckCircle from './CheckCircle.svelte';
+import CheckCircleOutline from './CheckCircleOutline.svelte';
+import ChevronLeft from './ChevronLeft.svelte';
+import ChevronRight from './ChevronRight.svelte';
+import Copy from './Copy.svelte';
+import Cross from './Cross.svelte';
+import DownArrow from './DownArrow.svelte';
+import ErrorCircle from './ErrorCircle.svelte';
+import Home from './Home.svelte';
+import Info from './Info.svelte';
+import Message from './Message.svelte';
+import MoonIcon from './MoonIcon.svelte';
+import More from './More.svelte';
+import MoreHori from './MoreHori.svelte';
+import Notification from './Notification.svelte';
+import Payment from './Payment.svelte';
+import Profile from './Profile.svelte';
+import Reload from './Reload.svelte';
+import Shows from './Shows.svelte';
+import Signout from './Signout.svelte';
+import SunIcon from './SunIcon.svelte';
+import WarningIcon from './WarningIcon.svelte';
+const outlineIcons = {
+    ChevronLeftOutline: { component: ChevronLeftOutline, colorAttribute: 'stroke' },
+    ChevronRightOutline: { component: ChevronRightOutline, colorAttribute: 'stroke' },
+    ChevronDownOutline: { component: ChevronDownOutline, colorAttribute: 'stroke' },
+    ChevronUpOutline: { component: ChevronUpOutline, colorAttribute: 'stroke' },
+    CloseOutline: { component: CloseOutline, colorAttribute: 'stroke' },
+    CheckOutline: { component: CheckOutline, colorAttribute: 'stroke' },
+    ShareOutline: { component: ShareOutline, colorAttribute: 'stroke' },
+    SearchOutline: { component: SearchOutline, colorAttribute: 'stroke' },
+    EyeOutline: { component: EyeOutline, colorAttribute: 'stroke' },
+    EyeSlashOutline: { component: EyeSlashOutline, colorAttribute: 'stroke' },
+    CloseCircleOutline: { component: CloseCircleOutline, colorAttribute: 'stroke' },
+    ExclamationCircleOutline: { component: ExclamationCircleOutline, colorAttribute: 'stroke' },
+    InfoCircleOutline: { component: InfoCircleOutline, colorAttribute: 'stroke' },
+    MinusOutline: { component: MinusOutline, colorAttribute: 'stroke' },
+    PlusOutline: { component: PlusOutline, colorAttribute: 'stroke' },
+    ExclamationTriangleOutline: { component: ExclamationTriangleOutline, colorAttribute: 'stroke' },
+    DotsHorizontalOutline: { component: DotsHorizontalOutline, colorAttribute: 'stroke' },
+    FileCopyOutline: { component: FileCopyOutline, colorAttribute: 'stroke' },
+    ImageOutline: { component: ImageOutline, colorAttribute: 'stroke' },
+    TrashBinOutline: { component: TrashBinOutline, colorAttribute: 'stroke' },
+};
+const solidIcons = {
+    CheckCircleSolid: { component: CheckCircleSolid, colorAttribute: 'fill' },
+    HomeSolid: { component: HomeSolid, colorAttribute: 'fill' },
+};
+const brandIcons = {
+    LogoInstagram: { component: LogoInstagram, colorAttribute: 'stroke' },
+    FacebookIcon: { component: FacebookIcon, colorAttribute: 'fill' },
+    InstagramIcon: { component: InstagramIcon, colorAttribute: 'stroke' },
+    TwitterIcon: { component: TwitterIcon, colorAttribute: 'fill' },
+    TiktokIcon: { component: TiktokIcon, colorAttribute: 'fill' },
+};
+const legacyIcons = {
+    ArrowLeft: { component: ArrowLeft, colorAttribute: 'stroke' },
+    ArrowRight: { component: ArrowRight, colorAttribute: 'stroke' },
+    Availability: { component: Availability, colorAttribute: 'stroke' },
+    Back: { component: Back, colorAttribute: 'stroke' },
+    CheckCircle: { component: CheckCircle, colorAttribute: 'fill' },
+    CheckCircleOutline: { component: CheckCircleOutline, colorAttribute: 'stroke' },
+    ChevronLeft: { component: ChevronLeft, colorAttribute: 'stroke' },
+    ChevronRight: { component: ChevronRight, colorAttribute: 'stroke' },
+    Copy: { component: Copy, colorAttribute: 'stroke' },
+    Cross: { component: Cross, colorAttribute: 'stroke' },
+    DownArrow: { component: DownArrow, colorAttribute: 'stroke' },
+    ErrorCircle: { component: ErrorCircle, colorAttribute: 'stroke' },
+    Home: { component: Home, colorAttribute: 'stroke' },
+    Info: { component: Info, colorAttribute: 'stroke' },
+    Message: { component: Message, colorAttribute: 'stroke' },
+    MoonIcon: { component: MoonIcon, colorAttribute: 'stroke' },
+    More: { component: More, colorAttribute: 'stroke' },
+    MoreHori: { component: MoreHori, colorAttribute: 'stroke' },
+    Notification: { component: Notification, colorAttribute: 'stroke' },
+    Payment: { component: Payment, colorAttribute: 'stroke' },
+    Profile: { component: Profile, colorAttribute: 'stroke' },
+    Reload: { component: Reload, colorAttribute: 'stroke' },
+    Shows: { component: Shows, colorAttribute: 'stroke' },
+    Signout: { component: Signout, colorAttribute: 'stroke' },
+    SunIcon: { component: SunIcon, colorAttribute: 'stroke' },
+    WarningIcon: { component: WarningIcon, defaultSize: '16', colorAttribute: 'fill' },
+};
+const allIcons = {
+    ...outlineIcons,
+    ...solidIcons,
+    ...brandIcons,
+    ...legacyIcons,
+};
+// =============================================================================
+// Test Helpers
+// =============================================================================
+function testIcon(name, config) {
+    const { component: IconComponent, defaultSize = '24', colorAttribute = 'stroke' } = config;
+    describe(name, () => {
+        it('renders an SVG element', () => {
+            const { container } = render(IconComponent);
+            const svg = container.querySelector('svg');
+            expect(svg).toBeInTheDocument();
+        });
+        it(`has default size of ${defaultSize}`, () => {
+            const { container } = render(IconComponent);
+            const svg = container.querySelector('svg');
+            expect(svg).toHaveAttribute('width', defaultSize);
+            expect(svg).toHaveAttribute('height', defaultSize);
+        });
+        it('accepts custom size prop', () => {
+            const { container } = render(IconComponent, {
+                props: { size: '48' },
+            });
+            const svg = container.querySelector('svg');
+            expect(svg).toHaveAttribute('width', '48');
+            expect(svg).toHaveAttribute('height', '48');
+        });
+        it('accepts custom class prop', () => {
+            const { container } = render(IconComponent, {
+                props: { class: 'my-custom-class' },
+            });
+            const svg = container.querySelector('svg');
+            expect(svg).toHaveClass('my-custom-class');
+        });
+        it('has aria-hidden="true" for accessibility', () => {
+            const { container } = render(IconComponent);
+            const svg = container.querySelector('svg');
+            expect(svg).toHaveAttribute('aria-hidden', 'true');
+        });
+        it('has a viewBox attribute', () => {
+            const { container } = render(IconComponent);
+            const svg = container.querySelector('svg');
+            expect(svg).toHaveAttribute('viewBox');
+        });
+        it('uses currentColor as default color', () => {
+            const { container } = render(IconComponent);
+            if (colorAttribute === 'stroke' || colorAttribute === 'both') {
+                const strokeElements = container.querySelectorAll('[stroke]');
+                const hasCurrentColorStroke = Array.from(strokeElements).some((el) => el.getAttribute('stroke') === 'currentColor');
+                if (strokeElements.length > 0) {
+                    expect(hasCurrentColorStroke).toBe(true);
+                }
+            }
+            if (colorAttribute === 'fill' || colorAttribute === 'both') {
+                const fillElements = container.querySelectorAll('[fill]:not([fill="none"])');
+                const hasCurrentColorFill = Array.from(fillElements).some((el) => el.getAttribute('fill') === 'currentColor');
+                if (fillElements.length > 0) {
+                    expect(hasCurrentColorFill).toBe(true);
+                }
+            }
+        });
+        it('accepts custom color prop', () => {
+            const { container } = render(IconComponent, {
+                props: { color: '#ff0000' },
+            });
+            if (colorAttribute === 'stroke' || colorAttribute === 'both') {
+                const strokeElements = container.querySelectorAll('[stroke]');
+                const hasCustomStroke = Array.from(strokeElements).some((el) => el.getAttribute('stroke') === '#ff0000');
+                if (strokeElements.length > 0) {
+                    expect(hasCustomStroke).toBe(true);
+                }
+            }
+            if (colorAttribute === 'fill' || colorAttribute === 'both') {
+                const fillElements = container.querySelectorAll('[fill]:not([fill="none"])');
+                const hasCustomFill = Array.from(fillElements).some((el) => el.getAttribute('fill') === '#ff0000');
+                if (fillElements.length > 0) {
+                    expect(hasCustomFill).toBe(true);
+                }
+            }
+        });
+    });
+}
+// =============================================================================
+// Test Suites
+// =============================================================================
+describe('Icon Components', () => {
+    describe('Outline Icons', () => {
+        Object.entries(outlineIcons).forEach(([name, config]) => {
+            testIcon(name, config);
+        });
+    });
+    describe('Solid Icons', () => {
+        Object.entries(solidIcons).forEach(([name, config]) => {
+            testIcon(name, config);
+        });
+    });
+    describe('Brand Icons', () => {
+        Object.entries(brandIcons).forEach(([name, config]) => {
+            testIcon(name, config);
+        });
+    });
+    describe('Legacy Icons', () => {
+        Object.entries(legacyIcons).forEach(([name, config]) => {
+            testIcon(name, config);
+        });
+    });
+    // =============================================================================
+    // API Consistency Tests
+    // =============================================================================
+    describe('API Consistency', () => {
+        it('all icons have the same prop interface', () => {
+            // This test verifies that all icons accept the standard props
+            // by attempting to render each with all standard props
+            const testProps = {
+                size: '32',
+                color: 'blue',
+                class: 'test-class',
+            };
+            Object.entries(allIcons).forEach(([name, { component }]) => {
+                const { container } = render(component, { props: testProps });
+                const svg = container.querySelector('svg');
+                expect(svg, `${name} should render an SVG`).toBeInTheDocument();
+                expect(svg, `${name} should accept size prop`).toHaveAttribute('width', '32');
+                expect(svg, `${name} should accept class prop`).toHaveClass('test-class');
+            });
+        });
+        it('all icons count matches expected', () => {
+            const totalIcons = Object.keys(allIcons).length;
+            // 20 outline + 2 solid + 5 brand + 26 legacy = 53
+            // Note: CheckCircleOutline appears in both outline and legacy, so actual unique count may differ
+            expect(totalIcons).toBeGreaterThanOrEqual(50);
+        });
+    });
+    // =============================================================================
+    // Accessibility Tests
+    // =============================================================================
+    describe('Accessibility', () => {
+        it('all icons have aria-hidden="true"', () => {
+            Object.entries(allIcons).forEach(([name, { component }]) => {
+                const { container } = render(component);
+                const svg = container.querySelector('svg');
+                expect(svg, `${name} should have aria-hidden`).toHaveAttribute('aria-hidden', 'true');
+            });
+        });
+        it('all icons have viewBox for proper scaling', () => {
+            Object.entries(allIcons).forEach(([name, { component }]) => {
+                const { container } = render(component);
+                const svg = container.querySelector('svg');
+                expect(svg, `${name} should have viewBox`).toHaveAttribute('viewBox');
+            });
+        });
+    });
+});

package/dist/primitives/Icons/ImageOutline.svelte

@@ -1,14 +1,16 @@
 <script>
-  let { class: className = 'w-5 h-5', ...restProps } = $props();
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
 </script>
 
 <svg
   class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
   fill="none"
-  stroke="currentColor"
+  stroke={color}
   viewBox="0 0 24 24"
   xmlns="http://www.w3.org/2000/svg"
-  {...restProps}
 >
   <path
     stroke-linecap="round"

package/dist/primitives/Icons/ImageOutline.svelte.d.ts

@@ -4,9 +4,13 @@ type ImageOutline = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ImageOutline: import("svelte").Component<{
+    size?: string;
+    color?: string;
     class?: string;
-} & Record<string, any>, {}, "">;
+}, {}, "">;
 type $$ComponentProps = {
+    size?: string;
+    color?: string;
     class?: string;
-} & Record<string, any>;
+};
 //# sourceMappingURL=ImageOutline.svelte.d.ts.map

package/dist/primitives/Icons/ImageOutline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/ImageOutline.svelte.js"],"names":[],"mappings":";;;;;AAaA;YAT6B,MAAM;iCASwB;wBATxC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"ImageOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/ImageOutline.svelte.js"],"names":[],"mappings":";;;;;AAaA;WAT4B,MAAM;YAAU,MAAM;YAAU,MAAM;WASP;wBATxC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/primitives/Icons/Info.svelte

@@ -1,9 +1,10 @@
 <script>
-  let { size = "20", color = "currentColor" } = $props();
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
 </script>
 
 <svg
-  {size}
+  class={className}
+  aria-hidden="true"
   width={size}
   height={size}
   viewBox="0 0 18 18"

package/dist/primitives/Icons/Info.svelte.d.ts

@@ -6,9 +6,11 @@ type Info = {
 declare const Info: import("svelte").Component<{
     size?: string;
     color?: string;
+    class?: string;
 }, {}, "">;
 type $$ComponentProps = {
     size?: string;
     color?: string;
+    class?: string;
 };
 //# sourceMappingURL=Info.svelte.d.ts.map

package/dist/primitives/Icons/Info.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Info.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Info.svelte.js"],"names":[],"mappings":";;;;;AAaA;WAT4B,MAAM;YAAU,MAAM;WASC;wBAThC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"Info.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Info.svelte.js"],"names":[],"mappings":";;;;;AAaA;WAT4B,MAAM;YAAU,MAAM;YAAU,MAAM;WASf;wBAThC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE"}