Blade Icons - Blade UI
Tags: webdev, laravel
Published: 2022-06-10 12:48:40

## Nani? (or What? for you non-anime watching people :stuck_out_tongue:)

Some of you may have already heard of **React Icons** (if you haven't, go make your life easier and [check it out](https://react-icons.github.io/react-icons/)! But did you know there's also something for Laravel?

The title gives it away but you can integrate [**Blade Icons**](https://blade-ui-kit.com/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 :smile: 

It uses SVG's and instead of using something like this: 
```html
<!-- 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:
```html
<x-icon-camera class="w-6 h-6" />
```
It already looks so much cleaner, right? :smile: 

## 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! :grin:

It can be confusing but the documentation is actually in 2 places:
- [Documentation](https://blade-ui-kit.com/docs/0.x/introduction)
- [Get started](https://github.com/blade-ui-kit/blade-icons)

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: 
```html
<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:
![Green arrow using Tailwind CSS and Blade Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9nipgtwmbyx2jcpkgg9.png)

I got the above arrow by browsing through the Blade Icons [library](https://blade-ui-kit.com/blade-icons#search). When you click on an icon you like, it opens up this screen: ![Screenshot of arrow icon on Blade Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlhkzg8b3w104glp50o2.png)

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:
![Screenshot of VS Code Blade Icons config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66k9fhhzhesoicbpkety.png)

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:boom: it worked like a charm!