@aleph-alpha/ui-library 1.11.0 → 1.12.0

package/src/primitives/UiIcon/UiIcon.vue

@@ -1,14 +1,52 @@
 <script setup lang="ts">
-  import { Icon as ShadcnIcon } from '@/primitives/shadcn/icon';
+  import { computed, type Component } from 'vue';
+  import * as lucideIcons from 'lucide-vue-next';
+  import { cn } from '@/lib/utils';
   import type { UiIconProps } from './types';
 
   defineOptions({
     name: 'UiIcon',
   });
 
-  const props = defineProps<UiIconProps>();
+  const props = withDefaults(defineProps<UiIconProps>(), {
+    size: 24,
+    strokeWidth: 2,
+  });
+
+  // Type-safe lookup for Lucide icons
+  const iconLookup = lucideIcons as unknown as Record<string, Component>;
+
+  /**
+   * Convert kebab-case or lowercase to PascalCase for Lucide icon lookup.
+   * Examples: "circle-help" -> "CircleHelp", "star" -> "Star", "ChevronDown" -> "ChevronDown"
+   */
+  function toPascalCase(str: string): string {
+    // If already PascalCase (starts with uppercase, no hyphens), return as-is
+    if (!str.includes('-') && str[0] === str[0].toUpperCase()) {
+      return str;
+    }
+    return str
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join('');
+  }
+
+  const iconComponent = computed<Component | null>(() => {
+    const pascalName = toPascalCase(props.name);
+    return iconLookup[pascalName] ?? null;
+  });
 </script>
 
 <template>
-  <ShadcnIcon :icon="props.icon" :aria-label="props.ariaLabel" />
+  <component
+    :is="iconComponent"
+    v-if="iconComponent"
+    data-slot="icon"
+    :size="props.size"
+    :stroke-width="props.strokeWidth"
+    :class="cn(props.class)"
+    :role="props.ariaLabel ? 'img' : undefined"
+    :aria-label="props.ariaLabel"
+    :aria-hidden="props.ariaLabel ? undefined : 'true'"
+  />
 </template>

package/src/primitives/UiIcon/__tests__/UiIcon.test.ts

