--- name: lucide-laravel description: Lucide icon library integration for Laravel Blade templates. Use when working with Lucide icons in Laravel applications, Blade components with the x-lucide- prefix, icon styling with Tailwind CSS, dynamic icon rendering in Blade, or any Laravel view work requiring SVG icons. Keywords include lucide icons, blade icons, x-lucide, SVG icons Laravel, blade-lucide-icons, mallardduck/blade-lucide-icons. --- # Lucide Laravel Laravel Blade integration for the [Lucide](https://lucide.dev) icon library - 1,666+ beautiful, consistent SVG icons. ## Installation ```bash composer require mallardduck/blade-lucide-icons ``` Clear view cache if icons don't appear: ```bash php artisan view:clear ``` ## Quick Start ### Basic Usage Icons use the `x-lucide-` prefix with kebab-case naming: ```blade ``` ### Naming Convention Convert PascalCase icon names to kebab-case: | Icon Name | Blade Component | |-----------|----------------| | Activity | `` | | ShoppingCart | `` | | CircleCheck | `` | | ArrowRight | `` | ## Styling ### Tailwind CSS ```blade ``` ### Inline Styles ```blade ``` ## Common Patterns ### Navigation Menus ```blade ``` ### Form Inputs ```blade
``` ### Alerts ```blade

Success!

Your changes have been saved.

Error

Something went wrong.

Please review your changes before submitting.

``` ### Action Buttons ```blade ``` ### With Livewire ```blade
@if($isFavorited) @else @endif
``` ## Dynamic Icons Use `` for dynamic icon names: ```blade @php $iconName = 'heart'; $iconComponent = 'lucide-' . $iconName; @endphp ``` Common use case - icon from database: ```blade ``` ## Best Practices ### Consistent Sizing | Context | Size | |---------|------| | Navigation | `w-5 h-5` | | Button (small) | `w-4 h-4` | | Button (medium) | `w-5 h-5` | | Feature icons | `w-12 h-12` | | Hero icons | `w-16 h-16` | ### Semantic Icon Usage Choose icons that clearly represent their action: ```blade ``` ### Color Semantics ```blade ``` ### Accessibility ```blade