@props([
    'src',
    'size' => 'h-6 w-6',
    'fallbackIcon' => null,
    'fallbackSize' => 'h-full w-full',
])

<span class="relative inline-flex {{ $size }}" aria-hidden="true" {{ $attributes }}>
    @if ($fallbackIcon)
        <span data-lottie-fallback class="absolute inset-0 flex items-center justify-center">
            <x-icon :name="$fallbackIcon" class="{{ $fallbackSize }}"/>
        </span>
    @endif

    <canvas data-lottie-src="{{ $src }}" class="h-full w-full"></canvas>
</span>