Getting Started

Install via Composer:

composer require mallardduck/blade-lucide-icons --update

First Use Case: Replace a generic icon in your Blade view with the latest Lucide icons (now v1.23.0):

<!-- Before -->
<i class="fa fa-user"></i>

<!-- After (using new icons) -->
<x-lucide-user />
<!-- Or try one of the 7 new icons, e.g., -->
<x-lucide-activity />

Key Starting Points:

Icon Explorer: Preview all available icons (now including 7 new additions in v1.23.0) at lucide.dev. Use kebab-case names (e.g., lucide-user → <x-lucide-user />).

Caching: Enable Blade Icons caching for performance:

php artisan vendor:publish --provider="BladeUI\Icons\BladeIconsServiceProvider" --tag="blade-icons-config"

Then configure cache: true in config/blade-icons.php.

Implementation Patterns

1. Component-Based Usage

Pattern: Use Lucide icons (now v1.23.0) as Blade components with dynamic attributes:

<!-- Basic usage -->
<x-lucide-home class="text-blue-500 w-6 h-6" />

<!-- Using new icons (v1.23.0) -->
<x-lucide-activity class="text-purple-500 w-5 h-5" />

Workflow:

Icon Selection: Use lucide.dev to find the perfect icon, including the 7 new additions (e.g., lucide-activity → <x-lucide-activity />).
Styling: Pass Tailwind/utility classes directly (e.g., text-gray-400 hover:text-gray-600).
Dynamic Sizing: Use w-* h-* classes (e.g., w-5 h-5 for compact icons).

2. Reusable Icon Components

Pattern: Create custom Blade components to encapsulate icons with logic:

<!-- resources/views/components/StatusIcon.blade.php -->
<x-lucide-{{ $status === 'active' ? 'check-circle' : 'x-circle' }}
    class="text-{{ $status === 'active' ? 'green-500' : 'red-500' }} w-4 h-4" />

Use Case: Standardize icons across your app (e.g., status indicators, buttons). Leverage the new icons from v1.23.0 for fresh designs, such as <x-lucide-activity /> for activity-related features.

3. Raw SVG Integration

Pattern: Publish and use SVG assets for non-Blade contexts (e.g., JavaScript, CSS):

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

<!-- In a non-Blade template (e.g., email) -->
<img src="{{ asset('vendor/blade-lucide-icons/activity.svg') }}" alt="Activity" width="24" height="24" />

Tip: Useful for emails, PDFs, or when Blade components aren’t available. Ensure you’re using the updated SVGs from v1.23.0, including the new icons like activity.svg.

4. Configuration Customization

Pattern: Publish the config file to set defaults:

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

// config/blade-lucide-icons.php
return [
    'default_class' => 'w-5 h-5 text-gray-500',
    'cache' => env('ICON_CACHE_ENABLED', true),
];

Result: All icons inherit w-5 h-5 text-gray-500 unless overridden. Ensure your config aligns with the latest package version (1.26.27).

5. Dynamic Icon Loading

Pattern: Load icons dynamically based on data (e.g., from a database):

@foreach($items as $item)
    <x-lucide-{{ $item->icon }} class="w-4 h-4 mr-2" />
    {{ $item->name }}
@endforeach

Tip: Store icon names as strings in your database (e.g., "user", "activity"). Verify new icons from v1.23.0 are supported.

Gotchas and Tips

Pitfalls

Caching Issues:
- Gotcha: Forgetting to enable caching after publishing config or updating the package.
- Fix: Run php artisan config:clear and regenerate Blade views:
```
php artisan view:clear && php artisan config:clear
```
Icon Name Mismatches:
- Gotcha: Typos in icon names (e.g., <x-lucide-userr /> → 404 error) or using deprecated names.
- Fix: Use IDE autocompletion or check lucide.dev for exact names, including the 7 new icons in v1.23.0.
SVG Asset Paths:
- Gotcha: Hardcoding SVG paths after publishing (e.g., ../vendor/...).
- Fix: Always use asset('vendor/blade-lucide-icons/...') for portability. Ensure paths reflect the updated SVGs in v1.23.0, including the new icons like activity.svg.
Laravel Mix/Webpack:
- Gotcha: Icons not appearing in compiled assets (e.g., emails, PDFs) after an update.
- Fix: Re-publish SVGs and reference them directly:
```
php artisan vendor:publish --tag=blade-lucide-icons --force
```

Debugging Tips

Missing Icons:
- Check the compiled Blade output (view source) for <svg> tags. If missing, the icon name is incorrect or the SVG is not published.
- Verify the icon exists in lucide.dev and is included in v1.23.0.
Styling Not Applying:
- Ensure utility classes (e.g., text-red-500) are loaded in your CSS.
- Use inline styles as a fallback:
```
<x-lucide-alert style="color: red;" />
```
Performance:
- Tip: Cache icons globally by setting 'cache' => true in config.
- Advanced: Use Laravel’s view caching for pages with repeated icons. Clear caches after updates:
```
php artisan cache:clear
```

Extension Points

Custom Icons:

Add your own SVGs to resources/svg and extend the package by creating a custom service provider:

// app/Providers/LucideIconsServiceProvider.php
use BladeUI\Icons\BladeIconsServiceProvider;

class LucideIconsServiceProvider extends BladeIconsServiceProvider {
    protected function iconsPath() {
        return resource_path('svg');
    }
}

Icon Aliases:
- Override icon names in config/blade-lucide-icons.php:
```
'aliases' => [
    'old-name' => 'new-name',
],
```
- Useful for maintaining backward compatibility with new icons in v1.23.0.

Dark Mode:

Use Tailwind’s dark mode classes:

<x-lucide-moon class="dark:text-yellow-300" />

Accessibility:
- Add aria-hidden="true" or role="img" for non-interactive icons:
```
<x-lucide-search aria-hidden="true" />
```
New Icons in v1.23.0:
- Explore the newly added icons (e.g., <x-lucide-activity />, <x-lucide-new-icon />) and integrate them into your workflow. Check the Lucide changelog for details.
- Example: Use <x-lucide-activity /> for activity feeds or dashboards.
Modified Icons in v1.23.0:
- Review the 2 updated icons to ensure your existing codebase isn’t affected by changes in their SVG paths or attributes. Test thoroughly if you’re using these icons in critical parts of your application.

Blade Lucide Icons Laravel Package