From a8dd4cb7c645026305bd335c6ddc55c7b02595f6 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sat, 4 Apr 2020 11:47:48 +0200
Subject: [PATCH] add SVG Icon

---
 package.json                          |  1 +
 resources/js/app.js                   |  3 +++
 resources/js/components/Nav.vue       | 19 +++----------------
 resources/js/components/TopBar.vue    | 16 ++++------------
 resources/sass/components/nav.scss    |  2 ++
 resources/sass/components/topbar.scss | 11 +++++++++++
 resources/svg/games.svg               |  4 ++++
 resources/svg/logo.svg                | 12 ++++++++++++
 resources/svg/logout.svg              |  4 ++++
 resources/svg/memos.svg               |  8 ++++++++
 resources/svg/params.svg              |  4 ++++
 resources/svg/search.svg              |  3 +++
 webpack.mix.js                        | 11 ++---------
 13 files changed, 61 insertions(+), 37 deletions(-)
 create mode 100644 resources/svg/games.svg
 create mode 100644 resources/svg/logo.svg
 create mode 100644 resources/svg/logout.svg
 create mode 100644 resources/svg/memos.svg
 create mode 100644 resources/svg/params.svg
 create mode 100644 resources/svg/search.svg

diff --git a/package.json b/package.json
index 3d6007e..8b5b78a 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
         "vuex": "^3.1.3"
     },
     "dependencies": {
+        "laravel-mix-svg-vue": "^0.2.6",
         "markdown-it": "^10.0.0"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index a6aca2e..d5a8523 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -2,6 +2,9 @@ import Vue from 'vue'
 import router from './router'
 import App from './components/App'
 import store from './store'
+import SvgVue from 'svg-vue';
+
+Vue.use(SvgVue);
 
 require('./bootstrap');
 
diff --git a/resources/js/components/Nav.vue b/resources/js/components/Nav.vue
index 05c3067..bb6de90 100644
--- a/resources/js/components/Nav.vue
+++ b/resources/js/components/Nav.vue
@@ -1,28 +1,15 @@
 <template>
     <nav>
         <router-link to="/" class="site-logo-main">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current">
-                <title>Portal</title>
-                <path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>
-            </svg>
+            <svg-vue icon="logo" />
         </router-link>
         <hr>
         <router-link to="/memos" class="nav-item">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 viewBox="0 0 384 384"  class="fill-current site-logo">
-                <rect x="0" y="341.333" width="384" height="42.667"/>
-                <rect x="0" y="256" width="256" height="42.667"/>
-                <rect x="0" y="85.333" width="256" height="42.667"/>
-                <rect x="0" y="170.667" width="384" height="42.667"/>
-                <rect x="0" y="0" width="384" height="42.667"/>
-            </svg>
+            <svg-vue icon="memos" />
             Memos
         </router-link>
         <router-link to="/jeux" class="nav-item">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 viewBox="0 0 469.333 469.333" class="fill-current site-logo">
-                <path d="M426.667,106.667h-384C19.093,106.667,0,125.76,0,149.333V320c0,23.573,19.093,42.667,42.667,42.667h384 c23.573,0,42.667-19.093,42.667-42.667V149.333C469.333,125.76,450.24,106.667,426.667,106.667z M213.333,256h-64v64h-42.667v-64 h-64v-42.667h64v-64h42.667v64h64V256z M309.333,298.667c-17.707,0-32-14.293-32-32s14.293-32,32-32s32,14.293,32,32 S327.04,298.667,309.333,298.667z M394.667,234.667c-17.707,0-32-14.293-32-32s14.293-32,32-32s32,14.293,32,32 S412.373,234.667,394.667,234.667z"/>
-            </svg>
+            <svg-vue icon="games" />
             Jeux
         </router-link>
     </nav>
diff --git a/resources/js/components/TopBar.vue b/resources/js/components/TopBar.vue
index 41c2658..7f696fe 100644
--- a/resources/js/components/TopBar.vue
+++ b/resources/js/components/TopBar.vue
@@ -7,23 +7,15 @@
         <form v-if="authUser" class="search-box">
             <input type="search" name="search" placeholder="Search">
             <button type="submit" value="S">
-                <svg viewBox="0 0 515.558 515.558" xmlns="http://www.w3.org/2000/svg" class="fill-current site-logo">
-                    <path d="m378.344 332.78c25.37-34.645 40.545-77.2 40.545-123.333 0-115.484-93.961-209.445-209.445-209.445s-209.444 93.961-209.444 209.445 93.961 209.445 209.445 209.445c46.133 0 88.692-15.177 123.337-40.547l137.212 137.212 45.564-45.564c0-.001-137.214-137.213-137.214-137.213zm-168.899 21.667c-79.958 0-145-65.042-145-145s65.042-145 145-145 145 65.042 145 145-65.043 145-145 145z"/>
-                </svg>
+                <svg-vue icon="search" />
             </button>
         </form>
         <div v-if="authUser">
-            <router-link to="/dashboard">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
-                    <title>Paramètres</title>
-                    <path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>
-                </svg>
+            <router-link to="/dashboard" class="mr-1">
+                <svg-vue icon="params" />
             </router-link>
             <a href="#" @click.prevent="logout" class="nav-link">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
-                    <title>Déconnexion</title>
-                    <path d="M21 3h-3.8c-.7 0-1.3-.6-1.3-1.3S16.5.4 17.2.4h5.1c.7 0 1.3.6 1.3 1.3v20.5c0 .7-.6 1.3-1.3 1.3h-5.1c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3H21V3zm-6.9 7.7L8.6 5.2c-.5-.5-.6-1.3-.1-1.8s1.3-.5 1.8 0l7.7 7.7c.8.8.2 2.2-.9 2.2H1.8c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h12.3zm-1.6 4.8c.5-.5 1.3-.4 1.8.1s.4 1.3-.1 1.8l-3.8 3.2c-.5.5-1.3.4-1.8-.1-.6-.5-.5-1.3 0-1.7l3.9-3.3z"/>
-                </svg>
+                <svg-vue icon="logout" />
             </a>
         </div>
         <router-link v-else to="/login">
diff --git a/resources/sass/components/nav.scss b/resources/sass/components/nav.scss
index 2a2d96a..44cc164 100644
--- a/resources/sass/components/nav.scss
+++ b/resources/sass/components/nav.scss
@@ -22,7 +22,9 @@ nav {
 
         svg {
             margin: 0 1rem;
+            width: 3rem;
             transition: fill 0.2s;
+            fill: $light;
         }
 
         &:hover {
diff --git a/resources/sass/components/topbar.scss b/resources/sass/components/topbar.scss
index 14036c1..dc9e190 100644
--- a/resources/sass/components/topbar.scss
+++ b/resources/sass/components/topbar.scss
@@ -2,4 +2,15 @@
     background-color: $medium;
     width: calc(100vw - 15rem);
     box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
+
+    svg {
+        width: 3rem;
+        fill: $light;
+        transition: fill 0.2s;
+
+        &:hover {
+            fill: $dark;
+            transition: fill 0.2s;
+        }
+    }
 }
diff --git a/resources/svg/games.svg b/resources/svg/games.svg
new file mode 100644
index 0000000..66157e7
--- /dev/null
+++ b/resources/svg/games.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 469.333 469.333" class="fill-current site-logo">
+                <path d="M426.667,106.667h-384C19.093,106.667,0,125.76,0,149.333V320c0,23.573,19.093,42.667,42.667,42.667h384 c23.573,0,42.667-19.093,42.667-42.667V149.333C469.333,125.76,450.24,106.667,426.667,106.667z M213.333,256h-64v64h-42.667v-64 h-64v-42.667h64v-64h42.667v64h64V256z M309.333,298.667c-17.707,0-32-14.293-32-32s14.293-32,32-32s32,14.293,32,32 S327.04,298.667,309.333,298.667z M394.667,234.667c-17.707,0-32-14.293-32-32s14.293-32,32-32s32,14.293,32,32 S412.373,234.667,394.667,234.667z"/>
+            </svg>
diff --git a/resources/svg/logo.svg b/resources/svg/logo.svg
new file mode 100644
index 0000000..c2bef24
--- /dev/null
+++ b/resources/svg/logo.svg
@@ -0,0 +1,12 @@
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100">
+  <g
+     transform="translate(0,-197)">
+    <path
+       d="M 188.97656 0 A 188.97638 188.97638 0 0 0 0 188.97656 A 188.97638 188.97638 0 0 0 188.97656 377.95312 A 188.97638 188.97638 0 0 0 377.95312 188.97656 A 188.97638 188.97638 0 0 0 188.97656 0 z M 170.81055 38.818359 L 211.67188 38.818359 C 214.22548 38.818359 215.50235 38.818893 216.7793 40.109375 C 218.05624 41.399857 219.33203 42.684127 219.33203 43.974609 L 224.43945 77.474609 C 230.8238 80.050168 235.93136 82.625534 239.76172 83.916016 L 265.29883 64.589844 C 266.57592 63.299362 269.1293 63.300781 270.40625 63.300781 C 272.9598 63.300781 274.23673 64.584518 275.51367 65.875 C 290.83607 80.047813 301.05271 90.356699 306.16016 96.798828 C 307.4371 98.08931 307.43555 99.375534 307.43555 100.66602 C 307.43555 101.9565 307.4371 103.24077 306.16016 104.53125 C 304.88331 107.10783 301.05106 112.26237 297.2207 117.41602 C 292.11325 122.56959 289.55975 127.72473 287.00586 130.30078 C 290.8367 136.7434 293.39102 141.89572 294.66797 148.33789 L 327.86523 153.49219 C 329.14218 153.49219 330.42032 154.77788 331.69727 156.06836 C 332.97421 157.3588 332.97461 158.64506 332.97461 159.93555 L 332.97461 201.16406 C 332.97461 202.45454 332.97421 203.74081 331.69727 205.03125 C 330.42032 206.32173 329.14218 207.60742 327.86523 207.60742 L 294.66797 212.76172 C 292.11451 219.20389 290.83709 224.3567 288.2832 230.79883 C 292.1138 238.52955 299.77435 246.26064 307.43555 256.56836 C 308.71249 257.85884 308.71289 259.14506 308.71289 260.43555 C 308.71289 261.72603 308.71249 263.01034 307.43555 264.30078 C 303.60495 268.16637 297.22174 275.89734 289.56055 284.91602 C 280.6225 293.93427 274.23749 297.80078 271.68359 297.80078 C 270.4065 297.80078 267.85312 296.51509 266.57617 295.22461 L 241.03906 275.89844 C 235.93161 278.47403 230.8238 281.05131 224.43945 282.3418 C 223.16236 299.09168 220.60898 310.68678 219.33203 317.12891 C 218.05513 320.99253 216.77762 322.2832 212.94727 322.2832 L 172.08789 322.2832 C 170.81143 322.2832 169.53476 322.28312 168.25781 319.70703 C 166.98087 318.41659 165.70312 317.13033 165.70312 315.83984 L 160.5957 282.3418 C 154.2114 281.05324 149.1055 278.47652 143.99805 275.90039 L 118.46094 295.22656 C 118.46094 296.51704 115.90585 296.51758 114.62891 296.51758 C 112.07535 296.51758 110.79843 296.51704 109.52148 295.22656 C 92.922242 281.05375 82.707795 270.74685 78.876953 264.30469 C 77.600006 263.01421 77.599609 261.72798 77.599609 260.4375 C 77.599609 259.14702 77.600006 256.57227 78.876953 256.57227 C 80.153802 253.99523 83.985568 248.84107 87.816406 243.6875 C 92.923905 238.53336 95.477355 233.37882 98.03125 230.80273 C 94.200892 224.36057 91.646084 219.2058 90.369141 212.76367 L 57.169922 207.61133 C 55.893454 207.61133 54.616791 206.32564 53.339844 205.03516 C 52.06338 203.74475 52.06366 202.45845 49.509766 201.16797 L 49.509766 159.93945 C 49.509766 158.64897 49.508209 157.36275 50.785156 156.07227 C 52.06162 154.78662 53.340244 153.49609 54.617188 153.49609 L 89.091797 148.33594 C 91.645544 141.89377 94.200011 136.74004 96.753906 131.58594 C 92.923306 125.14377 86.537701 116.12363 77.599609 105.81641 C 76.322662 103.23835 76.322266 101.95454 76.322266 100.66406 C 76.322266 99.373581 76.322662 98.087357 77.599609 96.796875 C 80.153357 92.931288 86.538513 86.489941 95.476562 77.470703 C 103.13776 68.452977 109.52228 64.585938 112.07617 64.585938 C 113.35283 64.585938 115.90665 64.584518 117.18359 65.875 L 142.7207 85.203125 C 147.8282 82.627528 154.21281 80.050248 159.32031 78.759766 C 160.5974 62.009882 163.15079 50.414785 164.42773 43.972656 C 165.70459 40.109034 166.98019 38.818359 170.81055 38.818359 z M 192.51953 132.88086 C 179.75084 132.88086 168.25836 138.03545 159.32031 147.05469 C 150.38227 156.07385 145.27539 167.67039 145.27539 180.55469 C 145.27539 193.43898 150.38227 205.03353 159.32031 214.05273 C 168.25836 223.07144 179.75084 228.22656 192.51953 228.22656 C 205.28818 228.22656 216.77875 223.07144 225.7168 214.05273 C 234.65489 205.03353 239.76367 193.43898 239.76367 180.55469 C 239.76367 167.67039 234.65489 156.07385 225.7168 147.05469 C 216.77875 138.03545 205.28818 132.88086 192.51953 132.88086 z "
+       transform="matrix(0.26458333,0,0,0.26458333,0,197)" />
+  </g>
+</svg>
diff --git a/resources/svg/logout.svg b/resources/svg/logout.svg
new file mode 100644
index 0000000..93e1524
--- /dev/null
+++ b/resources/svg/logout.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
+    <title>Déconnexion</title>
+    <path d="M21 3h-3.8c-.7 0-1.3-.6-1.3-1.3S16.5.4 17.2.4h5.1c.7 0 1.3.6 1.3 1.3v20.5c0 .7-.6 1.3-1.3 1.3h-5.1c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3H21V3zm-6.9 7.7L8.6 5.2c-.5-.5-.6-1.3-.1-1.8s1.3-.5 1.8 0l7.7 7.7c.8.8.2 2.2-.9 2.2H1.8c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h12.3zm-1.6 4.8c.5-.5 1.3-.4 1.8.1s.4 1.3-.1 1.8l-3.8 3.2c-.5.5-1.3.4-1.8-.1-.6-.5-.5-1.3 0-1.7l3.9-3.3z"/>
+</svg>
diff --git a/resources/svg/memos.svg b/resources/svg/memos.svg
new file mode 100644
index 0000000..a301578
--- /dev/null
+++ b/resources/svg/memos.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 384 384"  class="fill-current site-logo">
+	<rect x="0" y="341.333" width="384" height="42.667"/>
+	<rect x="0" y="256" width="256" height="42.667"/>
+	<rect x="0" y="85.333" width="256" height="42.667"/>
+	<rect x="0" y="170.667" width="384" height="42.667"/>
+	<rect x="0" y="0" width="384" height="42.667"/>
+</svg>
diff --git a/resources/svg/params.svg b/resources/svg/params.svg
new file mode 100644
index 0000000..faa389a
--- /dev/null
+++ b/resources/svg/params.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current">
+                <title>Portal</title>
+                <path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>
+            </svg>
diff --git a/resources/svg/search.svg b/resources/svg/search.svg
new file mode 100644
index 0000000..5ed8a70
--- /dev/null
+++ b/resources/svg/search.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 515.558 515.558" xmlns="http://www.w3.org/2000/svg" class="fill-current site-logo">
+    <path d="m378.344 332.78c25.37-34.645 40.545-77.2 40.545-123.333 0-115.484-93.961-209.445-209.445-209.445s-209.444 93.961-209.444 209.445 93.961 209.445 209.445 209.445c46.133 0 88.692-15.177 123.337-40.547l137.212 137.212 45.564-45.564c0-.001-137.214-137.213-137.214-137.213zm-168.899 21.667c-79.958 0-145-65.042-145-145s65.042-145 145-145 145 65.042 145 145-65.043 145-145 145z"/>
+</svg>
diff --git a/webpack.mix.js b/webpack.mix.js
index 2295b53..afa1b25 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,13 +1,6 @@
 const mix = require('laravel-mix');
-
-require('laravel-mix-eslint');
+require('laravel-mix-svg-vue');
 
 mix.js('resources/js/app.js', 'public/js')
-    // .eslint({
-    //     enforce: 'pre',
-    //     test: /\.(js|vue)$/,
-    //     exclude: /node_modules/,
-    //     loader: 'eslint-loader',
-    //     options: {}
-    // })
+    .svgVue()
    .sass('resources/sass/app.scss', 'public/css');