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?

Get Better at Laravel!

Do you know what is the best way to learn Laravel? Laracasts of course! What else?

Why Every Dev is Raving About Laracasts:

🚀 All-Star Cast: Learn Laravel from the best! We're talking about the creator of Laravel, Taylor Otwell, the genius behind Livewire, Caleb Porzio, and more Laravel legends.

🛠️ Full Toolkit: It’s not just Laravel! Dive deep into Livewire, Alpine.js, and the entire Laravel ecosystem and its intricacies.

🔄 Always Fresh: With direct insights from industry leaders, you’re getting content that’s not just up-to-date, but ahead of its time.

💡 Real-World Ready: Theory’s cool, but practical knowledge? Priceless. Jump from lesson to project seamlessly.

👩‍💻 Join the Elite: Step into a community that’s all about pushing boundaries and perfecting the craft.

Bottom line: Want to level up fast? Laracasts is your jam. Dive in using my referral link and join the coding revolution. 🔗 Laracasts

🚀 Spread the Love & Support the Realm

Hey there, fellow Realmer! If this guide illuminated a new path in your coder/hacker journey, your support would mean a lot. Every bit of magic helps.

Spread the Love

👑 Crown & Share: If you found value in this post, please give it a crown and share it with your fellow coder/hacker enthusiasts. Spreading knowledge is what Sudorealm is all about! Fun fact the Author with the most crowns inside a realm will be crowned as the Realm King! 🤴

🆇 X Shoutout: Feeling extra grateful or have some cool feedback? Drop me a shoutout on Twitter – I'd love to hear from you! d3adR1nger on X

💬 Join our Discord Server: Join the Sudorealm Discord Server connect with fellow enthusiasts and chat about everything that fascinates you! From new blog post suggestions to seeking support on tricky tutorials. Come, share your ideas, and let's grow together! 🚀🌐

Support the Realm

🛍 Affiliate Treasures Below: Dive into the depths below the post to uncover some affiliate products I've curated just for you. It's a great way to support the realm and discover some nerdy treasures.

☕️ Coffee Driven Development: Love what you're reading? Fuel my passion for coding with a delicious cup of coffee! Every sip powers up another line of code and helps bring more exciting content your way. Support my caffeine-fueled coding adventures and let's brew up something amazing together! ☕👨‍💻 Join the journey and BuyMeACoffee