Sass mixin to replace text with an svg background image. Requires the existence of a png fallback, which is what you should be doing anyway.

replace-text-with-svg.scss

/*
  Replace text with svg, use a png fallback.
  https://gist.github.com/brianmcallister/5065262
  
  $img - Image name to use, no extension.
*/
@mixin replace-text-with-svg($img) {
  @extend %hide-text;
  
  $png: '#{$img}.png';
  
  @include size(image-width($png), image-height($png));
  @include svg-background($img);
  
  display: block;
  margin-right: 10px;
}

/*
  Set an svg background image with a png fallback.
  
  $img - Image name without an extension.
*/
@mixin svg-background($img) {
  $png: '#{$img}.png';
  $svg: '#{$img}.svg';
  
  background-image: image-url($png);
  background-image: none, image-url($svg);
  background-repeat: no-repeat;
}