Laravel blade SVG component

Laravel blade SVG component

Realm Coding

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 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

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

d3ad R1nger buymeacoffee

Affiliate Links

Check out what d3ad R1nger suggests for Laravel blade SVG component !

Ready to Forge an Alliance
🤝

Join our alliance and play a pivotal role in the evolution of our digital realm! By aligning with our pricing model, you're not just accessing premium features; you're becoming an integral part of our journey. As an ally, your support propels us forward, ensuring we continue to innovate and thrive.

Lifetime membership

As valued allies, exclusive content awaits you 👀. Unlock a suite of premium features and gain early access to ally-only enhancements in our realm. With our month-by-month commitment, you're always privy to our most coveted updates!

What's included

  • Premium Content Access
  • Ally resources + Unique Ally Badge
  • Access to Affiliate store front 🤑 (🔮)
  • More to come...

It's like buying a pint 🍺. But less!

€1.99 EUR

Forge Alliance

Invoices and receipts available for easy company reimbursement

Subscribe to our newsletter.

👋 Hey there, Realmer! Fancy getting a byte of nerdy knowledge straight to your inbox? Subscribe to our Sudorealm newsletter and don't miss a single trick from our growing community of curious minds! Ready to level up your knowledge game? Join us in the Realm today!

Be one of the privileged few
Think of it as your VIP pass into the Realm where you'll get first dibs on new features, insider updates, and more.
No spam
And, worry not, we promise not to spam – just top-tier, brain-tickling content.