Reusable nav link with icon component in Laravel Blade

Question

I'm working on an admin interface using Laravel, AlpineJS and Tailwind CSS and I'm currently building the sidebar which can have many links, each link having an icon. I created a general x-sidebar-link component and a distinct component for each icon, but I'm not really fond of the approach because I can't really use those icon components elsewhere.

Is there a better way to build this in order to ensure reusability of the icon component? Like to be able to pass in classes for the active state as well, if needed.

The x-sidebar-link component:

@props(['active'])

@php
    $classes = ($active ?? false)
                ? 'bg-gray-100 text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md'
                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md';
@endphp

<a {{ $attributes->merge(['href' => '#', 'class' => $classes]) }}>
    {{ $slot }}
</a>

The x-icons.dashboard component:

@aware(['active' => false])

@php
    $classes = ($active ?? false)
               ? 'text-gray-500 mr-3 flex-shrink-0 h-6 w-6'
               : 'text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6';
@endphp

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
     aria-hidden="true" {{ $attributes->merge(['class' => $classes]) }}>
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>

The way I'm using these is as following:

<nav>
    <x-sidebar-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
        <x-icons.dashboard />
        Dashboard
    </x-sidebar-link>

    <x-sidebar-link :href="route('profile')" :active="request()->routeIs('profile')">
        <x-icons.profile />
        Profile
    </x-sidebar-link>
    ...
</nav>