compass-img-delivery

// Usage

@include img_delivery("/path/to/images/", "/path/to/stylesheets/and/file-basename", "/path/to/javascripts/and/file-basename") {
  
  .foo a:after {
    @extend %icon-foo;
  }

  .var b:after {
    @extend %icon-var;
  }

  .logo,
  .logo-small {
    @extend %logo;
  }

}

// Output
// 3 different css files. So looks the svg one:

.foo a:after {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlvZGlvcN2Zz4NCg==");
  background-repeat: no-repeat;
}

.foo b:after {
  background-image: url("data:image/svg+xml;base64,bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlvcN2Zz4NCg==");
  background-repeat: no-repeat;
}

.logo, .logo-small {
  background-image: url("data:image/svg+xml;base64,gdmVyc2lvbj0iMS4wIiBlbmNvZGlvcN2Zz==");
  background-repeat: no-repeat;
}