Blade Icons - Blade UI

Michelle Radomski — Fri, 10 Jun 2022 12:48:40 +0000

Nani? (or What? for you non-anime watching people 😛)

Some of you may have already heard of React Icons (if you haven't, go make your life easier and check it out! But did you know there's also something for Laravel?

The title gives it away but you can integrate Blade Icons with your laravel project in no time! No more worrying about copyright or styling your icons. It made my life a bit easier 😄

It uses SVG's and instead of using something like this:

<!-- camera.svg -->
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
  <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 use blade components instead:

<x-icon-camera class="w-6 h-6" />

It already looks so much cleaner, right? 😄

How did I use it in my project?

First of, I went through the documentation. For all the newbies out there (including me) that's step 1! 😁

It can be confusing but the documentation is actually in 2 places:

Documentation will bring you to the docs on the same website. I personally am not a fan of what I found there so I opted for the Get started one which was so much clearer on how and what to install.

For the project I worked on I used Tailwind CSS to style my icons and I can tell you it's super easy using the blade component. A simple example:

<x-ri-arrow-right-s-line class="h-7 w-7 text-emerald-600 hover:translate-x-1" />

The styling made the icon look like this:

I got the above arrow by browsing through the Blade Icons library. When you click on an icon you like, it opens up this screen:

As you can see, it gives you some options on the right how you can use the icon inside your projects. The way I did it is through installing via composer and then using that specific icon via the component option. I haven't tried using it as a directive or helper so I don't know if there's a difference.

Tip: I installed an icon via composer but it doesn't show?

If at some point you get stuck (like me) and you installed everything correctly and the icon still doesn't show up/your terminal gives you errors, here's a solution that worked for me:

In the picture above you can see I did not uncomment the default icon set although that's step 2 of the installation. On my first try I did follow the installation process step by step but I kept getting errors. So I decided to ignore that step and BAM💥 it worked like a charm!

Forem: Michelle Radomski

Blade Icons - Blade UI

Nani? (or What? for you non-anime watching people 😛)

How did I use it in my project?

Tip: I installed an icon via composer but it doesn't show?