Embedded SVG icons in css/js files

Allows removal of hacky /icon endpoint solution.
Fixes PDF exports with WKHTML and allows the icon to show in HTML
exports.

Fixes #796

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 02b4789c288885c9c6ca8b5f888eb7c5593fb2a0..2077f6888fbc84e9a57c42836c0958f1d844213a 100644 (file)
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -108,27 +108,6 @@ class HomeController extends Controller
         ]);
     }
 
-    /**
-     * Get an icon via image request.
-     * Can provide a 'color' parameter with hex value to color the icon.
-     * @param $iconName
-     * @param Request $request
-     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Symfony\Component\HttpFoundation\Response
-     */
-    public function getIcon($iconName, Request $request)
-    {
-        $attrs = [];
-        if ($request->filled('color')) {
-            $attrs['fill'] = '#' . $request->get('color');
-        }
-
-        $icon = icon($iconName, $attrs);
-        return response($icon, 200, [
-            'Content-Type' => 'image/svg+xml',
-            'Cache-Control' => 'max-age=3600',
-        ]);
-    }
-
     /**
      * Get custom head HTML, Used in ajax calls to show in editor.
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View

diff --git a/resources/assets/icons/warning.svg b/resources/assets/icons/warning.svg
index dc1aefc25a58eb553120e0cd075179a4e9ca0465..b1d1ad02cb02b28d7dbbc83ca6cf362082c2b63e 100644 (file)
--- a/resources/assets/icons/warning.svg
+++ b/resources/assets/icons/warning.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="#b6531c" xmlns="http://www.w3.org/2000/svg">
     <path d="M0 0h24v24H0z" fill="none"/>
     <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
 </svg>
\ No newline at end of file

diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index 56aa294fadac9980d9f778a13b1a8d66de7ef388..701a1fec60c539064d4fb5a31d2a8b21aae205b9 100644 (file)
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -292,7 +292,7 @@ function drawIoPlugin() {
 
         editor.addButton('drawio', {
             tooltip: 'Drawing',
-            image: window.baseUrl('/icon/drawing.svg?color=000000'),
+            image: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMDAwMDAiICB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTIzIDdWMWgtNnYySDdWMUgxdjZoMnYx MEgxdjZoNnYtMmgxMHYyaDZ2LTZoLTJWN2gyek0zIDNoMnYySDNWM3ptMiAxOEgzdi0yaDJ2Mnpt MTItMkg3di0ySDVWN2gyVjVoMTB2MmgydjEwaC0ydjJ6bTQgMmgtMnYtMmgydjJ6TTE5IDVWM2gy djJoLTJ6bS01LjI3IDloLTMuNDlsLS43MyAySDcuODlsMy40LTloMS40bDMuNDEgOWgtMS42M2wt Ljc0LTJ6bS0zLjA0LTEuMjZoMi42MUwxMiA4LjkxbC0xLjMxIDMuODN6Ii8+CiAgICA8cGF0aCBk PSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==`,
             cmd: 'drawio'
         });
 

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index b7a8dcc03fa6bd5fe986897e3974ff3d935b8389..c0f02ed7d78f34b48908f02d2ca7be84476e12c6 100644 (file)
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -138,7 +138,7 @@
   display: block;
   position: relative;
   &:before {
-    background-image: url("/icon/info-filled.svg?color=015380");
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
     background-repeat: no-repeat;
     content: '';
     width: 1.2em;
@@ -157,7 +157,7 @@
     color: darken($positive, 16%);
   }
   &.success:before {
-    background-image: url("/icon/check-circle.svg?color=376c39");
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
   }
   &.danger {
     border-left-color: $negative;
@@ -165,7 +165,7 @@
     color: darken($negative, 20%);
   }
   &.danger:before {
-    background-image: url("/icon/danger.svg?color=b91818");
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
   }
   &.info {
     border-left-color: $info;
@@ -178,7 +178,7 @@
     color: darken($warning, 16%);
   }
   &.warning:before {
-    background-image: url("/icon/warning.svg?color=b6531c");
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
   }
 }
 

diff --git a/routes/web.php b/routes/web.php
index 794edfd0152cc92d8b866f88d985e0d180b2f90e..a857bce6c71dc91c710dfe1863ffe2bc071372f1 100644 (file)
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,7 +1,6 @@
 <?php
 
 Route::get('/translations', 'HomeController@getTranslations');
-Route::get('/icon/{iconName}.svg', 'HomeController@getIcon');
 Route::get('/robots.txt', 'HomeController@getRobots');
 
 // Authenticated routes...