chore: use auto-imported icons (#2998)

packages/hoppscotch-common/src/components/collections/index.vue

@@ -90,7 +90,7 @@
         '!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
       }"
     >
-      <component :is="IconListEnd" class="svg-icons !w-8 !h-8" />
+      <icon-lucide-list-end class="svg-icons !w-8 !h-8" />
     </div>
     <CollectionsAdd
       :show="showModalAdd"
@@ -221,7 +221,6 @@ import * as E from "fp-ts/Either"
 import { platform } from "~/platform"
 import { createCollectionGists } from "~/helpers/gist"
 import { workspaceStatus$ } from "~/newstore/workspace"
-import IconListEnd from "~icons/lucide/list-end"
 import {
   createNewTab,
   currentActiveTab,

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -42,7 +42,7 @@
                 class="flex p-4 bg-error text-secondaryDark"
                 role="alert"
               >
-                <component :is="IconAlertTriangle" class="mr-4 svg-icons" />
+                <icon-lucide-alert-triangle class="mr-4 svg-icons" />
                 <div class="flex flex-col">
                   <p>
                     {{ t("environment.no_environment_description") }}
@@ -220,7 +220,6 @@ import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconExternalLink from "~icons/lucide/external-link"
-import IconAlertTriangle from "~icons/lucide/alert-triangle"
 import IconCheck from "~icons/lucide/check"
 import IconClose from "~icons/lucide/x"
 

packages/hoppscotch-common/src/components/teams/Edit.vue

@@ -167,7 +167,7 @@
           v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
           class="flex flex-col items-center"
         >
-          <component :is="IconHelpCircle" class="mb-4 svg-icons" />
+          <icon-lucide-help-circle class="mb-4 svg-icons" />
           {{ t("error.something_went_wrong") }}
         </div>
       </div>
@@ -220,7 +220,6 @@ import IconCircleDot from "~icons/lucide/circle-dot"
 import IconCircle from "~icons/lucide/circle"
 import IconUserPlus from "~icons/lucide/user-plus"
 import IconUserMinus from "~icons/lucide/user-minus"
-import IconHelpCircle from "~icons/lucide/help-circle"
 
 const t = useI18n()
 const colorMode = useColorMode()

packages/hoppscotch-common/src/components/teams/Invite.vue

@@ -113,7 +113,7 @@
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
               class="flex flex-col items-center p-4"
             >
-              <component :is="IconHelpCircle" class="mb-4 svg-icons" />
+              <icon-lucide-help-circle class="mb-4 svg-icons" />
               {{ t("error.something_went_wrong") }}
             </div>
           </div>
@@ -248,8 +248,7 @@
           <span
             class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
           >
-            <component
+            <icon-lucide-help-circle
-              :is="IconHelpCircle"
               class="mr-2 text-secondaryLight svg-icons"
             />
             {{ t("profile.roles") }}
@@ -368,7 +367,6 @@ import { useColorMode } from "~/composables/theming"
 
 import IconTrash from "~icons/lucide/trash"
 import IconPlus from "~icons/lucide/plus"
-import IconHelpCircle from "~icons/lucide/help-circle"
 import IconAlertTriangle from "~icons/lucide/alert-triangle"
 import IconMailCheck from "~icons/lucide/mail-check"
 import IconCircleDot from "~icons/lucide/circle-dot"

packages/hoppscotch-common/src/components/teams/index.vue

@@ -47,7 +47,7 @@
         />
       </div>
       <div v-if="!loading && adapterError" class="flex flex-col items-center">
-        <component :is="IconHelpCircle" class="mb-4 svg-icons" />
+        <icon-lucide-help-circle class="mb-4 svg-icons" />
         {{ t("error.something_went_wrong") }}
       </div>
     </div>
@@ -82,8 +82,6 @@ import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 
-import IconHelpCircle from "~icons/lucide/help-circle"
-
 const t = useI18n()
 
 const colorMode = useColorMode()

packages/hoppscotch-common/src/components/workspace/Selector.vue

@@ -67,7 +67,7 @@
         v-if="!loading && teamListAdapterError"
         class="flex flex-col items-center py-4"
       >
-        <i class="mb-4 material-icons">help_outline</i>
+        <icon-lucide-help-circle class="mb-4 svg-icons" />
         {{ t("error.something_went_wrong") }}
       </div>
     </div>

packages/hoppscotch-sh-admin/src/components/teams/Invite.vue

@@ -131,10 +131,7 @@
           <span
             class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
           >
-            <component
+            <icon-lucide-help-circle class="mr-2 text-secondaryLight svg-icons" />
-              :is="IconHelpCircle"
-              class="mr-2 text-secondaryLight svg-icons"
-            />
             Roles
           </span>
           <p>
@@ -208,7 +205,6 @@ import { useMutation, useQuery } from '@urql/vue';
 import { Email, EmailCodec } from '~/helpers/backend/Email';
 import IconTrash from '~icons/lucide/trash';
 import IconPlus from '~icons/lucide/plus';
-import IconHelpCircle from '~icons/lucide/help-circle';
 import IconCircleDot from '~icons/lucide/circle-dot';
 import IconCircle from '~icons/lucide/circle';
 import { computed } from 'vue';

packages/hoppscotch-sh-admin/src/components/teams/Members.vue

@@ -133,7 +133,7 @@
         </div>
       </div>
       <div v-if="!fetching && !team" class="flex flex-col items-center">
-        <component :is="IconHelpCircle" class="mb-4 svg-icons" />
+        <icon-lucide-help-circle class="mb-4 svg-icons" />
         Something went wrong. Please try again later.
       </div>
     </div>
@@ -159,7 +159,6 @@ import IconCircleDot from '~icons/lucide/circle-dot';
 import IconCircle from '~icons/lucide/circle';
 import IconUserPlus from '~icons/lucide/user-plus';
 import IconUserMinus from '~icons/lucide/user-minus';
-import IconHelpCircle from '~icons/lucide/help-circle';
 import IconChevronDown from '~icons/lucide/chevron-down';
 import { useClientHandle, useMutation } from '@urql/vue';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue

@@ -44,7 +44,7 @@
         <span class="text-center"> No pending invites </span>
       </div>
       <div v-if="!fetching && error" class="flex flex-col items-center p-4">
-        <component :is="IconHelpCircle" class="mb-4 svg-icons" />
+        <icon-lucide-help-circle class="mb-4 svg-icons" />
         Something went wrong. Please try again later.
       </div>
     </div>
@@ -53,7 +53,6 @@
 
 <script setup lang="ts">
 import IconTrash from '~icons/lucide/trash';
-import IconHelpCircle from '~icons/lucide/help-circle';
 import { useMutation, useClientHandle } from '@urql/vue';
 import { ref, onMounted } from 'vue';
 import {

packages/hoppscotch-ui/src/components/smart/FileChip.vue

@@ -1,22 +1,6 @@
 <template>
-  <span class="chip">
+  <span class="inline-flex items-center justify-center rounded pl-2 pr-0.5 bg-primaryDark">
-    <component :is="IconFile" class="opacity-75 svg-icons" />
+    <icon-lucide-file class="opacity-75 svg-icons" />
     <span class="px-2 truncate max-w-54"><slot></slot></span>
   </span>
 </template>
-
-<script setup lang="ts">
-import IconFile from "~icons/lucide/file"
-</script>
-
-<style lang="scss" scoped>
-.chip {
-  @apply inline-flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply rounded;
-  @apply pl-2;
-  @apply pr-0.5;
-  @apply bg-primaryDark;
-}
-</style>