@props(['microapp', 'size' => 'md'])
@php
    // Clases completas para que Tailwind las incluya al compilar.
    $colors = [
        'indigo' => 'bg-indigo-50 text-indigo-600 ring-indigo-100',
        'emerald' => 'bg-emerald-50 text-emerald-600 ring-emerald-100',
        'amber' => 'bg-amber-50 text-amber-600 ring-amber-100',
        'sky' => 'bg-sky-50 text-sky-600 ring-sky-100',
        'rose' => 'bg-rose-50 text-rose-600 ring-rose-100',
        'violet' => 'bg-violet-50 text-violet-600 ring-violet-100',
        'slate' => 'bg-slate-100 text-slate-600 ring-slate-200',
    ];
    $sizes = ['sm' => ['size-9 rounded-lg', 'size-5'], 'md' => ['size-12 rounded-xl', 'size-6'], 'lg' => ['size-16 rounded-2xl', 'size-8']];
@endphp
<span {{ $attributes->merge(['class' => 'inline-flex shrink-0 items-center justify-center ring-1 ring-inset '.$sizes[$size][0].' '.($colors[$microapp->icon_color] ?? $colors['indigo'])]) }} aria-hidden="true">
    <x-icon :name="$microapp->icon" class="{{ $sizes[$size][1] }}" />
</span>