SVG Icons

gistfile1.sass

// Store SVG strings as a map.
 $icons-svg: (
  'email': '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="10" viewBox="0 0 13 10"><desc>Created with Avocode</desc><image class="test-svg" width="13" height="10" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAA/0lEQVQoU4XRsWoCQRCAYVcLwUBErGIjKUJAUvoAPoCmsBDRUrQ8QiotLYIgaGMhgiAWthZiI1iFoLWNYikE0wUUBEVh/QfuYDkEDz5mdndmb/dOeVyP1jrMVAl5jNFWSm3MMuUMKI6SWyggaBRdyPto0ryUeUVxiDhEwv3WG+MFcxlpepEEFTzcaayz3pOmFUkZc+TQgNfV/MW4g1dUpUnbBd/ED/hRxBP26GKLGt6dO+1IHo2dLS7cYq+YXJyYYm1krO/lTQcmAvi3jxYhJiFf8w8TrCG/4Rkn53hTBjO8IW3s6qSy/oO4bChNn/bxskS56BFno9Fnn0TuNcDvFfr6UFvPNR40AAAAAElFTkSuQmCC"/></svg>',
  'facebook': '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="7" height="14" viewBox="0 0 7 14"><desc>Created with Avocode</desc><image width="7" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAOCAYAAADjXQYbAAAAd0lEQVQYV2NkgIL///9zAZmTgDgKiDmB+DsjkmQfkF0I44NoZMknQL40EL8E4kZ0nR+AAvxAPJ2RkTELXSdMciJQsgAsCXTIA6g9clBrPgPpd0D8CiT5H9kRSOyTIMkFUAGQF1iB+DoQnwLiM8iuxbQTyZ+DQhIA+fFJUEPJqZ4AAAAASUVORK5CYII="/></svg>',
  'gplus': '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="14" viewBox="0 0 15 14"><desc>Created with Avocode</desc><image width="15" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAABW0lEQVQoU32SwStEURTG3UQkG2Elaih2FGUxo0GK2JBG2bNCTSkrZf6DaWqykMVQFoOSJTZ2xMYOC0nZkFIk2Xh+33RGr9eb9+rXufc737n33Puuq+LzPK+WsA6dkIB2uIdTSDvnfs3XR5xmntHcmbhN/EFcYqEGxlfQCN1o3/KEFmNuJvEKsxiPzDRHLMIE2gmeLsZtoKjOCqWdSfQQb2ERozrQMWKEB0ihHTKfYZyEFtDRLsvF1Qye4Q7jiBUPEs8ghvZmXWvR0DNPYjgA7bwLG5CnUBf2/4UW225qSa3twRaFK/5C89QQ68h9ltoOMbyjfUEc01Mw75+Xf1Ur4gI0gS5wHF5giAUeKy2g2x4geQzLvl/Vb9oFWiqq+IbkOaZ04HKmmG+id0QV6+llMa0GioeZ59B7o4r1qkZhDOO13aqeqH5dEW0nqrie5BrMwwfoLXvW8n6lQul/9PqR2V2wfT8AAAAASUVORK5CYII="/></svg>',
  'linkedin': '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="11" viewBox="0 0 12 11"><desc>Created with Avocode</desc><image width="12" height="11" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAAn0lEQVQoU2P8////EgYGhggg7mZkZKwE0ngBI1DDD6AKdiC+A9SgSoyGIKAiEJ4D1HCAGA1+QEVCQPwIqGEf0EY4Hyj2CohDoC44BJTfDnLSBaCAPhBvBAoEIPGfAsXEgZgFydYqfBpA6nYA8V0gToHa8hifhmdARTJAW4GW/l8AZMcD8T98Gg4DFduBrAFqaABS9SA2Pg0HgRoc6K8BAGlZeUvPpanyAAAAAElFTkSuQmCC"/></svg>',
  'open-right': '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="24" viewBox="0 0 14 24"><desc>Created with Avocode</desc><image width="14" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAABIElEQVQ4T5XUzWoCMRDA8Y3gS/kQHnottBdBLT2UtlQFFWqpdg8KPWg/6Enw5sn3a9f/LNNlN2aTGBgGl/ycJDtZk2XZRZIkKfFgjDmQo4YBfjCzR/wS1+BdjBRomPhGPBF/xFUMFpQP/kDwQHEX/OOrXEDFU/KzghuwbMM5KlDxkLzQ2bfgtUueQMX35KWCEVi2URlOqLhP3tThWqhYXpMstUG8Unn8X9YLFV+St4pTsJxBEoQOvOLZYxRU3CbviSbxeQ7sAL6KJbvekf2MriqfcL7PYEULTUEvwcOxUKURfA3g7Z66liv3a1zLsbwgOtmjhe44iPe6Uy9f5BmTJjrRexeLiqXbL8+CKIegOXkUW6m4HcAWP76Jte9TYe/1CCNvejBXPamzAAAAAElFTkSuQmCC"/></svg>',
  'search': '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="13" viewBox="0 0 13 13"><desc>Created with Avocode</desc><image width="13" height="13" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAABQklEQVQoU42RP0hCURSHu4RkiCJNrU012WJIUSRF4RCIQ0uLzro0GdZethSBILTU1lhRSyI6uAmutYiYVFME/bEl6vUduSee0dCF753fPef+7j3vXjNgh+M4s8gNmAc/3ME5bBtjHnSdRCMfDOuEPTv/IL7CiF34SIxhbKjRYIgyqcIXbEGBBW/kx9D7EId7GCff7Z1E8Yq4DJskd9xtUBtkXoNpSFMvqukdMQxBks9uk209STyGE+pravpECF6S0mLf4LQVEhdwRj2hphvEBCyRLP9hKpDLQJ56Tk1ZxC60YJFCW42cIq0dgXQQonatpiFEBWZA/u8U5LbCsGA3eCJOYpK3+3knH/oAUiA3puMFIZfkgY7tpNl7XFc7o+g5CMItyHXLiZcQsB1E+0zuDX5tFmFessb6v0yyAZcyRTiE1W++h3EWqBXUbwAAAABJRU5ErkJggg=="/></svg>',
  'twitter': '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="10" viewBox="0 0 12 10"><desc>Created with Avocode</desc><image width="12" height="10" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAA4ElEQVQYV32Qrw9BURhA3yWQNWYTNBNNZSRJsKGTXhBkQVM0mxdMksw0QaabIPAHYDNJMYHnfObZ3d2bt519P+49373vKtd1U5ZlXZRSV+Lvo1+gGEMCFjCDh2KhQ1KHCtJBDHphwhEi2owneU+EJskI7uDARBzY6ieSnyAtQp5kbkx7UQcMYcUNciJUWZgai36lg2CLIJOGIFcL/hFLCEv1/ck2sQ+f2ufb0MsguJ4gk7vQgKghyGNk2byTvlwpSYxDGWwIacKZvMbmtdcTIUPRgiLEQCbuQV5uwOabfuIbW7ZI7ILWJAoAAAAASUVORK5CYII="/></svg>',
  'youtube': '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="10" viewBox="0 0 15 10"><desc>Created with Avocode</desc><path d="M7.52.71s2.85 0 4.76.12c.26.03.84.03 1.36.53.41.37.54 1.22.54 1.22s.14.99.14 1.99v.93c0 1-.14 1.99-.14 1.99s-.13.85-.54 1.22c-.52.49-1.1.5-1.36.53-1.91.12-4.77.12-4.77.12s-3.53-.03-4.62-.12c-.3-.05-.98-.04-1.5-.53C.98 8.34.85 7.49.85 7.49S.71 6.5.71 5.5v-.93c0-1 .14-1.99.14-1.99s.13-.85.54-1.22c.52-.5 1.1-.5 1.36-.53C4.66.71 7.51.71 7.51.71h.01m-1.4 5.92l3.66-1.72-3.66-1.73v3.45" fill="#fff"/></svg>',
);


