Load icons from external SVG

2 files changed, 42 insertions, 1 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);
+    }
+ }
diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js
index e7396c31..e181de7e 100644
--- a/src/main/assets/scripts.js
+++ b/src/main/assets/scripts.js
@@ -3,6 +3,8 @@ require('classlist.js');
 require('url-polyfill');
 require('formdata-polyfill');
 import { embedLinksToX, embedAll, format } from './embed';
+import renderIcons from './icon';
+import svg4everybody from 'svg4everybody';
 
 if (!('remove' in Element.prototype)) { // Firefox <23
     Element.prototype.remove = function() {
@@ -642,7 +644,8 @@ ready(function() {
     document.querySelectorAll('textarea').forEach((ta) => {
         autosize(ta);
     });
-
+    svg4everybody();
+    renderIcons();
     var insertPMButtons = function(e) {
         e.target.classList.add('narrowpm');
         e.target.parentNode.insertAdjacentHTML('afterend', '<input type="submit" value="OK"/>');