Load icons from external SVG

6 files changed, 73 insertions, 5 deletions

diff --git a/.gitignore b/.gitignore
index 3e9b0215..86954df2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@
 **/out/**
 src/main/resources/static/*.js
 src/main/resources/static/*.css
+src/main/resources/static/*.svg
 src/main/resources/static/*.map
 src/main/resources/static/*.LICENSE
 juick.p12
diff --git a/package.json b/package.json
index cbc043f5..39243305 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "eslint": "6.5.0",
     "eslint-loader": "3.0.2",
     "eslint-plugin-only-ascii": "0.0.0",
+    "file-loader": "^4.2.0",
     "mini-css-extract-plugin": "^0.8.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
@@ -48,6 +49,7 @@
     "element-closest": "3.0.1",
     "evil-icons": "^1.10.1",
     "formdata-polyfill": "^3.0.19",
+    "svg4everybody": "^2.1.9",
     "url-polyfill": "^1.1.7",
     "whatwg-fetch": "^3.0.0"
   }
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"/>');
diff --git a/webpack.config.js b/webpack.config.js
index cbce03f3..5ecc5eb5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,8 +25,8 @@ module.exports = (env, argv) => {
                 'whatwg-fetch',
                 __dirname + '/src/main/assets/scripts.js',
                 __dirname + '/src/main/assets/style.css',
-                require.resolve('evil-icons/assets/evil-icons.css'),
-                require.resolve('evil-icons/assets/evil-icons.js')
+                require.resolve('evil-icons/assets/sprite.svg'),
+                require.resolve('evil-icons/assets/evil-icons.css')
             ]
         },
         output: {
@@ -54,8 +54,19 @@ module.exports = (env, argv) => {
                         }
                     ]
                 },
-                { test: /\.png$/, loader: 'url-loader' },
-                { test: /\.svg$/, loader: 'url-loader' }
+                {
+                    test: /\.(jpe?g|png|gif)$/i,
+                    loaders: [
+                        'url-loader'
+                    ]
+                },
+                {
+                    test: /\.(svg)$/i,
+                    loader: 'file-loader',
+                    options: {
+                        name: '[name].[ext]',
+                    },
+                }
             ]
         },
         plugins: [
diff --git a/yarn.lock b/yarn.lock
index 6a290002..40356e08 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2461,6 +2461,14 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-loader@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.2.0.tgz#5fb124d2369d7075d70a9a5abecd12e60a95215e"
+  integrity sha512-+xZnaK5R8kBJrHK0/6HRlrKNamvVS5rjyuju+rnyxRGuwUJwpAMsVzUl5dz6rK8brkzjV6JpcFNjp6NqV0g1OQ==
+  dependencies:
+    loader-utils "^1.2.3"
+    schema-utils "^2.0.0"
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -6160,6 +6168,11 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
+svg4everybody@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d"
+  integrity sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0=
+
 svgo@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.0.tgz#bae51ba95ded9a33a36b7c46ce9c359ae9154313"