README

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:

Filament v4:

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

Make sure to publish the package assets using:

php artisan filament:assets

Finally, make sure you have a custom filament theme (read here how to create one) and add the following to your theme.css file:

This ensures that the CSS is properly built:

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

For older filament versions, please check the branch of the respective version.

Usage

Usage in Schemas:

Add the icon picker to any form schema in your filament panel or livewire component that supports filament forms:

use Guava\IconPicker\Forms\Components\IconPicker;

IconPicker::make('icon');

Usage in Tables:

To display the stored icon in your filamen tables, use our IconColumn class:

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

$table
    ->columns([
        IconColumn::make('icon'),
    ])
    // ...
;

Usage on the frontend:

We store the full icon name in the database. This means to use the icon on the frontend, simply treat is as any other static icon.

For example, 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.

Customization

Search Results View

Out of the box, we provide three different search result views that you can choose from.

Grid View

This is the default view used. Icons will be shown in a grid with their name underneath the icon.

IconPicker::make('icon')
    ->gridSearchResults();

List View

Icons will be rendered in a list together with the icon's name.

IconPicker::make('icon')
    ->listSearchResults();

Icons View

Icons will be rendered in a small grid with only the icons visible, optionally configurable to show a tooltip with the icon name.

IconPicker::make('icon')
    ->iconsSearchResults()       // With tooltip
    ->iconsSearchResults(false); // Without tooltip

Dropdown

By default, the icon picker will open a dropdown, where you can search and select the icon. (Very similar to a regular Select field in filament).

If you prefer, you can disable the dropdown and then the search and results will be rendered directly beneath the field.

IconPicker::make('icon')
    ->dropdown(false);

Limit sets

By default, all available icon sets in the system will be available in the icon picker.

If you want, you can limit the sets to only the sets you want, by providing an array of set names:

IconPicker::make('icon')
    ->sets(['heroicons']);

Testing

composer test

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

License

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

guava / filament-icon-picker

Maintainers

Details