Releasing Blade Icons v1.0
First published on March 21, 2021 · Last updated on March 23, 2021
I'm happy to say that Blade Icons is finally hitting its first major stable version. After releasing the new iteration of Blade Icons last year development continued to work towards a stable major release. In the past few months a lot of works has gone into bringing new features and ensure API stability. Blade Icons has now hit a point where it's mature and stable enough to bring a proper 1.0.0 release. Subsequently, new versions for Blade Heroicons & Blade Zondicons were released as well.
In this blog post we'll go over the new features that were added in.
The biggest hurdle so far when working with Blade Icons was that when you tried loading in large icon sets or several sets at once, that it introduced a pretty large performance hit when using Blade components. This has now been resolved with the new caching command.
You can now run
php artisan icons:cache to cache icons. Similar, you can run
php artisan icons:clear to clear the cache again.
Alternatively, you may now also choose to disable Blade components entirely.
Default Icon Component
The new release adds a much requested default icon component. This gives you a different syntax other than named icon components.
<x-icon name="cloud" class="w-6 h-6" />
Blade Icons can now load icons from different filesystem disks through a new
disk config setting for an icon set. This gives you more flexibility where you can store your icons.
<?php return [ 'sets' => [ 'default' => [ 'path' => '/', 'disk' => 's3-icons', ], ], ];
With the addition of fallback icons, you can now define to which icon Blade Icons needs to fall back to when an icon for a specific set cannot be found.
<?php return [ 'sets' => [ 'default' => [ 'fallback' => 'cake', ], ], ];
You can also define a global fallback icon which will apply for all sets:
<?php return [ 'default' => 'heroicon-cake', ];
Note that fallback icons will not work with named Blade Icon components.
Multiple Icon Paths
Icon sets can now have multiple paths where they store icons. This is useful if you want to organise your icons in a particularly way.
<?php return [ 'sets' => [ 'default' => [ 'paths' => [ 'resources/images/icon-set', 'resources/images/other-icon-set', ], ], ], ];
You can also optionally define some attributes which will be added to every icon. This is both available on a global config level or per icon set.
<?php return [ 'attributes' => [ 'width' => 50, 'height' => 50, ], ];
I think this new Blade Icons release is a major step forward for the package and will make it that much easier for you to handle SVG icons in your Laravel application. If you upgrade, make sure to read the changelog and the upgrade guide.
Thanks for making use of the package and let me know on Twitter what you think of the new release!
← Previous post2020 Recap
Next post →Investigating dark mode for SVG's in GitHub readme's
I'm a software engineer from Antwerp, Belgium. I work as one of the core team members of Laravel, the popular PHP framework. I'm also the creator of Blade UI Kit, a set of renderless components to utilise in your Laravel Blade views.
My passions are open-source, building communities, managing software teams, and creating quality and maintainable products.
Follow me on Twitter: @driesvints.