feat(ui): use hericons

frontend/components/Badge.vue

@@ -1,14 +1,5 @@
 <template>
-  <span class="inline-block px-2 space-x-1 text-white rounded">
-    <i v-if="props.icon" :class="props.icon" class="text-sm" />
-    <span><slot /></span>
+  <span class="inline-flex items-center gap-0.5 py-1 px-2 h-6 space-x-1 text-md text-white rounded">
+    <slot />
   </span>
 </template>
-
-<script setup lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  icon?: string
-}>()
-</script>

frontend/components/BadgeGroup.vue

@@ -1,7 +1,7 @@
 <template>
-  <span class="whitespace-nowrap">
-    {{ props.label }}
-    <span class="space-x-2">
+  <span class="whitespace-nowrap inline-flex items-center gap-2 leading-none">
+    <span v-if="props.label">{{ props.label }}</span>
+    <span class="inline-flex items-center space-x-2">
       <slot />
     </span>
   </span>

frontend/components/Home.vue

@@ -1,39 +1,29 @@
 <template>
   <div class="container min-h-screen p-6 mx-auto">
     <ul class="flex">
-      <div class="flex-1 space-x-6">
-        <router-link class="nav" :to="{ name: 'search' }">
-          <i class="nav-icon fas fa-search"></i>
-          <span>search</span>
-        </router-link>
-        <router-link class="nav" :to="{ name: 'settings' }">
-          <i class="nav-icon fas fa-cogs"></i>
-          <span>settings</span>
-        </router-link>
+      <div class="flex flex-1 space-x-6">
+        <nav-item :to="{ name: 'search' }">
+          <template v-slot:icon><search-icon class="h-5" /></template>
+          <template v-slot:name>search</template>
+        </nav-item>
+        <nav-item :to="{ name: 'settings' }">
+          <template v-slot:icon><cog-icon class="h-5" /></template>
+          <template v-slot:name>settings</template>
+        </nav-item>
       </div>
       <div class="sm:block hidden">
-        <router-link class="nav" :to="{ name: 'logout' }">
-          <i class="nav-icon fas fa-sign-out-alt"></i>
-          <span>logout</span>
-        </router-link>
+        <nav-item :to="{ name: 'logout' }">
+          <template v-slot:icon><logout-icon class="h-5" /></template>
+          <template v-slot:name>logout</template>
+        </nav-item>
       </div>
     </ul>
     <hr class="mt-3" />
     <router-view />
   </div>
 </template>
 
-<style scoped>
-.nav {
-  @apply text-gray-500;
-}
-.nav:hover {
-  @apply text-blue-400;
-}
-.nav-icon {
-  @apply mr-2;
-}
-.router-link-active {
-  @apply text-blue-500;
-}
-</style>
+<script setup lang="ts">
+import NavItem from './NavItem.vue'
+import { SearchIcon, CogIcon, LogoutIcon } from 'heroicons-vue3/outline'
+</script>

frontend/components/LoadingSpinner.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="flex items-center justify-center gap-2 p-3 text-gray-600 bg-gray-200 rounded">
-    <i class="animate-spin fas fa-circle-notch" />
+    <refresh-icon class="animate-spin h-5" />
     <span>{{ props.text || 'loading' }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineProps } from 'vue'
