Getting Started

Installation: Run composer require themesberg/flowbite-blade-icons in your Laravel project (PHP 8.1+, Laravel 9+).
First Use Case: Replace a placeholder icon in a Blade view with a Flowbite icon:
```
<x-fwb-o-adjustments-horizontal class="w-5 h-5 text-gray-800" />
```
Quick Reference: Browse available icons at Flowbite Icons or check the resources/svg directory in the package.
Verify: Ensure the icon renders correctly with Tailwind classes (e.g., w-5 h-5) and currentColor inheritance.

Implementation Patterns

1. Blade Component Usage

Self-Closing Components: Use <x-fwb-{type}-{icon-name}/> for outline (o-) or solid (s-) icons:
```
<x-fwb-o-home class="text-blue-500 hover:text-blue-700" />
```

Dynamic Icon Selection: Store icon names in variables or config:

@php
    $icon = config('app.dashboard_icon', 'fwb-o-dashboard');
@endphp
<x-fwb-{{ $icon }} class="w-6 h-6" />

Conditional Icons: Use Blade directives for context-aware icons:

@auth
    <x-fwb-o-user />
@else
    <x-fwb-o-login />
@endauth

2. `@svg` Directive

Inline SVG Rendering: Use @svg('fwb-o-{icon}', 'classes', ['attrs']) for dynamic or reusable icons:
```
@svg('fwb-o-settings', 'w-5 h-5', ['aria-label' => 'Settings'])
```

Component-Based SVG: Create reusable SVG components in Blade:

@component('svg-icon', ['icon' => 'fwb-o-notification', 'classes' => 'w-6 h-6'])
    @slot('default')
        {{ __('New notifications') }}
    @endslot
@endcomponent

3. Configuration & Defaults

Publish Config: Set default classes/attributes for all icons:

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

// config/flowbite-blade-icons.php
'default_classes' => 'w-5 h-5 text-gray-500',
'default_attributes' => ['aria-hidden' => 'true'],

Override Globally: Apply defaults via config or service provider:
```
// AppServiceProvider
BladeIcons::defaultClasses('w-4 h-4');
```

4. Raw SVG Assets

Publish SVGs: For direct asset usage (e.g., <img> tags):

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

<img src="{{ asset('vendor/flowbite-blade-icons/o-home.svg') }}" alt="Home" class="w-6 h-6" />

Use Case: Static assets (e.g., favicons, SVG sprites) or non-Blade contexts.

5. Integration with Flowbite Components

Button Icons: Pair with Flowbite buttons for consistency:

<button class="flex items-center gap-2 bg-blue-500 text-white px-4 py-2 rounded">
    <x-fwb-o-settings />
    Settings
</button>

Dropdown Icons: Use in Flowbite dropdowns:

<div x-data="{ open: false }" class="relative">
    <button @click="open = !open" class="flex items-center gap-1">
        <x-fwb-o-chevron-down />
    </button>
    <!-- Dropdown content -->
</div>

6. Icon Caching

Enable Caching: Improve performance for high-traffic views:

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

// config/blade-icons.php
'cache' => true,
'cache_path' => storage_path('framework/cache/blade-icons'),

Gotchas and Tips

Pitfalls

Icon Naming Conflicts:
- Issue: Duplicate icon names between outline/solid variants (e.g., fwb-o-home vs. fwb-s-home).
- Fix: Use explicit prefixes (o-/s-) or alias components in a service provider:
```
Blade::component('home-icon', \Themesberg\FlowbiteBladeIcons\Components\Outline\Home::class);
```
```
<x-home-icon />
```
Tailwind Class Conflicts:
- Issue: currentColor may override Tailwind’s text-{color} classes if not scoped properly.
- Fix: Use text-{color} after the icon component:
```
<x-fwb-o-settings class="w-5 h-5" style="color: inherit" /> <span class="text-blue-500">Settings</span>
```
  Or wrap in a div with Tailwind classes:
```
<div class="text-blue-500">
    <x-fwb-o-settings class="w-5 h-5" />
</div>
```
Caching Quirks:
- Issue: Cached icons may not update after changes to SVG files.
- Fix: Clear Blade cache:
```
php artisan view:clear
php artisan cache:clear
```
- Tip: Disable caching during development ('cache' => env('APP_DEBUG')).
SVG Attribute Injection:
- Issue: Inline styles or attributes may not render as expected due to SVG parsing.
- Fix: Use the @svg directive for complex attributes:
```
@svg('fwb-o-alert', 'w-5 h-5', [
    'aria-label' => 'Alert',
    'data-testid' => 'alert-icon',
])
```
Laravel Mix/Webpack Conflicts:
- Issue: Raw SVG publishing may conflict with Laravel Mix asset paths.
- Fix: Exclude the vendor/flowbite-blade-icons directory from Mix processing in webpack.mix.js:
```
mix.excludeChunks(['vendor/flowbite-blade-icons']);
```

Debugging Tips

Inspect Compiled Blade:
- View the rendered SVG in the browser’s dev tools to debug classes/attributes:
```
{{ \Themesberg\FlowbiteBladeIcons\Components\Outline\Home::render() }}
```
- Check the compiled Blade output in storage/framework/views.
Icon Existence:
- Verify an icon exists by checking the resources/svg directory or Flowbite Icons.
- Use dd(\Themesberg\FlowbiteBladeIcons\Icons::all()) to list available icons.
Class/Attribute Precedence:
- Defaults (config/flowbite-blade-icons.php) → Component attributes → Inline styles.
- Override precedence with !important in CSS if needed:
```
.fwb-icon !important {
    color: inherit !important;
}
```

Extension Points

Custom Icons:

Add new icons by extending the package:

// app/Providers/AppServiceProvider.php
use Themesberg\FlowbiteBladeIcons\BladeIcons;

public function boot()
{
    BladeIcons::add('fwb-c-custom', file_get_contents(resource_path('svg/custom.svg')));
}

Use the custom icon:
```
<x-fwb-c-custom class="w-6 h-6" />
```

Dynamic Icon Loading:

Load icons dynamically from a database or API:

// app/Providers/AppServiceProvider.php
BladeIcons::macro('dynamic', function ($iconName, $svgContent) {
    BladeIcons::add("fwb-d-$iconName", $svgContent);
});

@php
    $customSvg = '<svg>...</svg>';
    \Themesberg\FlowbiteBladeIcons\BladeIcons::dynamic('user', $customSvg);
@endphp
<x-fwb-d-user />

Icon Sets:
- Combine with other Blade Icons packages (e.g., Heroicons) via a service provider:
```
BladeIcons::load(__DIR__.'/../../vendor/heroicons/blade-icons/src');
```
Dark Mode Optimization:
- Prefer currentColor for

Flowbite Blade Icons Laravel Package