🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.

resources/views/flux/navmenu/item.blade.php

@@ -0,0 +1,77 @@
+@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+    'iconVariant' => 'mini',
+    'iconTrailing' => null,
+    'variant' => 'default',
+    'disabled' => false,
+    'indent' => false,
+    'suffix' => null,
+    'value' => null,
+    'icon' => null,
+    'kbd' => null,
+])
+
+@php
+if ($kbd) $suffix = $kbd;
+
+$iconClasses = Flux::classes()
+    ->add('me-2')
+    // When using the outline icon variant, we need to size it down to match the default icon sizes...
+    ->add($iconVariant === 'outline' ? 'size-5' : null)
+    ;
+
+$trailingIconClasses = Flux::classes()
+    ->add('ms-auto')
+    // When using the outline icon variant, we need to size it down to match the default icon sizes...
+    ->add($iconVariant === 'outline' ? 'size-5' : null)
+    ;
+
+$classes = Flux::classes()
+    ->add('group flex items-center px-2 py-2 lg:py-1.5 w-full')
+    ->add('rounded-md')
+    ->add('text-start text-sm font-medium')
+    ->add(match ($variant) {
+        'danger' => [
+            'text-zinc-800 hover:text-red-600 hover:bg-red-50 dark:text-white dark:hover:bg-red-400/20 dark:hover:text-red-400',
+            '**:data-navmenu-icon:text-zinc-400 dark:**:data-navmenu-icon:text-white/60 [&:hover_[data-navmenu-icon]]:text-current',
+        ],
+        'default' => [
+            'text-zinc-800 hover:bg-zinc-50 dark:text-white dark:hover:bg-zinc-600',
+            '**:data-navmenu-icon:text-zinc-400 dark:**:data-navmenu-icon:text-white/60 [&:hover_[data-navmenu-icon]]:text-current',
+        ]
+    })
+    ->add($disabled ? 'text-zinc-400' : '')
+    ;
+@endphp
+
+<flux:button-or-link :attributes="$attributes->class($classes)" data-flux-navmenu-item>
+    <?php if ($indent): ?>
+        <div class="w-7"></div>
+    <?php endif; ?>
+
+    <?php if (is_string($icon) && $icon !== ''): ?>
+        <flux:icon :$icon :variant="$iconVariant" :class="$iconClasses" data-navmenu-icon />
+    <?php elseif ($icon): ?>
+        {{ $icon }}
+    <?php endif; ?>
+
+    {{ $slot }}
+
+    <?php if ($suffix): ?>
+        <?php if (is_string($suffix)): ?>
+            <div class="ms-auto opacity-50 text-xs">
+                {{ $suffix }}
+            </div>
+        <?php else: ?>
+            {{ $suffix }}
+        <?php endif; ?>
+    <?php endif; ?>
+
+    <?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
+        <flux:icon :icon="$iconTrailing" :variant="$iconVariant" :class="$trailingIconClasses" />
+    <?php elseif ($iconTrailing): ?>
+        {{ $iconTrailing }}
+    <?php endif; ?>
+</flux:button-or-link>