💫 (interval) add animation to plus and minus

src/components/IntervalInput.vue

@@ -1,41 +1,18 @@
 <template>
   <div class="interval-input">
-    <button v-show="editable" @click="minus">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-minus"
-        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="5" y1="12" x2="19" y2="12" />
-      </svg>
-    </button>
-    <h2>{{ label }}</h2>
-    <button v-show="editable" @click="plus">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-plus"
-        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="12" y1="5" x2="12" y2="19" />
-        <line x1="5" y1="12" x2="19" y2="12" />
-      </svg>
-    </button>
+    <transition name="fade" mode="out-in">
+      <button v-show="editable" @click="minus">
+        <img key="minus" src="@/assets/minus.svg" alt="minus" />
+      </button>
+    </transition>
+    <transition name="fade" mode="out-in">
+      <h2>{{ label }}</h2>
+    </transition>
+    <transition name="fade" mode="out-in">
+      <button v-show="editable" @click="plus">
+        <img key="plus" src="@/assets/plus.svg" alt="plus" />
+      </button>
+    </transition>
   </div>
 </template>
 
@@ -48,18 +25,16 @@ export default defineComponent({
   props: {
     editable: { type: Boolean, required: true }
   },
-  setup(props) {
+  setup() {
     const { interval, minInterval, minus, plus } = useInterval()
 
     const label = computed(() => {
       if (interval.value > 1) {
-        return props.editable
-          ? `${interval.value} minutes`
-          : `${interval.value} minute session`
+        return `${interval.value} minute session`
       }
 
       if (interval.value === minInterval) {
-        return props.editable ? '30 seconds' : '30 second session'
+        return '30 second session'
       }
 
       return `${interval.value} minute`