From 2f1f36997e546b7da5c1eaa1b1e0218c2f83e4af Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Fri, 8 Nov 2019 16:08:45 +0100
Subject: [PATCH] refactor: move some icons in SvgContainer component

---
 client/src/components/SVGContainer.vue        |  2 +
 .../src/components/Summoner/SummonerMates.vue | 40 +++++--------------
 .../src/components/Summoner/SummonerStats.vue | 31 ++------------
 3 files changed, 15 insertions(+), 58 deletions(-)

diff --git a/client/src/components/SVGContainer.vue b/client/src/components/SVGContainer.vue
index 8193ebc..ff8332f 100644
--- a/client/src/components/SVGContainer.vue
+++ b/client/src/components/SVGContainer.vue
@@ -1,5 +1,7 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" class="hidden">
+    <symbol id="people" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /> <circle cx="9" cy="7" r="4" /> <path d="M23 21v-2a4 4 0 0 0-3-3.87" /> <path d="M16 3.13a4 4 0 0 1 0 7.75" /> </symbol>
+    <symbol id="graph" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="20" x2="18" y2="10" /> <line x1="12" y1="20" x2="12" y2="4" /> <line x1="6" y1="20" x2="6" y2="14" /> </symbol>
     <symbol id="info" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></symbol>
     <symbol id="award" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M97.12 362.63c-8.69-8.69-4.16-6.24-25.12-11.85-9.51-2.55-17.87-7.45-25.43-13.32L1.2 448.7c-4.39 10.77 3.81 22.47 15.43 22.03l52.69-2.01L105.56 507c8 8.44 22.04 5.81 26.43-4.96l52.05-127.62c-10.84 6.04-22.87 9.58-35.31 9.58-19.5 0-37.82-7.59-51.61-21.37zM382.8 448.7l-45.37-111.24c-7.56 5.88-15.92 10.77-25.43 13.32-21.07 5.64-16.45 3.18-25.12 11.85-13.79 13.78-32.12 21.37-51.62 21.37-12.44 0-24.47-3.55-35.31-9.58L252 502.04c4.39 10.77 18.44 13.4 26.43 4.96l36.25-38.28 52.69 2.01c11.62.44 19.82-11.27 15.43-22.03zM263 340c15.28-15.55 17.03-14.21 38.79-20.14 13.89-3.79 24.75-14.84 28.47-28.98 7.48-28.4 5.54-24.97 25.95-45.75 10.17-10.35 14.14-25.44 10.42-39.58-7.47-28.38-7.48-24.42 0-52.83 3.72-14.14-.25-29.23-10.42-39.58-20.41-20.78-18.47-17.36-25.95-45.75-3.72-14.14-14.58-25.19-28.47-28.98-27.88-7.61-24.52-5.62-44.95-26.41-10.17-10.35-25-14.4-38.89-10.61-27.87 7.6-23.98 7.61-51.9 0-13.89-3.79-28.72.25-38.89 10.61-20.41 20.78-17.05 18.8-44.94 26.41-13.89 3.79-24.75 14.84-28.47 28.98-7.47 28.39-5.54 24.97-25.95 45.75-10.17 10.35-14.15 25.44-10.42 39.58 7.47 28.36 7.48 24.4 0 52.82-3.72 14.14.25 29.23 10.42 39.59 20.41 20.78 18.47 17.35 25.95 45.75 3.72 14.14 14.58 25.19 28.47 28.98C104.6 325.96 106.27 325 121 340c13.23 13.47 33.84 15.88 49.74 5.82a39.676 39.676 0 0 1 42.53 0c15.89 10.06 36.5 7.65 49.73-5.82zM97.66 175.96c0-53.03 42.24-96.02 94.34-96.02s94.34 42.99 94.34 96.02-42.24 96.02-94.34 96.02-94.34-42.99-94.34-96.02z"></path></symbol>
     <symbol id="gold" class="fill-current" viewBox="0 0 15 15" fill="fill-current"><title>gold</title><path d="M14 5.63324C14 3.57057 11.7157 1.8999 8.89286 1.8999C6.07 1.8999 3.78571 3.57057 3.78571 5.63324C3.7765 5.76685 3.7765 5.90095 3.78571 6.03457C2.12357 6.65057 1 7.90124 1 9.36657C1 11.4292 3.28429 13.0999 6.10714 13.0999C8.93 13.0999 11.2143 11.4292 11.2143 9.36657C11.2235 9.23295 11.2235 9.09885 11.2143 8.96524C12.8486 8.34924 14 7.08924 14 5.63324ZM6.10714 11.3172C4.315 11.3172 2.85714 10.2999 2.85714 8.94657C2.90787 8.55215 3.06303 8.17865 3.3064 7.86507C3.54978 7.55149 3.87244 7.30934 4.24071 7.1639C4.77538 7.8881 5.47991 8.46817 6.29158 8.85247C7.10324 9.23677 7.99686 9.41338 8.89286 9.36657H9.30143C9.03214 10.4679 7.71357 11.3172 6.10714 11.3172Z" /></symbol>
