Load an External SVG Inside a “Use” Tag

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <svg class="Icon">
    <use xlink:href="http://damonbauer.me/assets/images/implementing-svg/icons.svg#plug" />
  </svg>

  <svg class="Icon">
    <use xlink:href="http://damonbauer.me/assets/images/implementing-svg/icons.svg#star" />
  </svg>

  <svg class="Icon">
    <use xlink:href="http://damonbauer.me/assets/images/implementing-svg/icons.svg#umbrella" />
  </svg>

  <svg class="Icon Icon--small">
    <use xlink:href="http://damonbauer.me/assets/images/implementing-svg/icons.svg#umbrella" />
  </svg>

  <script defer src="https://unpkg.com/svgxuse@1.1.23/svgxuse.js"></script>
</body>

</html>

.Icon {
  width: 4em;
  height: 4em;
}

.Icon--small {
  width: 2em;
  height: 2em;
}


/* Demo only */
body {
  margin: 1em;
}