Filament•14mo ago

Icons best practices

I'd like more icon options to choose from. So I investigated some. And what I'm doing now is: - Search icon here: https://blade-ui-kit.com/blade-icons?search=list&set=1#search - If it's a icon package I don't have yet, install it with this: https://github.com/blade-ui-kit/blade-icons - Profit Is this the way to go? Also, I think I can't use Heroicon v2 icons, because Filament 2 is depending on v1 icons? Or is there a way around that? Any other tips in general for me and others that wish to use more icons than the default heroicons?

9 Replies

Patrick Boivin•14mo ago

Hi @john.77 , the simplest option that comes to mind for custom icons would be to create custom Blade components with SVG. For exampe, if you have a custom component resources/views/components/custom-icons/yes.blade.php, you could use it anywhere Filament expects a heroicon-... expression :

IconColumn::make('my_field')
    ->options([
        'custom-icons.yes' => fn ($state): bool => (bool) $state,
        'custom-icons.no' => fn ($state): bool => (bool) !$state,
    ])

IconColumn::make('my_field')
    ->options([
        'custom-icons.yes' => fn ($state): bool => (bool) $state,
        'custom-icons.no' => fn ($state): bool => (bool) !$state,
    ])

But I don't know anything about best practices in this case... 🙈

Dan Harrin•14mo ago

best practice is dont install the huge icon sets like font awesome they will slow your app down massively

John•14mo ago

What about caching them? I'll give that a shot!

Dan Harrin•14mo ago

the slow part is not affected my caching much

John•14mo ago

I figured that the slow part was due to component magic and finding the right icon. If not that, and also not network traffic or computations, why slow?

Dan Harrin•14mo ago

registering many blade components on every request thousands in some sets

John•14mo ago

Ah.. I see.

Dan Harrin•14mo ago

in filament v3 we move away from using the blade components and disable them so its more performant

John•14mo ago

Nice! Looking forward to it. I now copy the svg directly from Blade UI Kit, just adding class="{{ $class }}", and creating custom components. Works great! Thanks @pboivin and @Dan Harrin !

Gaming

Programming

Icons best practices