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.

Caching

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.

More info can be found in the docs as well as in the pull request.

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" />

More info can be found in the docs as well as in the pull request.

Filesystem Disks

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

More info can be found in the docs as well as in the pull request.

Fallback 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.

More info can be found in the docs as well as in the pull request.

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

More info can be found in the docs as well as in the pull request.

Default attributes

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

More info can be found in the docs as well as in the pull request.

Conclusion

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!

About Me

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.

Together with my buddies Rias and Freek I organize events for Full Stack Belgium in the cities of Antwerp and Ghent. And we also organise Full Stack Europe, the conference for the whole team.

Follow me on Twitter: @driesvints.

© Dries Vints