Laravel blade SVG component

Hello all! And welcome to my first mini-post!!! mini-posts will be a series of… posts duh… where I'll be either solving a very small problem that I have encountered during the day, or I'll be sharing something very small but useful from my toolset for all of you out there. Ok, mini-introduction for the first mini-post check ✅.

The SVG problem

I really really love a very cool SVG library called https://tabler-icons.io/, it has everything and the coolest part is that I keep discovering new SVG icons all the time.
My problem though is the following,

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-abacus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M5 3v18"></path>
   <path d="M19 21v-18"></path>
   <path d="M5 7h14"></path>
   <path d="M5 15h14"></path>
   <path d="M8 13v4"></path>
   <path d="M11 13v4"></path>
   <path d="M16 13v4"></path>
   <path d="M14 5v4"></path>
   <path d="M11 5v4"></path>
   <path d="M8 5v4"></path>
   <path d="M3 21h18"></path>
</svg>

Imagine, having to create a list with items where each of them has a different SVG. Instant bloated mess!

Ok, how do you solve that? Of course, a blade component, but… do I really want one blade component for every SVG that I have inserted into my code?

<x-facebook-icon />
<x-instagram-icon />
<x-twitter-icon />
<x-youtube-icon />
... <!-- Boring --> 

Nope… Therefore, one day while I was enjoying my coffee there it was a great idea for the one SVG component to rule them all!

The Dynamic SVG Component

To begin with this component we first need to download the latest version of https://tabler-icons.io/ and save tabler-sprite.svg in our Laravel project's public folder.
Now on the tabler-icon GitHub page (https://github.com/tabler/tabler-icons), I found this very interesting chunk of code.

<svg width="24" height="24">
  <use xlink:href="path/to/our/public/tabler-sprite.svg#tabler-activity" />
</svg>

You just put the name of the icon after the # and you are done! Now we are talking.

My component:

<svg {{ $attributes }} width="24" height="24">
    <use xlink:href="{{ asset('tabler-sprite.svg').'#tabler-'.$svg }}" />
</svg>

Uses:

• the {{ $attributes }} bag of the blade component to enable all of the attributes that are not part of the component's constructor.
• asset() function to access the public folder of my Laravel application.
• $svg to enable the dynamic functionality of the component.

Now all you got to do is:

<x-svg svg="brand-facebook" /> 
<x-svg class="text-pink-500 w-8 h-8" svg="brand-instagram" /> <!-- whatever class you like --> 
<x-svg @click=" do some alpine.js magic " svg="brand-github" /> <!-- your typical blade component power --> 
<x-svg svg="brand-twitter" /> 

You just put the name of the SVG you want and you got it!
How easy was that?

Conclusion

If you found this helpful let me know on 🐥 @DevThanos ❤️

Stay tuned 📻 Share the post if you liked it, and If you loved it... Give it a Crown 👑! 😉

Learn more about the Sudorealm Project, we are constantly trying to make it better and we are so thankful that you have clumsily stumbled upon us! Hope you like our style.

I am @d3ad R1nger, Creator of Sudorealm, thank you for reading.

🐥 @DevThanos