+import { RefreshIcon } from 'heroicons-vue3/outline'
 
 const props = defineProps<{
   text?: string

frontend/components/NavItem.vue

@@ -0,0 +1,6 @@
+<template>
+  <router-link class="hover:text-blue-400 flex items-center h-5 space-x-2 text-gray-500" active-class="text-blue-500">
+    <slot name="icon"></slot>
+    <span><slot name="name"></slot></span>
+  </router-link>
+</template>

frontend/components/Search.vue

@@ -39,13 +39,24 @@ import UploaderClipboard from './UploaderClipboard.vue'
 import UploaderFile from './UploaderFile.vue'
 
 import { watch, computed, onMounted, ref } from 'vue'
+import type { Component } from 'vue'
 import { useRoute } from 'vue-router'
 import { useDebounce } from '@vueuse/core'
 import { isError, SortOrder, reqDirectories, MediaType } from '../api'
 import type { PayloadSearch } from '../api'
 import useStore from '../composables/useStore'
 import useInfiniteScroll from '../composables/useInfiniteScroll'
 import useLoading from '../composables/useLoading'
+import {
+  SearchIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  DocumentDuplicateIcon,
+  CameraIcon,
+  VideoCameraIcon,
+  FolderAddIcon,
+  FolderIcon,
+} from 'heroicons-vue3/outline'
 
 const store = useStore()
 const route = useRoute()
@@ -58,24 +69,24 @@ const reqPageNum = ref(0)
 const reqQueryDebounced = useDebounce(reqQuery, 100)
 const reqPageSize = 25
 
-type Sort = { label: string; icon: string; field: string; order: SortOrder }
-const reqSortSimilarity: Sort = { label: 'similarity', icon: 'fas fa-search', field: 'similarity', order: SortOrder.Desc }
-const reqSortTimeDesc: Sort = { label: 'time desc', icon: 'fas fa-chevron-down', field: 'timestamp', order: SortOrder.Desc }
-const reqSortTimeAsc: Sort = { label: 'time asc', icon: 'fas fa-chevron-up', field: 'timestamp', order: SortOrder.Asc }
+type Sort = { label: string; icon: Component; field: string; order: SortOrder }
+const reqSortSimilarity: Sort = { label: 'similarity', icon: SearchIcon, field: 'similarity', order: SortOrder.Desc }
+const reqSortTimeDesc: Sort = { label: 'time desc', icon: ChevronDownIcon, field: 'timestamp', order: SortOrder.Desc }
+const reqSortTimeAsc: Sort = { label: 'time asc', icon: ChevronUpIcon, field: 'timestamp', order: SortOrder.Asc }
 const reqSortOptionsDefault = [reqSortTimeDesc, reqSortTimeAsc]
 const reqSortOptionsSimilarity = [reqSortSimilarity, reqSortTimeDesc, reqSortTimeAsc]
 const reqSortOptions = ref(reqSortOptionsDefault)
 const reqSortOption = ref(reqSortTimeDesc)
 
-type Dir = { label: string; icon: string; directory?: string }
-const reqDirAll: Dir = { label: 'all', icon: 'fas fa-asterisk' }
+type Dir = { label: string; icon: Component; directory?: string }
+const reqDirAll: Dir = { label: 'all', icon: DocumentDuplicateIcon }
 const reqDirOptions = ref([reqDirAll])
 const reqDirOption = ref(reqDirAll)
 
-type Media = { label: string; icon: string; media?: MediaType }
-const reqMediaAny: Media = { label: 'any', icon: 'fas fa-asterisk' }
-const reqMediaImage: Media = { label: 'image', icon: 'fas fa-image', media: MediaType.Image }
-const reqMediaVideo: Media = { label: 'video', icon: 'fas fa-video', media: MediaType.Video }
+type Media = { label: string; icon: Component; media?: MediaType }
+const reqMediaAny: Media = { label: 'any', icon: DocumentDuplicateIcon }
+const reqMediaImage: Media = { label: 'image', icon: CameraIcon, media: MediaType.Image }
+const reqMediaVideo: Media = { label: 'video', icon: VideoCameraIcon, media: MediaType.Video }
 const reqMediaOptions = ref([reqMediaAny, reqMediaImage, reqMediaVideo])
 const reqMediaOption = ref(reqMediaAny)
 
@@ -147,7 +158,7 @@ onMounted(async () => {
   for (const dir of resp.result) {
     reqDirOptions.value.push({
       label: dir.directory_alias,
-      icon: dir.is_uploads ? 'fas fa-folder-plus' : 'fas fa-folder',
+      icon: dir.is_uploads ? FolderAddIcon : FolderIcon,
       directory: dir.directory_alias,
     })
   }

frontend/components/SearchFilter.vue

@@ -21,10 +21,11 @@ import SearchFilterItem from './SearchFilterItem.vue'
 
 import { onClickOutside } from '@vueuse/core'
 import { defineProps, defineEmit, ref } from 'vue'
+import type { Component } from 'vue'
 
 interface Item {
   label: string
-  icon: string
+  icon: Component
 }
 
 const emit = defineEmit<(e: string, v: Item) => void>()

frontend/components/SearchFilterItem.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="padded w-full space-x-3 text-gray-800 cursor-pointer">
-    <i :class="props.icon"></i>
+  <div class="padded flex items-center w-full space-x-3 text-gray-800 cursor-pointer">
+    <component :is="props.icon" class="h-5" />
     <span class="select-none">{{ props.label }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineProps } from 'vue'
+import type { Component } from 'vue'
 
 const props = defineProps<{
   label: string
-  icon: string
+  icon: Component
 }>()
 </script>

frontend/components/SearchSidebarHeader.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex leading-normal">
+  <div class="flex items-center leading-normal">
     <!-- left -->
-    <router-link :to="{ name: 'search' }" class="flex-grow text-xl leading-none">
-      <i class="hover:text-gray-600 fas fa-times-circle text-gray-800"></i>
+    <router-link :to="{ name: 'search' }" class="flex-grow h-6 text-xl">
+      <x-icon class="hover:text-gray-600 h-full text-gray-800" />
     </router-link>
     <!-- right -->
-    <div v-if="media" class="md:flex-row flex flex-col items-end justify-end gap-6">
+    <div v-if="media" class="md:flex-row md:items-center flex flex-col items-end justify-end gap-6">
       <badge-group label="created">
         <badge class="text-pink-900 bg-pink-200" :title="media.timestamp">
           {{ timestampRelative }}
@@ -15,10 +15,12 @@
         <badge v-for="(dir, i) in media.directories" :key="i" class="text-blue-900 bg-blue-200">{{ dir }}</badge>
       </badge-group>
       <badge-group>
-        <badge class="text-indigo-900 bg-indigo-200" icon="fas fa-external-link-alt">
+        <badge class="text-indigo-900 bg-indigo-200">
+          <external-link-icon class="h-full" />
           <a :href="mediaRaw" target="_blank">raw</a>
         </badge>
-        <badge class="text-green-900 bg-green-200" icon="fas fa-external-link-alt">
+        <badge class="text-green-900 bg-green-200">
+          <external-link-icon class="h-full" />
           <router-link :to="{ name: 'public', params: { hash: media.hash } }">public</router-link>
         </badge>
       </badge-group>
@@ -34,6 +36,7 @@ import { computed, defineProps } from 'vue'
 import { urlMedia } from '../api/'
 import useStore from '../composables/useStore'
 import { useTimeAgo } from '@vueuse/core'
+import { XIcon, ExternalLinkIcon } from 'heroicons-vue3/outline'
 
 const props = defineProps<{
   hash: string

frontend/components/UploaderFile.vue

@@ -2,7 +2,7 @@
   <input class="hidden" ref="elm" type="file" accept="image/*, video/*" @change="select" />
   <div class="hover:opacity-100 padded fixed bottom-0 right-0 bg-gray-200 rounded-tl opacity-75">
     <div class="hover:text-gray-900 hover:cursor-pointer flex items-center gap-2 text-gray-600" @click="click">
-      <i class="fas fa-upload text-sm"></i>
+      <upload-icon class="h-5" />
       <span>upload or paste file</span>
     </div>
   </div>
@@ -16,6 +16,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { isError, reqUpload } from '../api'
 import useLoading from '../composables/useLoading'
+import { UploadIcon } from 'heroicons-vue3/outline'
 
 const router = useRouter()
 const { loading, load } = useLoading(reqUpload)

frontend/main.css

@@ -1,6 +1,3 @@
-@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
-@import "@fortawesome/fontawesome-free/css/solid.min.css";
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package.json

@@ -8,7 +8,6 @@
     "check-formatting": "prettier --check $(git ls-files | grep -E '.(ts|vue|js|json)$')"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.3",
     "@vueuse/core": "^5.0.3",
     "vue": "^3.1.1",
     "vue-router": "^4.0.8"
@@ -17,6 +16,7 @@
     "@vitejs/plugin-vue": "^1.2.3",
     "@vue/compiler-sfc": "^3.1.1",
     "autoprefixer": "^10.2.6",
+    "heroicons-vue3": "^1.0.1",
     "postcss": "^8.3.5",
     "prettier": "^2.3.1",
     "prettier-plugin-tailwind-css": "^1.5.0",

tsconfig.json

@@ -12,7 +12,8 @@
     "types": ["vite/client"],
     "noImplicitAny": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true
+    "noUnusedParameters": true,
+    "skipLibCheck": true
   },
   "include": ["frontend/**/*.ts", "frontend/**/*.d.ts", "frontend/**/*.tsx", "frontend/**/*.vue"]
 }