Flowbite Blade Icons Laravel Package

Getting Started

Minimal Setup

1. Install the package:

   composer require themesberg/flowbite-blade-icons
   

2. Verify installation by using an icon in a Blade view:

   <x-fwb-o-adjustments-horizontal class="w-6 h-6 text-gray-500" />
   

   This renders the "Adjustments Horizontal" outline icon with Tailwind classes.

3. Explore available icons:

   • Browse the Flowbite Icons preview or check the SVG directory after publishing assets.
   • Icon naming convention:
     • Outline: <x-fwb-o-{icon-name}/>
     • Solid: <x-fwb-s-{icon-name}/>

First Use Case: Dashboard Icons

Replace placeholder icons in a dashboard with Flowbite icons:

<div class="flex space-x-4">
    <x-fwb-o-home class="w-8 h-8 text-blue-500" />
    <x-fwb-o-settings class="w-8 h-8 text-gray-500" />
    <x-fwb-o-users class="w-8 h-8 text-purple-500" />
</div>

Implementation Patterns

Core Workflows

1. Blade Component Usage

• Basic:

  <x-fwb-o-{icon-name} />
  

• With Tailwind classes:

  <x-fwb-s-{icon-name} class="w-6 h-6 text-blue-600 hover:text-blue-800" />
  

• With inline styles:

  <x-fwb-o-{icon-name} style="color: #3b82f6; width: 24px; height: 24px;" />
  

2. Dynamic Icons via @svg Directive

Useful for dynamic icon selection (e.g., based on user role):

@svg('fwb-' . ($user->isAdmin ? 's' : 'o') . '-settings', 'w-6 h-6', ['class' => 'text-gray-500'])

3. Raw SVG Assets

Publish and use SVGs directly in HTML:

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

<img src="{{ asset('vendor/flowbite-blade-icons/o-adjustments-horizontal.svg') }}" alt="Settings" width="20" height="20" />

4. Icon Configuration

Publish the config file to customize defaults:

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

Configure in config/flowbite-blade-icons.php:

'default_classes' => 'w-5 h-5',
'default_attributes' => ['fill' => 'currentColor'],

Integration Tips

With Flowbite Components

Pair icons with Flowbite buttons for consistency:

<button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
    <x-fwb-o-settings />
    Settings
</button>

Dark Mode Support

Leverage currentColor and Tailwind’s dark: variants:

<x-fwb-o-moon class="w-6 h-6 text-gray-500 dark:text-gray-300" />

Icon Caching

Enable caching in config/flowbite-blade-icons.php:

'cache' => true,

Then clear Blade cache after updates:

php artisan view:clear

Custom Icon Sets

Extend the package by publishing additional SVGs to public/vendor/flowbite-blade-icons/ and referencing them directly.

Gotchas and Tips

Pitfalls

1. Icon Naming Confusion

   • Issue: Mixing up fwb-o-{icon} (outline) and fwb-s-{icon} (solid) prefixes.
   • Fix: Use the Flowbite Icons preview to verify icon variants before implementation.

2. Caching Issues

   • Issue: Icons not updating after changes due to Blade caching.
   • Fix: Run php artisan view:clear or disable caching temporarily during development:

     'cache' => env('APP_ENV') !== 'local',
     

3. SVG Asset Paths

   • Issue: Raw SVG assets not found after publishing.
   • Fix: Ensure the --force flag is used during publishing:

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

4. Tailwind Class Conflicts

   • Issue: Custom fill or stroke attributes overriding Tailwind colors.
   • Fix: Use currentColor in the config or rely solely on Tailwind classes:

     <x-fwb-o-settings class="w-6 h-6 text-blue-500" /> <!-- Preferred -->
     

5. Laravel Version Mismatches

   • Issue: Package not working with Laravel 10+ due to Blade component changes.
   • Fix: Update to the latest version (v1.4.0+ supports Laravel 13):

     composer update themesberg/flowbite-blade-icons
     

Debugging Tips

• Check Icon Existence: Verify the icon exists in the Flowbite Icons preview or the resources/svg directory.
• Inspect Compiled Blade: Use php artisan view:compile and check the compiled view for SVG output.
• Validate SVG Output: Temporarily replace the Blade component with a raw SVG to isolate rendering issues:

  {!! file_get_contents(public_path('vendor/flowbite-blade-icons/o-adjustments-horizontal.svg')) !!}
  

Extension Points

1. Custom Icon Directives Extend the @svg directive in a service provider:

   Blade::directive('customIcon', function ($expression) {
       return "<?php echo file_get_contents(public_path('vendor/flowbite-blade-icons/{$expression}.svg')); ?>";
   });
   

   Usage:

   @customIcon('o-adjustments-horizontal')
   

2. Dynamic Icon Loading For dynamic icon selection (e.g., based on API data), use a Blade component:

   <x-dynamic-icon :name="$iconName" :type="$iconType" />
   

   Component logic:

   @props(['name', 'type' => 'o'])
   <x-fwb-{{ $type }}-{{ $name }} />
   

3. Icon Size Utilities Create a custom Blade directive for consistent icon sizing:

   Blade::directive('icon', function ($expression) {
       return "<x-fwb-o-{$expression} class=\"w-5 h-5\" />";
   });
   

   Usage:

   @icon('settings')
   

Performance Optimizations

• Cache Blade Views: Enable caching in config/flowbite-blade-icons.php for production:

  'cache' => env('APP_ENV') === 'production',
  

• Inline SVG Optimization: Use tools like SVGO to optimize published SVGs before publishing them to the public folder.
• Lazy-Load Non-Critical Icons: For icons below the fold, defer loading via JavaScript:

  document.querySelectorAll('img[src*="flowbite-blade-icons"]').forEach(img => {
      if (!img.src.includes('critical-icon.svg')) {
          img.loading = 'lazy';
      }
  });