diff --git a/client/src/components/Summoner/SummonerMates.vue b/client/src/components/Summoner/SummonerMates.vue
index 1f28b27..19d8c3e 100644
--- a/client/src/components/Summoner/SummonerMates.vue
+++ b/client/src/components/Summoner/SummonerMates.vue
@@ -2,38 +2,12 @@
   <div class="mt-4 bg-blue-800 rounded-lg">
     <div class="pb-2">
       <div class="flex items-center justify-center py-4 heading rounded-t-lg text-blue-200">
-        <svg
-          class="w-5 h-5"
-          style="transform: rotate(-5deg);"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-          <circle cx="9" cy="7" r="4" />
-          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        <svg class="w-5 h-5" style="transform: rotate(-5deg);">
+          <use xlink:href="#people" />
         </svg>
         <span class="mx-4 text-lg font-bold uppercase">FRIENDS</span>
-        <svg
-          class="w-5 h-5"
-          style="transform: rotate(5deg);"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-          <circle cx="9" cy="7" r="4" />
-          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        <svg class="w-5 h-5" style="transform: rotate(5deg);">
+          <use xlink:href="#people" />
         </svg>
       </div>
       <div v-if="hasMates" class="px-4 py-2 text-sm text-left">
@@ -43,7 +17,11 @@
           <div class="w-1/4">Winrate</div>
         </div>
         <ul class="mt-1 text-gray-100">
-          <li v-for="mate in mates.slice(0, maxMates)" :key="mate.name" class="flex justify-between items-center">
+          <li
+            v-for="mate in mates.slice(0, maxMates)"
+            :key="mate.name"
+            class="flex justify-between items-center"
+          >
             <router-link
               :to="{ name: 'summoner', params: { region: $route.params.region, name: mate.name }}"
               class="w-2/4 hover:text-teal-200"
diff --git a/client/src/components/Summoner/SummonerStats.vue b/client/src/components/Summoner/SummonerStats.vue
index a1cd0e9..328da1a 100644
--- a/client/src/components/Summoner/SummonerStats.vue
+++ b/client/src/components/Summoner/SummonerStats.vue
@@ -2,35 +2,12 @@
   <div class="bg-blue-800 rounded-lg">
     <div class="pb-2">
       <div class="relative flex justify-center py-4 heading rounded-t-lg text-blue-200">
-        <svg
-          class="w-6 h-6"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="18" y1="20" x2="18" y2="10" />
-          <line x1="12" y1="20" x2="12" y2="4" />
-          <line x1="6" y1="20" x2="6" y2="14" />
+        <svg class="w-6 h-6">
+          <use xlink:href="#graph" />
         </svg>
         <span class="mx-4 text-lg font-bold uppercase">STATS</span>
-        <svg
-          class="w-6 h-6"
-          style="transform: scaleX(-1);"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="18" y1="20" x2="18" y2="10" />
-          <line x1="12" y1="20" x2="12" y2="4" />
-          <line x1="6" y1="20" x2="6" y2="14" />
+        <svg class="w-6 h-6" style="transform: scaleX(-1);">
+          <use xlink:href="#graph" />
         </svg>
         <div class="absolute right-0 top-0 mt-3 mr-2">
           <Dropdown>