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
-              :is="IconHelpCircle"
+            <icon-lucide-help-circle
               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>