refactor: ⚡ Ditch nuxt-icon in favour of iconify's native WebComponent

Author: CPlusPatch

app.vue

@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { convert } from "html-to-text";
+import "iconify-icon";
 // Use SSR-safe IDs for Headless UI
 provideHeadlessUseId(() => useId());
 

bun.lockb

@@ -1,15 +1,15 @@
 <template>
     <ButtonsBase
         class="bg-white/10 hover:bg-white/20 !text-left flex flex-row gap-x-3 !rounded-none !ring-0 !p-4 sm:!p-3">
-        <Icon :name="icon" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+        <iconify-icon :icon="icon" width="1.25rem" height="1.25rem" class="text-gray-200" aria-hidden="true" />
         <slot />
     </ButtonsBase>
 </template>
 
 <script lang="ts" setup>
 import type { ButtonHTMLAttributes } from "vue";
 
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
 
 defineProps<
     Props & {

components/buttons/DropdownElement.vue

@@ -2,7 +2,7 @@
     <button v-bind="$props" type="button" :disabled="loading"
         :class="['rounded-md duration-200 relative hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm', loading && '[&>*]:invisible']">
         <div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible">
-            <Icon name="tabler:loader-2" class="animate-spin w-5 h-5" />
+            <iconify-icon icon="tabler:loader-2" height="1.25rem" width="1.25rem" class="animate-spin" />
         </div>
         <slot />
     </button>
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import type { ButtonHTMLAttributes } from "vue";
 
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
 
 defineProps<
     Props & {

components/buttons/base.vue

@@ -3,11 +3,13 @@
         <div class="py-2 relative">
             <div v-if="respondingTo" class="mb-4">
                 <span v-if="respondingType === 'reply'" class="text-gray-400 uppercase text-xs font-semibold">
-                    <Icon name="tabler:arrow-back-up" class="h-4 w-4 text-gray-400 mb-0.5" aria-hidden="true" />
+                    <iconify-icon width="1rem" height="1rem" icon="tabler:arrow-back-up" class="text-gray-400 mb-0.5"
+                        aria-hidden="true" />
                     Replying to
                 </span>
                 <span v-else-if="respondingType === 'quote'" class="text-gray-400 uppercase text-xs font-semibold">
-                    <Icon name="tabler:quote" class="h-4 w-4 text-gray-400" aria-hidden="true" />
+                    <iconify-icon width="1rem" height="1rem" icon="tabler:quote" class="text-gray-400"
+                        aria-hidden="true" />
                     Quoting
                 </span>
                 <OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto">
@@ -28,22 +30,23 @@
         </div>
         <div class="flex flex-row gap-1 border-white/20">
             <ComposerButton title="Mention someone">
-                <Icon name="tabler:at" class="size-6" aria-hidden="true" />
+                <iconify-icon height="1.5rem" width="1.5rem" icon="tabler:at" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown">
-                <Icon :name="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem"
+                    :icon="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Use a custom emoji">
-                <Icon name="tabler:mood-smile" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:mood-smile" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Add media">
-                <Icon name="tabler:photo-up" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:photo-up" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Add a file">
-                <Icon name="tabler:file-upload" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:file-upload" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Add content warning" @click="cw = cw === null ? '' : null" :toggled="cw !== null">
-                <Icon name="tabler:rating-18-plus" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:rating-18-plus" aria-hidden="true" />
             </ComposerButton>
             <ButtonsPrimary :loading="submitting" @click="send" class="ml-auto rounded-full">
                 <span>Send!</span>

components/composer/composer.vue

@@ -23,7 +23,7 @@
                     class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
                     @click="mobileMenuOpen = true">
                     <span class="sr-only">Open main menu</span>
-                    <Icon name="tabler:menu-2" class="h-6 w-6" aria-hidden="true" />
+                    <iconify-icon icon="tabler:menu-2" width="1.5rem" height="1.5rem" aria-hidden="true" />
                 </button>
             </div>
             <div class="hidden lg:flex lg:gap-x-12">
@@ -45,7 +45,7 @@
                     </NuxtLink>
                     <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-200" @click="mobileMenuOpen = false">
                         <span class="sr-only">Close menu</span>
-                        <Icon name="tabler:x" class="h-6 w-6" aria-hidden="true" />
+                        <iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" aria-hidden="true" />
                     </button>
                 </div>
                 <div class="mt-6 flow-root">

components/headers/navbar.vue

@@ -7,7 +7,7 @@
         </OverlayScrollbarsComponent>
         <button @click="open = !open"
             class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
-            <Icon name="tabler:chevron-right"
+            <iconify-icon icon="tabler:chevron-right"
                 :class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
                 aria-hidden="true" />
         </button>

components/sidebars/collapsible-aside.vue

@@ -13,7 +13,7 @@
                 <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
                     <ButtonsBase
                         class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                        <Icon :name="timeline.icon" class="shrink-0 text-2xl" />
+                        <iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
                         <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
                     </ButtonsBase>
                 </NuxtLink>
@@ -27,18 +27,18 @@
                 <ButtonsBase v-if="tokenData" @click="signOut().finally(() => loadingAuth = false)"
                     :loading="loadingAuth"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:logout" class="shrink-0 text-2xl" />
+                    <iconify-icon icon="tabler:logout" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Sign Out</span>
                 </ButtonsBase>
                 <ButtonsBase v-else @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:login" class="shrink-0 text-2xl" />
+                    <iconify-icon icon="tabler:login" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Sign In</span>
                 </ButtonsBase>
                 <NuxtLink href="/register" v-if="!tokenData">
                     <ButtonsBase
                         class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                        <Icon name="tabler:certificate" class="shrink-0 text-2xl" />
+                        <iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
                         <span class="pr-28 line-clamp-1">Register</span>
                     </ButtonsBase>
                 </NuxtLink>
@@ -47,16 +47,18 @@
                     Posts</h3>
                 <ButtonsBase v-if="tokenData" @click="compose" title="Open composer (shortcut: n)"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:writing" class="shrink-0 text-2xl" />
+                    <iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Compose</span>
                     <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
-                        <Icon name="tabler:keyboard" class="size-4 inline" aria-hidden="true" />
-                        <Icon name="tabler:letter-n-small" class="size-4 inline -mr-1" aria-hidden="true" />
+                        <iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline"
+                            aria-hidden="true" />
+                        <iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
+                            aria-hidden="true" />
                     </kbd>
                 </ButtonsBase>
                 <ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2   ring-pink-600 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:refresh" class="shrink-0 text-2xl" />
+                    <iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Update</span>
                 </ButtonsBase>
             </ClientOnly>
@@ -69,7 +71,7 @@
             <DropdownsAdaptiveDropdown>
                 <template #button>
                     <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
-                        <Icon name="tabler:home" class="text-2xl" />
+                        <iconify-icon icon="tabler:home" class="text-2xl" />
                         <span class="text-xs">Timelines</span>
                     </HeadlessMenuButton>
                 </template>
@@ -88,20 +90,20 @@
                 </template>
             </DropdownsAdaptiveDropdown>
             <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
-                <Icon name="tabler:bell" class="text-2xl" />
+                <iconify-icon icon="tabler:bell" class="text-2xl" />
                 <span class="text-xs">Notifications</span>
             </NuxtLink>
             <ClientOnly v-if="$pwa?.needRefresh">
                 <button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
                     @click="$pwa?.updateServiceWorker(true)">
-                    <Icon name="tabler:refresh" class="text-2xl" />
+                    <iconify-icon icon="tabler:refresh" class="text-2xl" />
                     <span class="text-xs">Update</span>
                 </button>
             </ClientOnly>
             <DropdownsAdaptiveDropdown v-else>
                 <template #button>
                     <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
-                        <Icon name="tabler:user" class="text-2xl" />
+                        <iconify-icon icon="tabler:user" class="text-2xl" />
                         <span class="text-xs">Account</span>
                     </HeadlessMenuButton>
                 </template>
@@ -132,7 +134,7 @@
             </DropdownsAdaptiveDropdown>
             <button @click="compose" v-if="tokenData"
                 class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
-                <Icon name="tabler:writing" class="text-2xl" />
+                <iconify-icon icon="tabler:writing" class="text-2xl" />
                 <span class="text-xs">Compose</span>
             </button>
         </ClientOnly>

components/sidebars/navigation.vue

@@ -21,11 +21,11 @@
                             @click="lightbox = false">
                             <div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
                                 <a @click.stop :href="attachment.url" target="_blank" download class="ml-auto">
-                                    <Icon name="tabler:download" class="w-6 h-6" />
+                                    <iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
                                     <span class="sr-only">Close</span>
                                 </a>
-                                <button @click.stop="lightbox = false" class="">
-                                    <Icon name="tabler:x" class="w-6 h-6" />
+                                <button @click.stop="lightbox = false">
+                                    <iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" />
                                     <span class="sr-only">Close</span>
                                 </button>
                             </div>

components/social-elements/notes/attachment.vue

@@ -48,11 +48,13 @@
                         }}</span>
                     <span @click="copyAccount" v-if="!hasCopied"
                         class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