// This mixin just takes the filename as an argument.
// It assumes you have created either a 1dppx png and an svg,
// OR a 1ddpx and a 2x png.
@mixin img-bg($img, $svg, $sprite: $icons) {

  $dims: getSpriteDims($icons, $img);
  width: map_get($dims, 'w');
  height: map_get($dims, 'h');

  background-repeat: no-repeat;


  @if $svg {

    background-image: url('data:image/svg+xml;utf8,#{map-get($icons-svg, $svg)}');
    background-size: contain;

    .no-svg & {
      background-image: sprite-url($icons);
      background-position: sprite-position($icons, $img);
    }

  }
  @else {

    @include breakpoint(max-resolution $bp-hidpi) {
      background-image: sprite-url($icons);
      background-position: sprite-position($icons, $img);
    }

    @include breakpoint(min-resolution $bp-hidpi) {
      background-image: sprite-url($icons2x);
      background-position: 0 getSprite2xYpos($icons2x, $img);
      background-size: (image-width(sprite-path($icons2x)) / 2) auto;
    }
  }
}

@mixin svg-bg($img) {
  @include img-bg($img, $img);
}



// USAGE:
.myEl {
  // returns svg image with image fallback.
  @include svg-bg('youtube');
  
  // returns normal image with retina.
  @include img-bg('youtube');
}