dependencies: using @heroicons/vue for icons instead of svgs directly

Author: craftamap

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@cfworker/json-schema": "^1.12.0",
+    "@heroicons/vue": "^1.0.6",
     "typescript": "^4.5.5",
     "urlcat": "^2.0.4",
     "vue": "^3.2.29",

src/options/OptionView.vue

@@ -100,12 +100,15 @@
         >
         <LoadingIcon
           v-if="displayLoading"
+          class="icon"
         />
         <ErrorIcon
           v-if="displayError"
+          class="icon"
         />
         <SuccessIcon
           v-if="displaySuccess"
+          class="icon"
         />
       </div>
     </form>

src/popup/App.vue

@@ -64,5 +64,4 @@ export default {
 		color: white;
 	}
 }
-
 </style>

src/popup/components/AddBar.vue

@@ -13,6 +13,7 @@
     <div class="icons">
       <AddIcon
         v-if="displayButton"
+        class="icon"
         @click="submit"
       />
       <LoadingIcon
@@ -32,7 +33,7 @@
 import LoadingIcon from '../../shared/components/icons/LoadingIcon.vue'
 import SuccessIcon from '../../shared/components/icons/SuccessIcon.vue'
 import ErrorIcon from '../../shared/components/icons/ErrorIcon.vue'
-import AddIcon from './icons/AddIcon.vue'
+import { PlusIcon } from '@heroicons/vue/solid'
 import { useStore } from 'vuex'
 import { computed, ref } from 'vue'
 
@@ -42,7 +43,7 @@ export default {
 		LoadingIcon,
 		ErrorIcon,
 		SuccessIcon,
-		AddIcon,
+		AddIcon: PlusIcon,
 	},
 	setup () {
 		const store = useStore()
@@ -102,6 +103,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 0;
 }
 
 input.add-url {

src/popup/components/IconBar.vue

@@ -15,35 +15,37 @@
     </div>
     <div id="center">
       <RefreshIcon
+        class="icon icon-big icon-pointer"
+        :is-loading="isLoading"
         @click="refresh"
       />
     </div>
     <div id="right">
-      <AddIcon
-        class="add-icon-big"
+      <PlusIcon
+        class="icon icon-big"
         @click="toggleShowAddBar"
       />
       <CogWheelIcon
+        class="icon icon-big"
         @click="openSettingsPage"
       />
     </div>
   </div>
 </template>
 
 <script>
-import AddIcon from './icons/AddIcon.vue'
+import { PlusIcon, CogIcon } from '@heroicons/vue/solid'
 import RefreshIcon from './icons/RefreshIcon.vue'
-import CogWheelIcon from './icons/CogWheelIcon.vue'
 import browser from 'webextension-polyfill'
 import { useStore } from 'vuex'
 import { computed } from 'vue'
 
 export default {
 	name: 'IconBar',
 	components: {
-		AddIcon,
+		PlusIcon,
 		RefreshIcon,
-		CogWheelIcon,
+		CogWheelIcon: CogIcon,
 	},
 	setup () {
 		const store = useStore()
@@ -86,6 +88,10 @@ export default {
   border-radius: 0.25rem;
   align-items: center;
 
+  #left, #center, #right {
+	line-height: 0;
+  }
+
   div#left {
     justify-self: start;
   }

src/popup/components/InstanceItem.vue

@@ -37,15 +37,15 @@
               class="instance-icon-bar-viewers"
               title="current number of viewers"
             >
-              <ViewerIcon />
+              <UsersIcon class="icon" />
               {{ instance.viewer }}
             </div>
             <div
               v-if="instance.online"
               class="instance-icon-bar-uptime"
               title="uptime"
             >
-              <UptimeIcon />
+              <ClockIcon class="icon" />
               {{ instance.onlineSince.hour }}h {{ instance.onlineSince.minute }}m
             </div>
           </div>
@@ -65,7 +65,8 @@
       class="instance-hidden-icon-bar"
     >
       <div class="instance-icon-bar-remove">
-        <RemoveIcon
+        <TrashIcon
+          class="icon"
           @click="toggleRemove"
         />
       </div>
@@ -86,19 +87,17 @@
 
 <script>
 import stripHtml from '../../shared/util/stripHtml'
-import ViewerIcon from './icons/ViewerIcon.vue'
-import UptimeIcon from './icons/UptimeIcon.vue'
-import RemoveIcon from './icons/RemoveIcon.vue'
+import { UsersIcon, ClockIcon, TrashIcon } from '@heroicons/vue/solid'
 import ChevronIcon from './icons/ChevronIcon.vue'
 import { ref, toRefs, computed } from 'vue'
 import { useStore } from 'vuex'
 
 export default {
 	name: 'InstanceItem',
 	components: {
-		ViewerIcon,
-		UptimeIcon,
-		RemoveIcon,
+		UsersIcon,
+		ClockIcon,
+		TrashIcon,
 		ChevronIcon,
 	},
 	props: {

src/popup/components/icons/AddIcon.vue

@@ -1,37 +1,24 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="chevron-icon"
+  <Chevron
+    class="icon chevron-icon"
     :class="`chevron-icon-${orientation}`"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    @click="emitClick"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-      clip-rule="evenodd"
-    />
-  </svg>
+  />
 </template>
 
 <script>
+import { ChevronDownIcon } from '@heroicons/vue/solid'
+
 export default {
 	name: 'ChevronIcon',
+	components: {
+		Chevron: ChevronDownIcon,
+	},
 	props: {
 		orientation: {
 			type: String,
 			default: 'down',
 		},
 	},
-	emits: [
-		'click',
-	],
-	methods: {
-		emitClick () {
-			this.$emit('click')
-		},
-	},
 }
 </script>
 

src/popup/components/icons/ChevronIcon.vue

@@ -1,44 +1,24 @@
 <template>
-  <svg
-    id="refresh"
-    class="refresh-icon"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="currentColor"
+  <Refresh
     :class="{'animate-spin':isLoading }"
-    @click="emitClick"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-      clip-rule="evenodd"
-    />
-  </svg>
+  />
 </template>
 
 <script>
+import { RefreshIcon } from '@heroicons/vue/solid'
+
 export default {
 	name: 'RefreshIcon',
-	emits: [
-		'click',
-	],
-	methods: {
-		emitClick () {
-			this.$emit('click')
-		},
+	components: {
+		Refresh: RefreshIcon,
 	},
+	props: { isLoading: Boolean },
 }
 </script>
 
 <style lang="scss">
-    /* class="w-6 h-6 cursor-pointer" */
-.refresh-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  cursor: pointer;
-}
 
-.refresh-icon.animate-spin {
+.animate-spin {
 	animation: spin 1s linear infinite;
 }