Filament•2y 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•2y 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•2y ago

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

JohnOP•2y ago

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

Dan Harrin•2y ago

the slow part is not affected my caching much

JohnOP•2y 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•2y ago

registering many blade components on every request thousands in some sets

JohnOP•2y ago

Ah.. I see.

Dan Harrin•2y ago

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

JohnOP•2y 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