Move svg4everybody into polyfills and reorganize

app/assets/javascripts/commons/polyfills.js

@@ -14,10 +14,10 @@ import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 
 // Browser polyfills
-import 'classlist-polyfill';
 import 'formdata-polyfill';
 import './polyfills/custom_event';
 import './polyfills/element';
 import './polyfills/event';
 import './polyfills/nodelist';
 import './polyfills/request_idle_callback';
+import './polyfills/svg';

app/assets/javascripts/commons/polyfills/element.js

@@ -1,12 +1,17 @@
-Element.prototype.closest = Element.prototype.closest ||
+// polyfill Element.classList and DOMTokenList with classList.js
+import 'classlist-polyfill';
+
+Element.prototype.closest =
+  Element.prototype.closest ||
   function closest(selector, selectedElement = this) {
     if (!selectedElement) return null;
-    return selectedElement.matches(selector) ?
-      selectedElement :
-      Element.prototype.closest(selector, selectedElement.parentElement);
+    return selectedElement.matches(selector)
+      ? selectedElement
+      : Element.prototype.closest(selector, selectedElement.parentElement);
   };
 
-Element.prototype.matches = Element.prototype.matches ||
+Element.prototype.matches =
+  Element.prototype.matches ||
   Element.prototype.matchesSelector ||
   Element.prototype.mozMatchesSelector ||
   Element.prototype.msMatchesSelector ||
@@ -15,13 +20,15 @@ Element.prototype.matches = Element.prototype.matches ||
   function matches(selector) {
     const elms = (this.document || this.ownerDocument).querySelectorAll(selector);
     let i = elms.length - 1;
-    while (i >= 0 && elms.item(i) !== this) { i -= 1; }
+    while (i >= 0 && elms.item(i) !== this) {
+      i -= 1;
+    }
     return i > -1;
   };
 
 // From the polyfill on MDN, https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill
-((arr) => {
-  arr.forEach((item) => {
+(arr => {
+  arr.forEach(item => {
     if (Object.prototype.hasOwnProperty.call(item, 'remove')) {
       return;
     }

app/assets/javascripts/commons/polyfills/svg.js

@@ -0,0 +1,5 @@
+import svg4everybody from 'svg4everybody';
+
+// polyfill support for external SVG file references via <use xlink:href>
+// @see https://css-tricks.com/svg-use-external-source/
+svg4everybody();

app/assets/javascripts/main.js

@@ -2,7 +2,6 @@
 
 import jQuery from 'jquery';
 import Cookies from 'js-cookie';
-import svg4everybody from 'svg4everybody';
 
 // bootstrap webpack, common libs, polyfills, and behaviors
 import './webpack';
@@ -41,8 +40,6 @@ if (process.env.NODE_ENV !== 'production' && gon && gon.test_env) {
   import(/* webpackMode: "eager" */ './test_utils/');
 }
 
-svg4everybody();
-
 document.addEventListener('beforeunload', () => {
   // Unbind scroll events
   $(document).off('scroll');