💫 (button) add animation

src/views/Home.vue

@@ -17,57 +17,24 @@
     </section>
     <div class="global-time">{{ time }}</div>
     <div class="actions">
-      <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="#2c3a47"
-          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 @click="toggle">
+        <transition name="fade" mode="out-in">
+          <img
+            key="play"
+            v-if="timeState === 'stopped'"
+            src="@/assets/play.svg"
+            alt="play"
+          />
+          <img
+            key="pause"
+            v-if="timeState === 'started'"
+            src="@/assets/pause.svg"
+            alt="pause"
+          />
+        </transition>
       </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="#2c3a47"
-          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="#2c3a47"
-          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 @click="clear">
+        <img src="@/assets/stop.svg" alt="stop" />
       </button>
     </div>
     <ZoneMusic
@@ -120,8 +87,13 @@ export default defineComponent({
       isDev1Turn
     } = useTimer()
 
+    const toggle = () => {
+      timeState.value === 'stopped' ? start() : pause()
+    }
+
     return {
       interval,
+      toggle,
       start,
       pause,
       clear,
@@ -168,4 +140,11 @@ footer {
   font-style: italic;
   font-size: 1rem;
 }
+
+$button-size: 44px;
+
+button {
+  width: $button-size;
+  height: $button-size;
+}
 </style>