refactor: migrate icons to lucide.dev

packages/hoppscotch-app/components/app/Footer.vue

@@ -143,7 +143,7 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
-            svg="sidebar"
+            svg="sidebar-open"
             class="transform"
             :class="{ 'rotate-180': !SIDEBAR }"
             @click.native="SIDEBAR = !SIDEBAR"

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -43,18 +43,18 @@
                 :title="$t('app.wiki')"
                 svg="help-circle"
               />
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.copy')"
-                :svg="`${copyQueryIcon}`"
-                @click.native="copyQuery"
-              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.prettify')"
                 :svg="`${prettifyQueryIcon}`"
                 @click.native="prettifyQuery"
               />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.copy')"
+                :svg="`${copyQueryIcon}`"
+                @click.native="copyQuery"
+              />
             </div>
           </div>
           <div ref="queryEditor"></div>
@@ -385,7 +385,7 @@ useCodemirror(queryEditor, gqlQueryString, {
 })
 
 const copyQueryIcon = ref("copy")
-const prettifyQueryIcon = ref("align-left")
+const prettifyQueryIcon = ref("wand")
 const copyVariablesIcon = ref("copy")
 
 const showSaveRequestModal = ref(false)
@@ -500,7 +500,7 @@ const prettifyQuery = () => {
     })
   }
   prettifyQueryIcon.value = "check"
-  setTimeout(() => (prettifyQueryIcon.value = "align-left"), 1000)
+  setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
 }
 
 const saveRequest = () => {

packages/hoppscotch-app/components/graphql/Response.vue

@@ -4,7 +4,7 @@
       v-if="responseString === 'loading'"
       class="flex flex-col p-4 items-center justify-center"
     >
-      <SmartSpinner class="mb-4" />
+      <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
     </div>
     <div v-else-if="responseString">

packages/hoppscotch-app/components/http/RawBody.vue

@@ -89,7 +89,7 @@ const {
 const t = i18n.t.bind(i18n)
 
 const rawParamsBody = pluckRef(useRESTRequestBody(), "body")
-const prettifyIcon = ref("align-left")
+const prettifyIcon = ref("wand")
 
 const rawInputEditorLang = computed(() =>
   getEditorLangForMimeType(props.contentType)
@@ -137,7 +137,7 @@ const prettifyRequestBody = () => {
     const jsonObj = JSON.parse(rawParamsBody.value)
     rawParamsBody.value = JSON.stringify(jsonObj, null, 2)
     prettifyIcon.value = "check"
-    setTimeout(() => (prettifyIcon.value = "align-left"), 1000)
+    setTimeout(() => (prettifyIcon.value = "wand"), 1000)
   } catch (e) {
     console.error(e)
     $toast.error(`${t("error.json_prettify_invalid_body")}`, {

packages/hoppscotch-app/components/http/Request.vue

@@ -99,7 +99,7 @@
           </template>
           <SmartItem
             :label="`${$t('import.curl')}`"
-            svg="terminal"
+            svg="file-code"
             @click.native="
               () => {
                 showCurlImportModal = !showCurlImportModal
@@ -109,7 +109,7 @@
           />
           <SmartItem
             :label="`${$t('show.code')}`"
-            svg="code"
+            svg="code-2"
             @click.native="
               () => {
                 showCodegenModal = !showCodegenModal

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -55,7 +55,7 @@
         v-if="response.type === 'loading'"
         class="flex flex-col items-center justify-center"
       >
-        <SmartSpinner class="mb-4" />
+        <SmartSpinner class="my-4" />
         <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
       </div>
       <div

packages/hoppscotch-app/components/smart/ChangeLanguage.vue

@@ -8,7 +8,7 @@
             :title="$t('settings.choose_language')"
             class="pr-8"
             outline
-            svg="globe"
+            svg="languages"
             :label="`${
               $i18n.locales.find(({ code }) => code == $i18n.locale).name
             }`"