💄 (app) add svg

src/components/IntervalInput.vue

@@ -1,8 +1,41 @@
 <template>
   <div class="interval-input">
-    <button v-show="editable" @click="minus">-</button>
+    <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">+</button>
+    <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>
   </div>
 </template>
 

src/styles/app.scss

@@ -36,3 +36,12 @@ button:active {
 .pretty {
   font-size: 16pt;
 }
+
+button {
+  margin: 0 1rem;
+  padding: 0;
+
+  svg {
+    margin: 0.5rem;
+  }
+}

src/views/Home.vue

@@ -15,7 +15,7 @@
           height="44"
           viewBox="0 0 24 24"
           stroke-width="1.5"
-          stroke="#2c3e50"
+          stroke="#2c3a47"
           fill="none"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -32,7 +32,7 @@
           height="44"
           viewBox="0 0 24 24"
           stroke-width="1.5"
-          stroke="#2c3e50"
+          stroke="#2c3a47"
           fill="none"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -50,7 +50,7 @@
           height="44"
           viewBox="0 0 24 24"
           stroke-width="1.5"
-          stroke="#2c3e50"
+          stroke="#2c3a47"
           fill="none"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -123,11 +123,6 @@ export default defineComponent({
   flex-wrap: wrap;
 }
 
-button {
-  margin: 0 1rem;
-  padding: 0;
-}
-
 .global-time {
   font-size: calc(3em + 10vw);
 }