Blade Heroicons

Published on March 31, 2020

Update #1: since posting this, v2 has been released and the package has been renamed to "Blade Icons" with support for Zondicons.

Update #2: a new version of Blade Icons has been released featuring multiple icon set support and much more. Chech out the new repo.

By far my most favorite addition to Laravel 7 are the new Blade components. There's all kinds of cool things you can do with them so I thought I'd share some of them with you.

I've built a new package called Blade Heroicons to easily make use of the Heroicons originally made Steve Schoger and Adam Wathan. The packages provides a simple component based flow to include them in your Blade views.

<x-icon-o-adjustments/>

You can also pass classes to your icon components:

<x-icon-o-adjustments class="w-6 h-6 text-gray-500"/>

And if you want you can publish the raw SVG icons and use them like:

<img src="{{ asset('vendor/heroicons/icon-o-adjustments.svg') }}" width="10" height="10"/>

Compiling the components

To make this happen I created a Blade component for each icon. Here's the one for icon-o-adjustments.blade.php:

<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="{{ $class ?? null }}">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>

In order to compile the components easily I wrote a bash script that helped me automate the process. This saves me the work of doing everything by hand.

Registering the components

To register the components I first load the Blade components from the package's service provider. I then iterate over a constant containing all the icon names and alias them with Laravel using the package's :: notation. I also wrote a bash script to easily generate the icon names for the list.

$this->loadViewsFrom(__DIR__ . '/../resources/views', 'heroicons');

collect(self::ICONS)->each(function (string $icon) {
    Blade::component("heroicons::components.icon-o-$icon", "icon-o-$icon");
    Blade::component("heroicons::components.icon-s-$icon", "icon-s-$icon");
});

Conclusion

All in all it's a pretty small package but hopefully this will help you make use of Heroicons in your project more easily.

I'll be blogging more about Blade components soon so follow me on Twitter to keep up to date. If you found the package useful, let me know!

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.

My passions are open-source, building communities, managing software teams, and creating quality and maintainable products.

I'm currently building Eventy, an app for user group leaders, conference organisers, speakers, attendees, sponsors and venue owners.

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

Follow me on Twitter at @driesvints where I also share some Dev Tips from time to time.

© Dries Vints