-                        <Icon name="tabler:clipboard" class="h-4 w-4 text-gray-200" aria-hidden="true" />
+                        <iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
+                            aria-hidden="true" />
                         Click to copy
                     </span>
                     <span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
-                        <Icon name="tabler:check" class="h-4 w-4 text-green-500" aria-hidden="true" />
+                        <iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
+                            aria-hidden="true" />
                         Copied!
                     </span>
                 </Skeleton>

components/social-elements/notes/header.vue

@@ -1,21 +1,18 @@
 <template>
-    <div v-if="!collapsed">
-        <div class="mt-6 block relative">
-            <Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
-                type="content">
-                <div v-if="content"
-                    :class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
-                    v-html="content">
-                </div>
-            </Skeleton>
-        </div>
+    <div v-if="!collapsed" class="mt-6">
+        <Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
+            type="content">
+            <div v-if="content"
+                :class="['prose block relative prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
+                v-html="content">
+            </div>
+        </Skeleton>
         <div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
             <SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
                 :attachment="attachment" />
         </div>
-        <div v-if="isQuote && note?.reblog" class="mt-4">
-            <LazySocialElementsNotesNote :note="note?.reblog" :small="true" />
-        </div>
+        <LazySocialElementsNotesNote v-if="isQuote && note?.reblog" :note="note?.reblog" :small="true"
+            class="mt-4 !rounded" />
     </div>
     <div v-else
         class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">