Support the ongoing development of Laravel.io →

Releasing Blade Icons v1.0

22 Mar, 2021 3 min read

Photo by Harpal Singh on Unsplash

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!

Last updated 2 weeks ago.

joedixon, iamriajul, assadikimaryem, jedgueruela, ikramsyakir, abeltiezazu liked this article

6
Like this article? Let the author know and give them a clap!
driesvints (Dries Vints) I work for Laravel and maintain Laravel.io. Creator of Eventy.

Other articles you might like

November 18th 2024

Laravel Custom Query Builders Over Scopes

Hello 👋 Alright, let's talk about Query Scopes. They're awesome, they make queries much easier to r...

Read article
November 19th 2024

Access Laravel before and after running Pest tests

How to access the Laravel ecosystem by simulating the beforeAll and afterAll methods in a Pest test....

Read article
November 11th 2024

🍣 Sushi — Your Eloquent model driver for other data sources

In Laravel projects, we usually store data in databases, create tables, and run migrations. But not...

Read article

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 Laravel.io - All rights reserved.