K
KoreUI

Icon

UI

Componente para renderizar iconos Lucide con tamaños predefinidos, colores semánticos, animaciones y accesibilidad automática.

Uso básico

<x-kore::icon name="search" />
<x-kore::icon name="home" />
<x-kore::icon name="settings" />
<x-kore::icon name="search" />
<x-kore::icon name="home" />
<x-kore::icon name="settings" />

Tamaños

Seis tamaños: xs (12px), sm (14px), md (16px), lg (20px), xl (24px), 2xl (32px).

<x-kore::icon name="star" size="xs" />
<x-kore::icon name="star" size="sm" />
<x-kore::icon name="star" size="md" />
<x-kore::icon name="star" size="lg" />
<x-kore::icon name="star" size="xl" />
<x-kore::icon name="star" size="2xl" />
<x-kore::icon name="star" size="xs" />
<x-kore::icon name="star" size="sm" />
<x-kore::icon name="star" size="md" />
<x-kore::icon name="star" size="lg" />
<x-kore::icon name="star" size="xl" />
<x-kore::icon name="star" size="2xl" />

Colores

Colores semánticos. Sin color, hereda currentColor del padre.

<x-kore::icon name="check-circle" color="success" />
<x-kore::icon name="alert-triangle" color="warning" />
<x-kore::icon name="x-circle" color="destructive" />
<x-kore::icon name="info" color="info" />
<x-kore::icon name="circle" color="primary" />
<x-kore::icon name="minus-circle" color="muted" />
<x-kore::icon name="check-circle" color="success" />
<x-kore::icon name="alert-triangle" color="warning" />
<x-kore::icon name="x-circle" color="destructive" />
<x-kore::icon name="info" color="info" />
<x-kore::icon name="circle" color="primary" />
<x-kore::icon name="minus-circle" color="muted" />

Animaciones

Cuatro animaciones disponibles: spin, pulse, bounce, ping.

<x-kore::icon name="loader-2" animation="spin" />
<x-kore::icon name="bell" animation="pulse" />
<x-kore::icon name="arrow-down" animation="bounce" />
<x-kore::icon name="circle" animation="ping" />
<x-kore::icon name="loader-2" animation="spin" />
<x-kore::icon name="bell" animation="pulse" />
<x-kore::icon name="arrow-down" animation="bounce" />
<x-kore::icon name="circle" animation="ping" />

Con etiqueta

Envuelve el icono en un span con flexbox cuando se usa label.

Guardar Regresar 
<x-kore::icon name="save" label="Guardar" />
<x-kore::icon name="arrow-left" label="Regresar" labelPosition="left" />
<x-kore::icon name="save" label="Guardar" />
<x-kore::icon name="arrow-left" label="Regresar" labelPosition="left" />

Stroke width

Controla el grosor del trazo del icono.

<x-kore::icon name="heart" :strokeWidth="1" size="xl" />
<x-kore::icon name="heart" size="xl" />
<x-kore::icon name="heart" :strokeWidth="2.5" size="xl" />
<x-kore::icon name="heart" :strokeWidth="1" size="xl" />
<x-kore::icon name="heart" size="xl" />
<x-kore::icon name="heart" :strokeWidth="2.5" size="xl" />

Error

Atajo para color destructive, útil en formularios.

<x-kore::icon name="alert-circle" error />
<x-kore::icon name="alert-circle" error />

Proveedor raw

Usa raw para otros proveedores blade-icons sin prefijar con Lucide.

{{-- Lucide (default) --}}
<x-kore::icon name="search" />

{{-- Otro proveedor (raw = sin prefijar) --}}
<x-kore::icon name="heroicon-o-home" raw />
{{-- Lucide (default) --}}
<x-kore::icon name="search" />

{{-- Otro proveedor (raw = sin prefijar) --}}
<x-kore::icon name="heroicon-o-home" raw />

Props

Prop Tipo Default Descripción
name string (requerido) Nombre del icono Lucide
size string md Tamaño: xs, sm, md, lg, xl, 2xl
color string|null null Color: primary, secondary, success, warning, destructive, info, muted
animation string|null null Animación: spin, pulse, bounce, ping
error bool false Atajo para color=destructive
label string|null null Texto junto al icono
labelPosition string right Posición del label: left, right
strokeWidth float|null null Override del stroke-width SVG (Lucide default: 2)
raw bool false Usa name como componente completo sin prefijar

Configuración

Puedes personalizar los defaults en config/kore-ui.php.

config/kore-ui.php 
// config/kore-ui.php
'ui' => [
    'icon' => [
        'prefix' => 'lucide',
        'size' => null,   // null = usa ui.size (md)
    ],
],
// config/kore-ui.php
'ui' => [
    'icon' => [
        'prefix' => 'lucide',
        'size' => null,   // null = usa ui.size (md)
    ],
],