Filament Icon Picker Laravel Package

Getting Started

Minimal Setup

1. Install the package:

   composer require wallacemartinss/filament-icon-picker
   

2. Install icon packages (interactive installer recommended):

   php artisan filament-icon-picker:install-icons
   

3. Add views to Tailwind:

   @source '../../../../vendor/wallacemartinss/filament-icon-picker/resources/views/**/*';
   

4. Build assets:

   npm run build
   

First Use Case

Add an icon picker to a form field:

use Wallacemartinss\FilamentIconPicker\Forms\Components\IconPickerField;

IconPickerField::make('icon')
    ->label('Select an Icon')
    ->searchable();

Implementation Patterns

Common Workflows

Form Integration

// Basic usage
IconPickerField::make('icon')
    ->required()
    ->searchable();

// Restrict to specific icon sets
IconPickerField::make('icon')
    ->allowedSets(['heroicons', 'phosphor-icons']);

// Custom modal size
IconPickerField::make('icon')
    ->modalSize('4xl');

Table Column Usage

// Static icon display
IconPickerColumn::make('status')
    ->icon('heroicon-o-star')
    ->success()
    ->large();

// Dynamic icon with record-based logic
IconPickerColumn::make('icon')
    ->color(fn ($record) => $record->is_active ? 'success' : 'danger')
    ->animation(fn ($record) => $record->is_processing ? 'spin' : null);

Infolist Integration

// Read-only icon display
IconPickerEntry::make('icon')
    ->size('xl')
    ->color('primary');

// Dynamic icon with conditional logic
IconPickerEntry::make('user_type')
    ->icon(fn ($record) => $record->is_admin ? 'heroicon-s-shield-check' : 'heroicon-o-user')
    ->color(fn ($record) => $record->is_admin ? 'danger' : 'primary');

Integration Tips

1. Icon Enums for Type Safety:

   use Wallacemartinss\FilamentIconPicker\Enums\Heroicons;
   
   // In navigation
   protected static string|BackedEnum|null $navigationIcon = Heroicons::OutlinedStar;
   
   // In actions
   Action::make('edit')->icon(Heroicons::OutlinedPencil);
   

2. Dynamic Icon Selection:

   // Using helper method
   Icon::phosphor('whatsapp-logo', 'duotone');
   
   // Using generated enum
   PhosphorIcons::WhatsappLogoDuotone->value;
   

3. Performance Optimization:

   php artisan icons:cache
   

4. Customizing Appearance:

   // Table column with all customizations
   IconPickerColumn::make('icon')
       ->large()
       ->success()
       ->spin('0.5s')
       ->showLabel();
   

Gotchas and Tips

Common Pitfalls

1. Missing Icon Sets:

   • Ensure you've installed at least one icon package using php artisan filament-icon-picker:install-icons
   • Verify the set name matches exactly (e.g., 'heroicons' not 'blade-heroicons')

2. Caching Issues:

   • After installing new icon packages, run:

     php artisan optimize:clear
     php artisan icons:cache
     

3. Tailwind Configuration:

   • Forgetting to add the @source directive to your Tailwind config can cause styling issues

4. Enum Generation:

   • If enums aren't generated automatically, run:

     php artisan filament-icon-picker:generate-enums --all
     

Debugging Tips

1. Icon Not Showing?

   • Verify the icon name is correct (case-sensitive)
   • Check if the icon set is properly installed and allowed
   • Use the search feature to confirm the icon exists

2. Performance Issues

   • For large icon sets, enable caching:

     php artisan icons:cache
     

   • Consider restricting allowed sets to improve load times

3. Styling Problems

   • Ensure your Tailwind config includes the package views
   • Check for CSS conflicts with other packages

Extension Points

1. Custom Icon Sets:

   • Create your own icon sets by extending the base classes
   • Implement the IconSet interface for custom integration

2. Modal Customization:

   • Publish the config and modify the modal template:

     php artisan vendor:publish --tag="filament-icon-picker-config"
     

3. Advanced Search:

   • Extend the search functionality by implementing custom search logic in your form field

4. Animation System:

   • Add custom animations by extending the animation classes and registering them in the config

Pro Tips

1. Combine with Filament Actions:

   Action::make('approve')
       ->icon(Heroicons::OutlinedCheckCircle)
       ->color('success');
   

2. Create Icon Presets:

   // In a trait or helper class
   public static function getStatusIcon(string $status): string
   {
       return match($status) {
           'active' => Heroicons::OutlinedCheckCircle->value,
           'pending' => Heroicons::OutlinedClock->value,
           default => Heroicons::OutlinedXCircle->value,
       };
   }
   

3. Use with Filament Widgets:

   Widget::make()
       ->icon(Heroicons::OutlinedChartBar)
       ->title('Analytics Dashboard');
   

4. Dynamic Icon Generation:

   // Generate icons based on record attributes
   IconPickerColumn::make('icon')
       ->icon(fn ($record) => "heroicon-o-{$record->type}")
       ->color(fn ($record) => $record->priority_color);