Load icons from external SVG

1 files changed, 38 insertions, 0 deletions

diff --git a/src/main/assets/icon.js b/src/main/assets/icon.js
new file mode 100644
index 00000000..6ff95001
--- /dev/null
+++ b/src/main/assets/icon.js
@@ -0,0 +1,38 @@
+function icon(name, { size = '', className = '' }) {
+  const classes = `icon icon--${name} icon--${size} ${className}`.trim();
+
+  var icon =  '<svg class="icon__cnt">' +
+                '<use xlink:href="/sprite.svg#' + name + '-icon" />' +
+              '</svg>';
+
+  var html =  '<div class="' + classes + '">' +
+                wrapSpinner(icon, classes) +
+              '</div>';
+
+  return html;
+}
+
+function wrapSpinner(html, klass) {
+  if (klass.indexOf('spinner') > -1) {
+    return '<div class="icon__spinner">' + html + '</div>';
+  } else {
+    return html;
+  }
+}
+
+export default function renderIcons() {
+    var render = true;
+    var icons = document.querySelectorAll('[data-icon]');
+
+    for (var i = 0; i < icons.length; i++) {
+      var currentIcon = icons[i];
+      var name        = currentIcon.getAttribute('data-icon');
+      var options = {
+        className:  currentIcon.className,
+        size:   currentIcon.getAttribute('data-size')
+      };
+
+      currentIcon.insertAdjacentHTML('beforebegin', icon(name, options));
+      currentIcon.parentNode.removeChild(currentIcon);
+    }
+ }