direct link icons.svg spritemap

with fallback for legacy browsers

app/assets/javascripts/app/lib/app_post/utils.coffee

@@ -594,7 +594,8 @@ class App.Utils
     num
 
   @icon: (name, className = '') ->
-    "<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#icon-#{name}\" /></svg>"
+    path = if svgPolyfill then '' else 'assets/images/icons.svg'
+    "<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#{path}#icon-#{name}\" /></svg>"
 
   @getScrollBarWidth: ->
     $outer = $('<div>').css(

app/views/init/index.html.erb

@@ -1,8 +1,35 @@
-<div style="position: absolute; clip: rect(0, 0, 0, 0); z-index: -1;">
+<!-- svgstore fallback -->
-  <%= inline_svg('icons.svg') %>
+<script>
-</div>
+  /* 
+    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', 'assets/images/icons.svg', true)
+    xhr.send()
+  })(document)
+</script>
 <div id="app"></div>
 <div class="splash">
-  <svg class="icon icon-logo"><use xlink:href="#icon-logo"/></svg>
+  <svg class="icon icon-logo"><use xlink:href="assets/images/icons.svg#icon-logo" /></svg>
   <div class="splash-title">Loading...</div>
 </div>