laif-ds/dist/agent-docs/components/Icon.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # Icon
 
 ## Overview
 
 Wrapper around `lucide-react` icons with design-system sizes and convenient color/className support.
 
 ---
 
 ## Props
 
 | Prop        | Type                                        | Default   | Description                                     |
 | ----------- | ------------------------------------------- | --------- | ----------------------------------------------- |
 | `name`      | `IconName` (key of `lucide-react` exports)  | **required** | Icon name from `lucide-react`.               |
 | `size`      | `"xs" | "sm" | "md" | "lg" | "xl"`     | `"md"`   | Predefined pixel sizes: 16, 20, 24, 32, 40.     |
 | `className` | `string`                                    | `""`      | Additional classes (e.g., color via theme tokens). |
 | `color`     | `string`                                    | `undefined` | Overrides color style directly.                 |
 
 Any extra props are passed to the underlying `lucide-react` icon component.
 
 ---
 
 ## Behavior
 
 - **Sizing**: The `size` prop maps to pixel sizes (`xs=16`, `sm=20`, `md=24`, `lg=32`, `xl=40`).
 - **Coloring**: Prefer theme tokens via `className` (e.g., `text-d-destructive`). For one-off colors, use `color`.
 - **Safety**: If `name` is not found, the component renders `null` and logs a warning.
 
 ---
 
 ## Examples
 
 ### Default
 
 ```tsx
 import { Icon } from "laif-ds";
 
 export function DefaultIcon() {
   return <Icon name="Check" size="md" />;
 }
 ```
 
 ### Sizes
 
 ```tsx
 import { Icon } from "laif-ds";
 
 export function IconSizes() {
   return (
     <div className="flex items-end gap-4">
       <div className="flex flex-col items-center gap-2">
         <Icon name="Check" size="xs" />
         <span className="text-xs">xs</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <Icon name="Check" size="sm" />
         <span className="text-xs">sm</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <Icon name="Check" size="md" />
         <span className="text-xs">md</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <Icon name="Check" size="lg" />
         <span className="text-xs">lg</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <Icon name="Check" size="xl" />
         <span className="text-xs">xl</span>
       </div>
     </div>
   );
 }
 ```
 
 ### Colors
 
 ```tsx
 import { Icon } from "laif-ds";
 
 export function IconColors() {
   return (
     <div className="flex gap-4">
       <Icon name="Heart" size="lg" className="text-d-destructive" />
       <Icon name="Heart" size="lg" className="text-d-primary" />
       <Icon name="Heart" size="lg" className="text-d-muted-foreground" />
       <Icon name="Heart" size="lg" color="#8B5CF6" />
       <Icon name="Heart" size="lg" color="#EC4899" />
     </div>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Design tokens**: Use theme token classes (`text-d-*`) rather than raw Tailwind colors.
 - **Icon library**: Use only `laif-ds` `Icon` (no external icon libraries).