可重复使用的NAV链接与Laravel Blade中的图标组件

Question

我正在使用Laravel，Alpinejs和Tailwind CSS进行管理界面，目前正在构建可以具有许多链接的侧边栏，每个链接都具有图标。我创建了一个常规X-Sidebar-link组件和每个图标的独特组件，但是我并不真正喜欢这种方法，因为我无法真正在其他地方使用这些图标组件。

是否有更好的方法来确保图标组件的可重复使用性？如果需要的话，也希望能够通过活动状态上课。

X-Sidebar-link组件：

@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>

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>

我使用的方式如下：

<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>