← Back to Plugins
  • Icon Picker
  • Icon Picker

Icon Picker

Plugin information

by Lukas Frey • 27 stars

Field Admin panel Column Form builder Table builder

Adds a form field that let's you choose an icon from a list of installed blade icon packages. More info and a video showcase on GitHub.

Support

#icon-picker on Discord

Views

888

License

MIT

Documentation

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.

Installation

You can install the package via composer:

composer require guava/filament-icon-picker

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,
 
];

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'),
])
// ...
;
}

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
image image

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']);

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
// Allow ALL fontawesome icons, EXCEPT fas-user
IconPicker::make('icon')
->allowIcons(['heroicon-o-user', 'heroicon-o-users'])
->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]));