From 340d8b124edc2b73fce4ab1c150c2a4fffb0c7d3 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Wed, 14 Aug 2019 10:49:03 +0300
Subject: Icon: load from external sprite

---
 vnext/package.json      | 1 +
 vnext/src/index.html    | 2 --
 vnext/src/ui/Icon.js    | 5 ++++-
 vnext/webpack.config.js | 3 ++-
 vnext/yarn.lock         | 5 +++++
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/vnext/package.json b/vnext/package.json
index abb06fa0..bb55b26f 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -78,6 +78,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^3.2.0",
+    "evil-icons": "^1.10.1",
     "moment": "^2.24.0",
     "qs": "^6.7.0",
     "react": "16.9.0",
diff --git a/vnext/src/index.html b/vnext/src/index.html
index 84c4d681..226b89c6 100644
--- a/vnext/src/index.html
+++ b/vnext/src/index.html
@@ -12,8 +12,6 @@
     <meta name="theme-color" content="#ffffff" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/evil-icons@1.10.1/assets/evil-icons.min.css" />
-    <script src="https://cdn.jsdelivr.net/npm/evil-icons@1.10.1/assets/evil-icons.min.js"></script>
     <link rel="apple-touch-icon" sizes="57x57" href="//i.juick.com/apple-icon-57x57.png" />
     <link rel="apple-touch-icon" sizes="60x60" href="//i.juick.com/apple-icon-60x60.png" />
     <link rel="apple-touch-icon" sizes="72x72" href="//i.juick.com/apple-icon-72x72.png" />
diff --git a/vnext/src/ui/Icon.js b/vnext/src/ui/Icon.js
index 255bba34..af9a0944 100644
--- a/vnext/src/ui/Icon.js
+++ b/vnext/src/ui/Icon.js
@@ -1,6 +1,9 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 
+// @ts-ignore
+import evilIcons from 'evil-icons/assets/sprite.svg';
+
 /**
  * @typedef {Object} IconProps
  * @property {string} size
@@ -19,7 +22,7 @@ function IconElement(props) {
     var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className;
 
     var name = '#' + props.name + '-icon';
-    var useTag = '<use xlink:href=' + name + ' />';
+    var useTag = `<use xlink:href='${evilIcons}${name}' />`;
     var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } });
     return React.createElement(
         'div',
diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js
index 62042731..041d3924 100644
--- a/vnext/webpack.config.js
+++ b/vnext/webpack.config.js
@@ -25,7 +25,8 @@ module.exports = (env, argv) => {
                 'core-js/modules/es.symbol',
                 'core-js/modules/web.dom-collections.iterator',
                 'url-polyfill',
-                __dirname + '/src/index.js'
+                __dirname + '/src/index.js',
+                require.resolve('evil-icons/assets/evil-icons.css')
             ]
         },
         output: {
diff --git a/vnext/yarn.lock b/vnext/yarn.lock
index 465e0509..8f10854c 100644
--- a/vnext/yarn.lock
+++ b/vnext/yarn.lock
@@ -3415,6 +3415,11 @@ eventsource@^1.0.7:
   dependencies:
     original "^1.0.0"
 
+evil-icons@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/evil-icons/-/evil-icons-1.10.1.tgz#5c6abfec541025a90f73bba6151340e015ef7f9b"
+  integrity sha512-gIBzN6rpvG5om/WAu1rEiE9SgT9mQ00cmYvRb6Cr4ngVaz9Ae8JGeEByMOvrfKvrMhsZzLCNmUJLBJZwjri4bw==
+
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
-- 
cgit v1.2.3