@@ -3,22 +3,51 @@ import { describe, expect, test } from 'vitest';
 import { UiIcon } from '../index';
 
 describe('UiIcon', () => {
-  test('renders a material-symbols icon class by default', () => {
+  test('renders a Lucide icon by name (kebab-case)', () => {
     const { container } = render(UiIcon, {
-      props: { icon: 'i-material-symbols-help' },
+      props: { name: 'circle-help' },
     });
 
     const el = container.querySelector('[data-slot="icon"]');
     expect(el).toBeInTheDocument();
-    expect(el).toHaveClass('i-material-symbols-help');
+    expect(el?.tagName.toLowerCase()).toBe('svg');
     expect(el).toHaveAttribute('aria-hidden', 'true');
   });
 
+  test('renders a Lucide icon by name (PascalCase)', () => {
+    const { container } = render(UiIcon, {
+      props: { name: 'CircleHelp' },
+    });
+
+    const el = container.querySelector('[data-slot="icon"]');
+    expect(el).toBeInTheDocument();
+    expect(el?.tagName.toLowerCase()).toBe('svg');
+  });
+
   test('exposes role="img" when ariaLabel is provided', () => {
     const { getByRole } = render(UiIcon, {
-      props: { icon: 'i-material-symbols-help', ariaLabel: 'Help' },
+      props: { name: 'circle-help', ariaLabel: 'Help' },
     });
 
     expect(getByRole('img', { name: 'Help' })).toBeInTheDocument();
   });
+
+  test('applies custom size', () => {
+    const { container } = render(UiIcon, {
+      props: { name: 'star', size: 32 },
+    });
+
+    const el = container.querySelector('[data-slot="icon"]');
+    expect(el).toHaveAttribute('width', '32');
+    expect(el).toHaveAttribute('height', '32');
+  });
+
+  test('does not render when icon name is invalid', () => {
+    const { container } = render(UiIcon, {
+      props: { name: 'non-existent-icon-xyz' },
+    });
+
+    const el = container.querySelector('[data-slot="icon"]');
+    expect(el).not.toBeInTheDocument();
+  });
 });

package/src/primitives/UiIcon/index.ts

@@ -1 +1,2 @@
 export { default as UiIcon } from './UiIcon.vue';
+export type { UiIconProps } from './types';

package/src/primitives/UiIcon/types.ts

@@ -1,23 +1,42 @@
+import type { HTMLAttributes } from 'vue';
+
 /**
- * An icon component using UnoCSS/Iconify icons. Use for visual indicators,
+ * An icon component using Lucide icons. Use for visual indicators,
  * button decorations, or standalone meaningful graphics.
  *
  * @category Data Display
  * @useCases visual indicator, button icon, status icon, decorative graphic
- * @keywords icon, symbol, graphic, material, iconify, svg
+ * @keywords icon, symbol, graphic, lucide, svg
  * @related UiIconButton, UiButton
  */
 export interface UiIconProps {
   /**
-   * Icon class generated by UnoCSS preset-icons / ds-icons.
+   * Lucide icon name in kebab-case or PascalCase.
+   *
+   * Example: `circle-help`, `CircleHelp`, `chevron-down`, `ChevronDown`
    *
-   * Example: `i-material-symbols-help`
+   * @see https://lucide.dev/icons for available icons
+   */
+  name: string;
+
+  /**
+   * Icon size in pixels. Defaults to 24.
    */
-  icon: string;
+  size?: number | string;
+
+  /**
+   * Stroke width. Defaults to 2.
+   */
+  strokeWidth?: number | string;
 
   /**
    * Accessible label for the icon. When provided, the icon is exposed as `role="img"`.
    * If omitted, the icon is treated as decorative (`aria-hidden="true"`).
    */
   ariaLabel?: string;
+
+  /**
+   * Additional CSS classes to apply to the icon.
+   */
+  class?: HTMLAttributes['class'];
 }

package/src/primitives/UiIconButton/UiIconButton.stories.ts

@@ -54,7 +54,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiIconButton aria-label="Next">
-    <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+    <UiIcon name="chevron-right" :size="16" />
   </UiIconButton>
 </template>`;
 
@@ -68,7 +68,7 @@ export const Default: Story = {
       return { args };
     },
     template: `<UiIconButton :variant="args.variant" :size="args.size" :disabled="args.disabled" :loading="args.loading" :aria-label="args.ariaLabel">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>`,
   }),
   parameters: {
@@ -86,7 +86,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiIconButton variant="secondary" aria-label="Next">
-    <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+    <UiIcon name="chevron-right" :size="16" />
   </UiIconButton>
 </template>`;
 
@@ -97,7 +97,7 @@ export const Secondary: Story = {
   render: () => ({
     components: { UiIconButton, UiIcon },
     template: `<UiIconButton variant="secondary" aria-label="Next">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>`,
   }),
   parameters: {
@@ -115,7 +115,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiIconButton variant="destructive" aria-label="Delete">
-    <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+    <UiIcon name="chevron-right" :size="16" />
   </UiIconButton>
 </template>`;
 
@@ -126,7 +126,7 @@ export const Destructive: Story = {
   render: () => ({
     components: { UiIconButton, UiIcon },
     template: `<UiIconButton variant="destructive" aria-label="Delete">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>`,
   }),
   parameters: {
@@ -144,7 +144,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiIconButton variant="outline" aria-label="Next">
-    <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+    <UiIcon name="chevron-right" :size="16" />
   </UiIconButton>
 </template>`;
 
@@ -155,7 +155,7 @@ export const Outline: Story = {
   render: () => ({
     components: { UiIconButton, UiIcon },
     template: `<UiIconButton variant="outline" aria-label="Next">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>`,
   }),
   parameters: {
@@ -173,7 +173,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiIconButton variant="ghost" aria-label="Next">
-    <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+    <UiIcon name="chevron-right" :size="16" />
   </UiIconButton>
 </template>`;
 
@@ -184,7 +184,7 @@ export const Ghost: Story = {
   render: () => ({
     components: { UiIconButton, UiIcon },
     template: `<UiIconButton variant="ghost" aria-label="Next">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>`,
   }),
   parameters: {
@@ -202,7 +202,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiIconButton variant="link" aria-label="Next">
-    <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+    <UiIcon name="chevron-right" :size="16" />
   </UiIconButton>
 </template>`;
 
@@ -213,7 +213,7 @@ export const Link: Story = {
   render: () => ({
     components: { UiIconButton, UiIcon },
     template: `<UiIconButton variant="link" aria-label="Next">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>`,
   }),
   parameters: {
@@ -231,7 +231,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiIconButton :loading="true" aria-label="Loading">
-    <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+    <UiIcon name="chevron-right" :size="16" />
   </UiIconButton>
 </template>`;
 
@@ -242,7 +242,7 @@ export const Loading: Story = {
   render: () => ({
     components: { UiIconButton, UiIcon },
     template: `<UiIconButton :loading="true" aria-label="Loading">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>`,
   }),
   parameters: {
@@ -260,7 +260,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiIconButton :disabled="true" aria-label="Disabled">
-    <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+    <UiIcon name="chevron-right" :size="16" />
   </UiIconButton>
 </template>`;
 
@@ -271,7 +271,7 @@ export const Disabled: Story = {
   render: () => ({
     components: { UiIconButton, UiIcon },
     template: `<UiIconButton :disabled="true" aria-label="Disabled">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>`,
   }),
   parameters: {
@@ -290,22 +290,22 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 <template>
   <div class="flex flex-wrap items-center gap-4">
     <UiIconButton variant="default" aria-label="Default">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>
     <UiIconButton variant="secondary" aria-label="Secondary">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>
     <UiIconButton variant="destructive" aria-label="Destructive">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>
     <UiIconButton variant="outline" aria-label="Outline">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>
     <UiIconButton variant="ghost" aria-label="Ghost">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>
     <UiIconButton variant="link" aria-label="Link">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </UiIconButton>
   </div>
 </template>`;
@@ -318,22 +318,22 @@ export const AllVariants: Story = {
     components: { UiIconButton, UiIcon },
     template: `<div class="flex flex-wrap items-center gap-4">
       <UiIconButton variant="default" aria-label="Default">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </UiIconButton>
       <UiIconButton variant="secondary" aria-label="Secondary">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </UiIconButton>
       <UiIconButton variant="destructive" aria-label="Destructive">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </UiIconButton>
       <UiIconButton variant="outline" aria-label="Outline">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </UiIconButton>
       <UiIconButton variant="ghost" aria-label="Ghost">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </UiIconButton>
       <UiIconButton variant="link" aria-label="Link">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </UiIconButton>
     </div>`,
   }),
@@ -355,19 +355,19 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
     <div class="flex flex-col items-center gap-2">
       <span class="text-muted-foreground text-xs">icon-sm</span>
       <UiIconButton size="icon-sm" variant="outline" aria-label="Small Icon">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </UiIconButton>
     </div>
     <div class="flex flex-col items-center gap-2">
       <span class="text-muted-foreground text-xs">icon</span>
       <UiIconButton size="icon" variant="outline" aria-label="Default Icon">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </UiIconButton>
     </div>
     <div class="flex flex-col items-center gap-2">
       <span class="text-muted-foreground text-xs">icon-lg</span>
       <UiIconButton size="icon-lg" variant="outline" aria-label="Large Icon">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-5" />
+        <UiIcon name="chevron-right" :size="20" />
       </UiIconButton>
     </div>
   </div>
@@ -383,19 +383,19 @@ export const AllSizes: Story = {
       <div class="flex flex-col items-center gap-2">
         <span class="text-muted-foreground text-xs">icon-sm</span>
         <UiIconButton size="icon-sm" variant="outline" aria-label="Small Icon">
-          <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+          <UiIcon name="chevron-right" :size="16" />
         </UiIconButton>
       </div>
       <div class="flex flex-col items-center gap-2">
         <span class="text-muted-foreground text-xs">icon</span>
         <UiIconButton size="icon" variant="outline" aria-label="Default Icon">
-          <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+          <UiIcon name="chevron-right" :size="16" />
         </UiIconButton>
       </div>
       <div class="flex flex-col items-center gap-2">
         <span class="text-muted-foreground text-xs">icon-lg</span>
         <UiIconButton size="icon-lg" variant="outline" aria-label="Large Icon">
-          <UiIcon icon="i-material-symbols-chevron-right" class="size-5" />
+          <UiIcon name="chevron-right" :size="20" />
         </UiIconButton>
       </div>
     </div>`,
@@ -416,7 +416,7 @@ import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 <template>
   <UiIconButton :as-child="true" aria-label="Navigate">
     <a href="#">
-      <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+      <UiIcon name="chevron-right" :size="16" />
     </a>
   </UiIconButton>
 </template>`;
@@ -432,7 +432,7 @@ export const AsChild: Story = {
     components: { UiIconButton, UiIcon },
     template: `<UiIconButton :as-child="true" aria-label="Navigate">
       <a href="#">
-        <UiIcon icon="i-material-symbols-chevron-right" class="size-4" />
+        <UiIcon name="chevron-right" :size="16" />
       </a>
     </UiIconButton>`,
   }),