feat: use custom SVGs

components/TimekeepingInstrument.vue

@@ -21,10 +21,30 @@
         {{ interval }} seconds
       </span>
     </div>
-    <img
-      src="https://freesvg.org/img/johnny_automatic_hourglass.png"
-      class="pt-8 pb-3"
-    />
+    <div
+      class="frame pt-5 m-4"
+      :class="`text-${$store.getters.activeTab.darkColor}`"
+    >
+      <atlantean-clock-image v-if="process.instrument === 'Atlantean Clock'" />
+      <sundail-image v-if="process.instrument === 'Sundial'" />
+      <star-chart-image v-if="process.instrument === 'Star Chart'" />
+      <incense-clock-image v-if="process.instrument === 'Incense Clock'" />
+      <astrolabe-image v-if="process.instrument === 'Astrolabe'" />
+      <hourglass-image v-if="process.instrument === 'Hourglass'" />
+
+      <mechanical-clock-image
+        v-if="process.instrument === 'Mechanical Clock'"
+      />
+
+      <pocket-watch-image v-if="process.instrument === 'Pocket Watch'" />
+      <digital-clock-image v-if="process.instrument === 'Electric Clock'" />
+      <atomic-clock-image v-if="process.instrument === 'Atomic Clock'" />
+      <quantum-clock-image v-if="process.instrument === 'Quantum Clock'" />
+      <pulsar-clock-image v-if="process.instrument === 'Pulsar Clock'" />
+      <non-euclidian-clock-image
+        v-if="process.instrument === 'Non-Euclidian Clock'"
+      />
+    </div>
     <p
       class="text-center text-sm font-semibold h-5 border-t"
       :class="`border-${$store.getters.activeTab.darkColor}`"
@@ -35,7 +55,36 @@
 </template>
 
 <script>
+import AstrolabeImage from './svg/AstrolabeImage.vue'
+import AtlanteanClockImage from './svg/AtlanteanClockImage.vue'
+import AtomicClockImage from './svg/AtomicClockImage.vue'
+import DigitalClockImage from './svg/DigitalClockImage.vue'
+import HourglassImage from './svg/HourglassImage.vue'
+import IncenseClockImage from './svg/IncenseClockImage.vue'
+import MechanicalClockImage from './svg/MechanicalClockImage.vue'
+import NonEuclidianClockImage from './svg/NonEuclidianClockImage.vue'
+import PocketWatchImage from './svg/PocketWatchImage.vue'
+import PulsarClockImage from './svg/PulsarClockImage.vue'
+import QuantumClockImage from './svg/QuantumClockImage.vue'
+import StarChartImage from './svg/StarChartImage.vue'
+import SundailImage from './svg/SundailImage.vue'
+
 export default {
+  components: {
+    HourglassImage,
+    MechanicalClockImage,
+    PocketWatchImage,
+    IncenseClockImage,
+    PulsarClockImage,
+    AstrolabeImage,
+    AtomicClockImage,
+    StarChartImage,
+    SundailImage,
+    DigitalClockImage,
+    QuantumClockImage,
+    AtlanteanClockImage,
+    NonEuclidianClockImage,
+  },
   props: {
     process: { type: Object, required: true },
   },
@@ -51,8 +100,9 @@ export default {
 </script>
 
 <style scoped>
-img {
-  aspect-ratio: 1/1;
+.frame >>> svg {
+  fill: currentColor;
+  stroke: currentColor;
 }
 /* progress for all browsers */
 progress::-webkit-progress-bar {