composer require mallardduck/blade-lucide-icons

php artisan view:clear

<x-lucide-activity />
<x-lucide-heart />
<x-lucide-shopping-cart />
<x-lucide-circle-check />

<!-- Size and color -->
<x-lucide-album class="w-6 h-6 text-gray-500"/>

<!-- Responsive sizing -->
<x-lucide-heart class="w-4 h-4 md:w-6 md:h-6 text-red-500"/>

<!-- Hover effects -->
<x-lucide-star class="w-5 h-5 text-yellow-400 hover:text-yellow-500 cursor-pointer"/>

<!-- Transitions -->
<x-lucide-bell class="w-6 h-6 text-gray-700 hover:text-gray-900 transition-colors duration-200"/>

<x-lucide-anchor style="color: #555"/>
<x-lucide-heart style="color: #ff0000; width: 48px; height: 48px;"/>
<x-lucide-activity style="color: var(--primary-color); stroke-width: 1.5;"/>

<nav>
    <div class="flex items-center gap-6">
        <a href="/dashboard" class="flex items-center gap-2">
            <x-lucide-layout-dashboard class="w-5 h-5"/>
            <span>Dashboard</span>
        </a>
        <a href="/products" class="flex items-center gap-2">
            <x-lucide-package class="w-5 h-5"/>
            <span>Products</span>
        </a>
        <a href="/settings" class="flex items-center gap-2">
            <x-lucide-settings class="w-5 h-5"/>
            <span>Settings</span>
        </a>
    </div>
</nav>

<div class="relative">
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <x-lucide-search class="w-5 h-5 text-gray-400"/>
    </div>
    <input type="text" class="pl-10 w-full border rounded-lg" placeholder="Search..."/>
</div>

<!-- Success -->
<div class="flex items-start gap-3 p-4 bg-green-50 border-l-4 border-green-500 rounded">
    <x-lucide-check-circle class="w-6 h-6 text-green-600 flex-shrink-0"/>
    <div>
        <h4 class="font-semibold text-green-800">Success!</h4>
        <p class="text-green-700">Your changes have been saved.</p>
    </div>
</div>

<!-- Error -->
<div class="flex items-start gap-3 p-4 bg-red-50 border-l-4 border-red-500 rounded">
    <x-lucide-alert-circle class="w-6 h-6 text-red-600 flex-shrink-0"/>
    <div>
        <h4 class="font-semibold text-red-800">Error</h4>
        <p class="text-red-700">Something went wrong.</p>
    </div>
</div>

<!-- Info -->
<div class="flex items-start gap-3 p-4 bg-blue-50 border-l-4 border-blue-500 rounded">
    <x-lucide-info class="w-6 h-6 text-blue-600 flex-shrink-0"/>
    <p class="text-blue-700">Please review your changes before submitting.</p>
</div>

<!-- Icon-only button with aria-label -->
<button class="p-2 hover:bg-gray-100 rounded" aria-label="Delete">
    <x-lucide-trash class="w-5 h-5 text-red-600"/>
</button>

<!-- Button with icon and text -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
    <x-lucide-save class="w-5 h-5"/>
    <span>Save</span>
</button>

<!-- Primary action -->
<button class="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg">
    <x-lucide-plus class="w-5 h-5"/>
    <span>Add New</span>
</button>

<!-- Loading states -->
<button wire:click="refresh" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg">
    <x-lucide-refresh-cw class="w-5 h-5" wire:loading.class="animate-spin"/>
    <span wire:loading.remove>Refresh Data</span>
    <span wire:loading>Loading...</span>
</button>

<!-- Toggle icon based on state -->
<div class="flex items-center gap-2">
    @if($isFavorited)
        <x-lucide-heart class="w-5 h-5 text-red-500 fill-current" wire:click="unfavorite"/>
    @else
        <x-lucide-heart class="w-5 h-5 text-gray-400" wire:click="favorite"/>
    @endif
</div>

@php
    $iconName = 'heart';
    $iconComponent = 'lucide-' . $iconName;
@endphp

<x-dynamic-component :component="$iconComponent" class="w-6 h-6" />

<x-dynamic-component
    :component="'lucide-' . $menu->icon"
    class="w-5 h-5"
/>

<x-lucide-trash />        <!-- Delete -->
<x-lucide-edit />         <!-- Edit -->
<x-lucide-download />     <!-- Download -->
<x-lucide-upload />       <!-- Upload -->
<x-lucide-copy />         <!-- Copy -->
<x-lucide-share />        <!-- Share -->
<x-lucide-settings />     <!-- Settings -->
<x-lucide-user />         <!-- User/Profile -->
<x-lucide-home />         <!-- Home -->

<!-- Primary actions -->
<x-lucide-save class="w-5 h-5 text-blue-600"/>

<!-- Success states -->
<x-lucide-check class="w-5 h-5 text-green-600"/>
<x-lucide-check-circle class="w-5 h-5 text-green-600"/>

<!-- Danger/warning -->
<x-lucide-trash class="w-5 h-5 text-red-600"/>
<x-lucide-alert-triangle class="w-5 h-5 text-yellow-600"/>

<!-- Neutral/secondary -->
<x-lucide-info class="w-5 h-5 text-gray-600"/>

<!-- Icon-only button - always include aria-label -->
<button aria-label="Close dialog">
    <x-lucide-x class="w-6 h-6"/>
</button>

<!-- Decorative icon - hide from screen readers -->
<x-lucide-star class="w-5 h-5" aria-hidden="true"/>

<!-- Icon with visible text - accessible by default -->
<button class="flex items-center gap-2">
    <x-lucide-download class="w-5 h-5"/>
    <span>Download</span>
</button>

php artisan view:clear

php artisan vendor:publish --tag=blade-lucide-icons --force