Changed markup for use element in html template

Author: blivesta

templates/html/default.html

@@ -57,38 +57,38 @@ <h1 class="t-capitalize t-fontGt t-mbHg"><%= options.name %></h1>
         <h2>Style</h2>
       </div>
       <p class="Grid-col t-width4of12">
-        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> fill
+        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> fill
       </p>
       <p class="Grid-col t-width4of12">
-        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill <%= options.prefix %>--round" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> fill &amp; round
+        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill <%= options.prefix %>--round" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> fill &amp; round
       </p>
       <p class="Grid-col t-width4of12">
-        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill <%= options.prefix %>--circle" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> fill &amp; circle
+        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill <%= options.prefix %>--circle" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> fill &amp; circle
       </p>
       <p class="Grid-col t-width4of12">
-        <svg viewBox="<%= icons[0].viewBox %>"  class="<%= options.prefix %> <%= options.prefix %>--border <%= options.prefix %>--circle" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> border &amp; circle
+        <svg viewBox="<%= icons[0].viewBox %>"  class="<%= options.prefix %> <%= options.prefix %>--border <%= options.prefix %>--circle" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> border &amp; circle
       </p>
       <p class="Grid-col t-width4of12">
-        <svg viewBox="<%= icons[0].viewBox %>"  class="<%= options.prefix %> <%= options.prefix %>--border <%= options.prefix %>--round" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> border &amp; round
+        <svg viewBox="<%= icons[0].viewBox %>"  class="<%= options.prefix %> <%= options.prefix %>--border <%= options.prefix %>--round" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> border &amp; round
       </p>
 
       <div class="Grid-col t-widthFull">
         <h2>Size</h2>
       </div>
       <p class="Grid-col t-width3of12">
-        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %>" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> base
+        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %>" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> base
       </p>
       <p class="Grid-col t-width3of12">
-        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--2x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> 2x
+        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--2x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> 2x
       </p>
       <p class="Grid-col t-width3of12">
-        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--3x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> 3x
+        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--3x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> 3x
       </p>
       <p class="Grid-col t-width3of12">
-        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--4x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg> 4x
+        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--4x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg> 4x
       </p>
       <p class="Grid-col t-widthFull t-mtMd">
-        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--full" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>"></use></svg>
+        <svg viewBox="<%= icons[0].viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--full" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icons[0].name %>" /></svg>
         full
       </p>
     </div>
@@ -113,7 +113,7 @@ <h2 class="t-alignLeft t-gutter">SVG Sprite</h2>
     <% _.each(icons, function(icon) { %>
     <a class="card Grid-col t-widthHalf t-sm-width3of12 t-lg-width2of12 t-mbXl t-alignCenter" href="#modal-<%= icon.name %>">
       <div class="t-mbTn">
-        <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--4x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg>
+        <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--4x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg>
       </div>
       <span class="card-title"><%= options.prefix %>-<%= icon.name %></span>
     </a>
@@ -124,30 +124,30 @@ <h2 class="t-alignLeft t-gutter">SVG Sprite</h2>
       <div class="Grid Grid--middle">
         <div class="Grid-col t-widthFull">
           <p>
-            <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--4x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg>
+            <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--4x" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg>
             <span class="t-fontLg"><%= icon.name %></span>
           </p>
         </div>
 
         <div class="Grid-col t-widthFull">
           <div class="Grid t-gutterReset t-mbMd">
             <p class="Grid-col t-sm-widthHalf">
-              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %>" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg> svg.<%= options.prefix %>
+              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %>" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg> svg.<%= options.prefix %>
             </p>
             <p class="Grid-col t-sm-widthHalf">
-              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg> svg.<%= options.prefix %>.<%= options.prefix %>--fill
+              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg> svg.<%= options.prefix %>.<%= options.prefix %>--fill
             </p>
             <p class="Grid-col t-sm-widthHalf">
-              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill <%= options.prefix %>--round" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg> svg.<%= options.prefix %>.<%= options.prefix %>--fill.<%= options.prefix %>--round
+              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill <%= options.prefix %>--round" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg> svg.<%= options.prefix %>.<%= options.prefix %>--fill.<%= options.prefix %>--round
             </p>
             <p class="Grid-col t-sm-widthHalf">
-              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill <%= options.prefix %>--circle" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg> svg.<%= options.prefix %>.<%= options.prefix %>--fill.<%= options.prefix %>--circle
+              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--fill <%= options.prefix %>--circle" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg> svg.<%= options.prefix %>.<%= options.prefix %>--fill.<%= options.prefix %>--circle
             </p>
             <p class="Grid-col t-sm-widthHalf">
-              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--border <%= options.prefix %>--circle" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg> svg.<%= options.prefix %>.<%= options.prefix %>--border.<%= options.prefix %>--circle
+              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--border <%= options.prefix %>--circle" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg> svg.<%= options.prefix %>.<%= options.prefix %>--border.<%= options.prefix %>--circle
             </p>
             <p class="Grid-col t-sm-widthHalf">
-              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--border <%= options.prefix %>--round" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg> svg.<%= options.prefix %>.<%= options.prefix %>--border.<%= options.prefix %>--round
+              <svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %> <%= options.prefix %>--border <%= options.prefix %>--round" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg> svg.<%= options.prefix %>.<%= options.prefix %>--border.<%= options.prefix %>--round
             </p>
           </div>
         </div>
@@ -157,7 +157,7 @@ <h2 class="t-alignLeft t-gutter">SVG Sprite</h2>
         </div>
         <div class="Grid-col t-width6of12">
           <p>
-            <input type="text" class="Input" value='<svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %>" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>"></use></svg>'>
+            <input type="text" class="Input" value='<svg viewBox="<%= icon.viewBox %>" class="<%= options.prefix %>" aria-hidden="true"><use xlink:href="#<%= options.prefix %>-<%= icon.name %>" /></svg>'>
           </p>
         </div>