How to render SVG with Blade components in Laravel

Categorized as 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:


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


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.

Leave a reply

Your email address will not be published. Required fields are marked *