From 3b902f5ad0969c18abbafe4ba252baa7cae3e0dc Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 12 Jul 2020 22:27:18 +0200
Subject: [PATCH] :bento: (buttons) add icons

---
 src/views/Home.vue | 56 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8286709..a7b59e2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -7,9 +7,58 @@
     </section>
     <div class="global-time">{{ time }}</div>
     <div class="actions">
-      <button v-show="timeState === 'stopped'" @click="start">start</button>
-      <button v-show="timeState === 'started'" @click="pause">pause</button>
-      <button v-show="timeState === 'started'" @click="clear">stop</button>
+      <button v-show="timeState === 'stopped'" @click="start">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon icon-tabler icon-tabler-caret-right"
+          width="44"
+          height="44"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="#2c3e50"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" />
+          <path d="M18 15l-6-6l-6 6h12" transform="rotate(90 12 12)" />
+        </svg>
+      </button>
+      <button v-show="timeState === 'started'" @click="pause">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon icon-tabler icon-tabler-arrow-bar-right"
+          width="44"
+          height="44"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="#2c3e50"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" />
+          <line x1="8" y1="4" x2="8" y2="20" />
+          <line x1="16" y1="4" x2="16" y2="20" />
+        </svg>
+      </button>
+      <button v-show="timeState === 'started'" @click="clear">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon icon-tabler icon-tabler-square"
+          width="44"
+          height="44"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="#2c3e50"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" />
+          <rect x="4" y="4" width="16" height="16" rx="2" />
+        </svg>
+      </button>
     </div>
     <ZoneMusic
       class="music"
@@ -76,6 +125,7 @@ export default defineComponent({
 
 button {
   margin: 0 1rem;
+  padding: 0;
 }
 
 .global-time {