svgstore fallback

index.html

<!-- svgstore fallback -->
<script>
  /* 
    detect if browser is 
    - Chrome 14-20
    - Android Browser 4.1+
    - iOS 6-7
    - Safari 6
    - Edge 12
    - IE 9-11
  */
  var svgPolyfill = /\bEdge\/12\b|\bTrident\/[567]\b|\bVersion\/7.0 Safari\b/.test(navigator.userAgent) || (navigator.userAgent.match(/AppleWebKit\/(\d+)/) || [])[1] < 537;

  (function (doc) {
    if(!svgPolyfill)
      return

    var scripts = doc.getElementsByTagName('script')
    var script = scripts[scripts.length - 1]
    var xhr = new XMLHttpRequest()
    xhr.onload = function () {
      var div = doc.createElement('div')
      div.innerHTML = this.responseText
      div.style.style.cssText = 'position: absolute; clip: rect(0, 0, 0, 0); z-index: -1;'
      script.parentNode.insertBefore(div, script)
    }
    xhr.open('get', 'icons.svg', true)
    xhr.send()
  })(document)
</script>

utils.coffee

@icon: (name, className = '') ->
    path = if svgPolyfill then '' else 'assets/images/icons.svg'
    "<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#{path}#icon-#{name}\" /></svg>"

Based on @w0rm's https://gist.github.com/w0rm/621a56a353f7b2a6b0db