Support the ongoing development of Laravel.io →
Article Hero Image

The New Blade Icons Release

27 Jun, 2020 3 min read

Photo by Paolo Giubilato on Unsplash

About two weeks ago I announced the new release for Blade Icons. The new version is a merger of Blade SVG by Adam Wathan and the previous Blade Icons library that I built. Together it makes for a powerful tool when working with SVG icons.

If you don't know yet what Blade Icons is, let's review it briefly. Blade Icons allows you to reference and manipulate SVG icons easily. Instead of pasting SVG code in your app:

<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>

You can reference icons by using Blade components:

<x-heroicon-o-camera class="h-6 w-6 text-blue-500" />

This allows for a much more easier to use syntax. Besides the benefit of fewer lines of code, it's easier to see which icons you're using. And applying attributes is a breeze.

Icon Sets

The most notable new feature for the library is the introduction of icon sets. This allows you to use several icon sets in a single app instead of one.

If we look at the config file of Blade Icons we'll see that we can define multiple sets. It ships with a default set that points to your resources/svg directory:

<?php

return [
    'sets' => [
        'default' => [
            'path' => 'resources/svg',
            'prefix' => 'icon',
        ],
        'feather' => [
            'path' => 'resources/feather-icons',
            'prefix' => 'feather',
        ],
    ],
];

This way you can reference icons from several sets:

<x-icon-bell />

<x-feather-cloud />

One other cool thing about this feature is that this now allows for third party packages to integrate with Blade Icons and ship their own icon sets. To demonstrate this I've extracted the Heroicons and Zondicons icon sets that shipped with the previous iteration into separate packages:

People have already started building their own third party packages!

Directive & Helper

By merging with Blade SVG, Blade Icons now also features an @svg directive and svg() helper to reference icons:

@svg('icon-camera')

{{ svg('feather-cloud') }}

These two methods also allow you to reference icons from the default set without their prefix:

@svg('camera')

{{ svg('camera') }}

And the svg() helper allows you to use a fluent syntax to set attributes:

{{ svg('camera')->id('settings-icon')->dataFoo('bar')->dataBaz() }}

Conclusion

There's more configuration options so definitely have a look at the readme if you want to discover everything new about Blade Icons. I'm hoping you'll like the new iteration of Blade Icons and that it'll be useful to you in your apps!

Last updated 1 month ago.

joedixon, luigircruz, mimisk, rezwan-hossain, euneuber liked this article

5
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

Article Hero Image December 13th 2024

How to add WebAuthn Passkeys To Backpack Admin Panel

Want to make your Laravel Backpack admin panel more secure with a unique login experience for your a...

Read article
Article Hero Image December 13th 2024

Quickest way to setup PHP Environment (Laravel Herd + MySql)

Setting up a local development environment can be a time taking hassle—whether it's using Docker or...

Read article
Article Hero Image December 5th 2024

How to set up Laravel Magic Link?

User authentication is crucial for making web applications secure and easy to use. Traditionally, pa...

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.