SVG <use> with html

PHOTO EMBED

Thu Jul 11 2024 04:07:33 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #svg #use

// icons.svg file containing all svg icons with 'symbol' referrenced with an ID
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-monitor" viewBox="0 0 24 24">
<title>monitor</title>
<path d="M20 2h-16c-1.7 0-3 1.3-3 3v10c0 1.7 1.3 3 3 3h7v2h-3c-0.6 0-1 0.4-1 1s0.4 1 1 1h8c0.6 0 1-0.4 1-1s-0.4-1-1-1h-3v-2h7c1.7 0 3-1.3 3-3v-10c0-1.7-1.3-3-3-3zM21 15c0 0.6-0.4 1-1 1h-16c-0.6 0-1-0.4-1-1v-10c0-0.6 0.4-1 1-1h16c0.6 0 1 0.4 1 1v10z"></path>
</symbol>
<symbol id="icon-moon" viewBox="0 0 24 24">
<title>moon</title>
<path d="M21.5 11.9c-0.3-0.2-0.8-0.2-1.1 0.1-2.1 1.6-5 1.6-7.1 0-2.7-2-3.3-5.7-1.3-8.4 0.2-0.3 0.3-0.7 0.1-1.1-0.2-0.3-0.6-0.5-1-0.5-4.8 0.4-8.6 4.2-9 9-0.5 5.5 3.5 10.4 9 10.9 0.3 0 0.6 0 0.9 0 2.3 0 4.6-0.8 6.4-2.3 2.1-1.7 3.3-4.1 3.6-6.8 0-0.3-0.2-0.7-0.5-0.9zM17.2 18.1c-1.6 1.4-3.7 2-5.8 1.8-4.4-0.4-7.6-4.3-7.2-8.7 0.3-3.1 2.4-5.8 5.2-6.8-1.2 3.2-0.1 7 2.8 9.2 2.2 1.6 5 2 7.5 1.1-0.6 1.3-1.4 2.5-2.5 3.4z"></path>
</symbol>
<symbol id="icon-more-horizontal" viewBox="0 0 24 24">
<title>more-horizontal</title>
<path d="M14 12c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M21 12c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M7 12c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
</symbol>
<symbol id="icon-more-vertical" viewBox="0 0 24 24">
<title>more-vertical</title>
<path d="M14 12c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M14 5c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M14 19c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
</symbol>
<symbol id="icon-move" viewBox="0 0 24 24">
<title>move</title>
<path d="M22.9 12.4c0.1-0.2 0.1-0.5 0-0.8-0.1-0.1-0.1-0.2-0.2-0.3l-3-3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l1.3 1.3h-6.6v-6.6l1.3 1.3c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4l-3-3c-0.1-0.1-0.2-0.2-0.3-0.2-0.2-0.1-0.5-0.1-0.8 0-0.1 0.1-0.2 0.1-0.3 0.2l-3 3c-0.4 0.4-0.4 1 0 1.4s1 0.4 1.4 0l1.3-1.3v6.6h-6.6l1.3-1.3c0.4-0.4 0.4-1 0-1.4s-1-0.4-1.4 0l-3 3c-0.1 0.1-0.2 0.2-0.2 0.3-0.1 0.2-0.1 0.5 0 0.8 0.1 0.1 0.1 0.2 0.2 0.3l3 3c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4l-1.3-1.3h6.6v6.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l3 3c0.1 0.1 0.2 0.2 0.3 0.2 0.1 0.1 0.3 0.1 0.4 0.1s0.3 0 0.4-0.1c0.1-0.1 0.2-0.1 0.3-0.2l3-3c0.4-0.4 0.4-1 0-1.4s-1-0.4-1.4 0l-1.3 1.3v-6.6h6.6l-1.3 1.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3l3-3c0.1-0.1 0.2-0.2 0.2-0.3z"></path>
</symbol>
<symbol id="icon-music" viewBox="0 0 24 24">
<title>music</title>
<path d="M21.6 2.2c-0.2-0.2-0.5-0.2-0.8-0.2l-12 2c-0.4 0.1-0.8 0.5-0.8 1v11h-3c-1.7 0-3 1.3-3 3s1.3 3 3 3h2c1.7 0 3-1.3 3-3v-13.2l10-1.7v9.9h-3c-1.7 0-3 1.3-3 3s1.3 3 3 3h2c1.7 0 3-1.3 3-3v-14c0-0.3-0.1-0.6-0.4-0.8zM8 19c0 0.6-0.4 1-1 1h-2c-0.6 0-1-0.4-1-1s0.4-1 1-1h3v1zM20 17c0 0.6-0.4 1-1 1h-2c-0.6 0-1-0.4-1-1s0.4-1 1-1h3v1z"></path>
</symbol>
</defs>
</svg>



// html file using svg and use tags to pull the correct icon from the icons.svg
// animations do not work using this method

  <svg width="100" height="100">
    <use xlink:href="icons.svg#icon-custom"></use>
  </svg>


// using an object for animation use
   <object
          data="./img/bouncing-circles.svg"
          type="image/svg+xml"
          class="preloader-animation"
        >
          <h5 class="fallback">Loading...</h5>
        </object>

content_copyCOPY