Add SvgIcon component

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

src/components/svg-icon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :fill="fillColor" height="100%" viewBox="0 -960 960 960" width="100%">
+    <path v-if="icon == 'image'" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/>
+    <path v-else-if="icon == 'videocam'" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Zm0-80h480v-480H160v480Zm0 0v-480 480Z"/>
+    <path v-else-if="icon == 'visibility'" d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/>
+  </svg>
+</template>
+  
+<script>
+  export default {
+    name: "SvgIcon",
+    props: {
+      icon: {
+        type: String,
+        validator(value) {
+          return ['image','videocam','visibility'].includes(value)
+        }
+      },
+      fillColor: {
+        type: String,
+        default: "#002F65"
+      }
+    }
+  }
+</script>

src/pages/detect.vue

@@ -10,7 +10,7 @@
     <f7-block class="detect-grid">
       <div class="image-container">
         <img v-if="imageView" :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
-        <img v-else src="../assets/icons/image.svg" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
+        <SvgIcon v-else icon="image" fill-color="var(--f7-theme-color)"/>
         <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none; box-sizing: border-box;" />
       </div>
       <div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -21,13 +21,13 @@
           <RegionIcon :region="activeRegion" fill-color="var(--f7-theme-color)"/>
         </f7-button>
         <f7-button @click="selectImage">
-          <img src="../assets/icons/image.svg" />
+          <SvgIcon icon="image" fill-color="var(--f7-theme-color)"/>
         </f7-button>
         <f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
-          <img src="../assets/icons/visibility.svg" />
+          <SvgIcon icon="visibility" fill-color="var(--f7-theme-color)"/>
         </f7-button>
         <f7-button class="disabled" @click="setData">
-          <img src="../assets/icons/videocam.svg" />
+          <SvgIcon icon="videocam" fill-color="var(--f7-theme-color)"/>
         </f7-button>
       </f7-segmented>
       <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
@@ -190,13 +190,15 @@
   import { f7 } from 'framework7-vue'
 
   import RegionIcon from '../components/region-icon.vue'
+  import SvgIcon from '../components/svg-icon.vue'
 
   export default {
     props: {
       f7route: Object,
     },
     components: {
-      RegionIcon
+      RegionIcon,
+      SvgIcon
     },
     data () {
       return {