How to render SVG with Blade components in Laravel

Laravel is a very flexible framework, and you can reutilize your Blade components when it comes to SVG rendering. You can use {{ $.attributes }} in the component itself to pass custom attributes like (e.g., “class”). Just look at the following syntax:

<aside>

  <a href="#!"><x-svg.facebook class="w-5 h-5" /></a>
  <a href="#!"><x-svg.twitter class="w-5 h-5" /></a>
  <a href="#!"><x-svg.instagram class="w-5 h-5" /></a>
  <a href="#!"><x-svg.linkedin class="w-5 h-5" /></a>

</aside>

File structure:

Helpful tip

If you see the use of href="#!" and have always used href="#" or href="javascript:void(0)" – that is a “hack”. With href="#!" you are linking to the element with id="!" and depending on the error recovery it will not scroll to anywhere when that element does not exist.

Via @ecrmnn.