Adding Clean SVG Markup Using Use SVG In WordPress

This blog talks about adding clean SVG Markup using Use-SVG in WordPress

Firstly, lets put all the svgs in a template, giving each on an id e.g. `id=”icon-hamburger-menu”`

// template-parts/content-svgs.php
<?php
/**
 * The template part contains all the svgs used on the website.
 *
 */

?>

<div class="hidden">

   <!--Hamburger Icon-->
   <svg width="19px" height="17px" id="icon-hamburger-menu" viewBox="0 0 19 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Hamburger Icon</title>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Mobile:Home" transform="translate(-372.000000, -44.000000)" fill="#FFFFFF">
            <g id="Header" transform="translate(32.000000, 44.000000)">
               <g id="Fill-299" transform="translate(340.000000, 0.000000)">
                  <path d="M0,0 L0,2.81481481 L19,2.81481481 L19,0 L0,0 Z M0,7.03703704 L0,9.85185185 L19,9.85185185 L19,7.03703704 L0,7.03703704 Z M0,14.0740741 L0,16.8888889 L19,16.8888889 L19,14.0740741 L0,14.0740741 Z" id="Fill-1"></path>
               </g>
            </g>
         </g>
      </g>
   </svg>
</div>

Now add this CSS

hidden { display: none; }

Now in your footer.php, include that template.

// footer.php
get_template_part( 'template-parts/content-svgs' );

The included svgs will beadd these into the footer

Now you can use it in any file with its id:

<svg class="w-5 h-5"><use href="#icon-hamburger-menu"></use></svg>

That’s all folks