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. -
$svgto 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.
