guava/filament-icon-picker

A filament plugin that adds an icon picker field.

2.2.0 2024-03-01 14:41 UTC

Requires

• php: ^8.0
• filament/filament: ^3.0@stable
• illuminate/contracts: ^9.0|^10.0|^11.0

Requires (Dev)

• orchestra/testbench: ^7.0|^8.0|^9.0

MIT

• Lukas Frey

README

Filament Icon Picker

This plugin adds a new icon picker form field and a corresponding table column. You can use it to select from any blade-icons kit that you have installed. By default, heroicons are supported since it is shipped with Filament.

This can be useful for when you want to customize icons rendered on your frontend, if you want your users to be able to customize navigation icons, add small icons to their models for easy recognition and similar.

Screen.Recording.2022-10-08.at.2.03.44.mov

Installation

You can install the package via composer:

Filament v3:

composer require guava/filament-icon-picker:"^2.0"

Filament v2:

composer require guava/filament-icon-picker:"^1.0"

You can publish the config file with:

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

This is the contents of the published config file:

<?php
return [

    'sets' => null,

    'columns' => 1,

    'layout' => \Guava\FilamentIconPicker\Layout::FLOATING,
    
    'cache' => [
        'enabled' => true,
        'duration' => '7 days',
    ],

];

Usage

Basic Usage

Usage in Admin Panel:

use Guava\FilamentIconPicker\Forms\IconPicker;

public static function form(Form $form): Form
{
    return $form->schema([
        IconPicker::make('icon');
    ]);
}

Usage in Livewire Component:

use Guava\FilamentIconPicker\Forms\IconPicker;

protected function getFormSchema(): array
{
    return [
        IconPicker::make('icon'),
    ];
}

Usage in Tables:

// Make sure this is the correct import, not the filament one
use Guava\FilamentIconPicker\Tables\IconColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            IconColumn::make('icon'),
        ])
        // ...
        ;
}

The field's state returns the selected identifier of the icon.

Assuming we saved the icon on our $category model under $icon, you can render it in your blade view using:

<x-icon name="{{ $category->icon }}" />

More information on rendering the icon on the blade-icons github.

Options

Columns

By default, a single-column icon picker will be displayed. You can customize the amount of columns via the icon-picker.columns configuration or using the ->columns() option like this:

// Display 3 columns from lg and above
IconPicker::make('icon')
    ->columns(3); 
    
// More detailed customization
// This will display 1 column from xs to md, 3 columns from lg to xl and 5 columns from 2xl and above
IconPicker::make('icon')
    ->columns([
        'default' => 1,
        'lg' => 3,
        '2xl' => 5,
    ]);

1 Column	3 Columns

Sets

By default, the plugin will use all available blade icon sets installed. If you want to use only specific icon sets, you can change the default via the icon-picker.sets configuration or on a case-by-case basis:

// Search both herocions and fontawesome icons
IconPicker::make('icon')
    ->sets(['heroicons', 'fontawesome-solid']); 

When installing new sets, please make sure to clear your cache, if you can't find your icons in the icon picker.

Allow/Disallow icons

For detailed control over the icons, there are two options available to allow and disallow certain icons.

// Allow ONLY heroicon-o-user and heroicon-o-users
IconPicker::make('icon')
    ->allowIcons(['heroicon-o-user', 'heroicon-o-users']);

// Allow ALL fontawesome icons, EXCEPT fas-user
IconPicker::make('icon')
    ->disallowIcons(['fas-user']); 

Layout

The icon picker comes with two layouts. The default, Layout::FLOATING is the standard layout used in Filament Selects. The search results will appear in a pop over window.

The Layout::ON_TOP will render the search results always on the page.

// 
IconPicker::make('icon')
    ->layout(Layout::FLOATING) // default
    //or
    ->layout(Layout::ON_TOP)

Custom Item Template

Out of the box, the search results render a preview of the icon and their identifier. You are free to customize this using the ->itemTemplate() option:

// Render your.blade.template instead of the default template.  
// Make sure to pass the $icon as parameter to be able to render it in your view.
IconPicker::make('icon')
    ->itemTemplate(fn($icon) => view('your.blade.template', ['icon' => $icon]));

Caching

Depending on how many icon packs you use and their size, the loading time for getting the search results can be high. In order to mitigate this issue a bit, search results are by default cached (for 7 days).

You can configure the default caching options for all icon pickers in the configuration file.

To configure a specific IconPicker, these methods are available:

IconPicker::make('icon')
    // Disable caching
    ->cacheable(false)
    
    // Cache for one hour
    ->cacheDuration(3600);

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Lukas Frey
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

Other packages

• Laravel Populator
• Filament Drafts