examples/spritesheet-classbased.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>SVGInjector Example: SVG Sprites</title>
    <style>
      .external-styling {
        color: #666;
      }
      .external-styling .green {
        color: #0f0;
      }
      .external-styling .icon--styled {
        color: #900;
        stroke: #f00;
      }

    </style>
  </head>
  <body>
    <h1>Spritesheet Classbased</h1>
    <section>
      <!-- single svg -->
      <svg data-src="./assets/svg/circle.svg" />
    </section>

    <section>
      <!-- inject from spriteeet -->
      <svg class="sprite--logo-gradients" />
      <svg class="sprite--triangle" />
    </section>

    <section class="external-styling">
      <p class="green">
        <svg class="sprite--triangle icon" />
      </p>
      <svg class="sprite--triangle icon icon--styled" />
    </section>

    <script src="../dist/svg-injector.min.js"></script>
    <script>
      (function(window, document){
          // Options
          var injectorOptions = {
              evalScripts: 'once',
              // reference fragments via views - generated with grunt-svg-sprite
              spritesheetURL: './assets/svg/views.svg'
          };

          // Setup the injector
          var injector = new SVGInjector(injectorOptions);

          // inject single svg
          injector.inject(document.querySelectorAll('svg[data-src]'));

          // inject svgs from spritesheets
          injector.inject(document.querySelectorAll('svg[class^=sprite-]'));

      })(window, document);
    </script>
  </body>
</html>