Migrate Tabler to phosphor icons (#1394)

* 📦️ Update services-ui

* 🔨 Use proper icon slots for button components

* 🔨 Switch tabler for phosphor icons

* ❌️ Remove unused components

* 📦️ Remove tabler dependency

* 🔨 Fix icon issues

Author: devmount

frontend/package-lock.json

@@ -16,7 +16,6 @@
     "@rushstack/eslint-patch": "^1.11.0",
     "@sentry/vite-plugin": "^4.0.2",
     "@sentry/vue": "^9.10.1",
-    "@tabler/icons-vue": "^3.7.0",
     "@tailwindcss/forms": "^0.5.3",
     "@thunderbirdops/services-ui": "^1.2.0",
     "@types/ua-parser-js": "^0.7.39",

frontend/package.json

@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { PrimaryButton, DangerButton } from '@thunderbirdops/services-ui';
 
 // icons
-import { IconX } from '@tabler/icons-vue';
+import { PhX } from '@phosphor-icons/vue';
 
 const { t } = useI18n();
 
@@ -33,7 +33,7 @@ const emit = defineEmits(['close', 'confirm', 'error']);
     class="position-center fixed z-50 flex w-full max-w-lg flex-col items-center gap-6 rounded-xl bg-white p-12 dark:bg-gray-700"
   >
     <div class="btn-close absolute right-8 top-8 cursor-pointer" @click="emit('close')" :title="t('label.close')">
-      <icon-x class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-400" />
+      <ph-x class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-400" />
     </div>
     <div class="text-2xl font-semibold text-teal-500">
       {{ title }}

frontend/src/components/ConfirmationModal.vue

@@ -7,8 +7,7 @@ import DropDown from '@/elements/DropDown.vue';
 import NavBarItem from '@/elements/NavBarItem.vue';
 import TextButton from '@/elements/TextButton.vue';
 import { TooltipPosition } from '@/definitions';
-import { IconExternalLink } from '@tabler/icons-vue';
-import { PhLinkSimple } from '@phosphor-icons/vue';
+import { PhArrowSquareOut, PhLinkSimple } from '@phosphor-icons/vue';
 import { UserAvatar, ToolTip } from '@thunderbirdops/services-ui';
 
 // component constants
@@ -108,10 +107,10 @@ const copyLink = async () => {
                 data-testid="user-nav-share-link-btn"
               />
               <router-link :to="{ name: 'report-bug' }" class="router-link-with-icon" data-testid="user-nav-report-bug-menu">
-                {{ t('navBar.reportBug') }} <icon-external-link class="size-4"/>
+                {{ t('navBar.reportBug') }} <ph-arrow-square-out class="size-4"/>
               </router-link>
               <router-link :to="{ name: 'contact' }" class="router-link-with-icon" data-testid="user-nav-contact-menu">
-                {{ t('label.contact') }} <icon-external-link class="size-4"/>
+                {{ t('label.contact') }} <ph-arrow-square-out class="size-4"/>
               </router-link>
               <hr class="border-teal-500" />
               <router-link :to="{ name: 'logout' }" data-testid="user-nav-logout-menu">
@@ -260,4 +259,4 @@ const copyLink = async () => {
     transition: opacity 250ms ease-out;
   }
 }
-</style>
+</style>

frontend/src/components/NavBar.vue

@@ -3,28 +3,28 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUserStore } from '@/stores/user-store';
 import {
-  IconMenu2,
-  IconX,
-  IconHome,
-  IconCalendarClock,
-  IconCalendarCheck,
-  IconExternalLink,
-  IconSettings,
-  IconLogout,
-  IconChevronDown,
-  IconUserSquare,
-} from '@tabler/icons-vue';
+  PhList,
+  PhX,
+  PhHouse,
+  PhCalendarDot,
+  PhCalendarCheck,
+  PhArrowSquareOut,
+  PhGear,
+  PhSignOut,
+  PhCaretDown,
+  PhUserSquare,
+} from '@phosphor-icons/vue';
 import { PrimaryButton, UserAvatar } from '@thunderbirdops/services-ui';
 
 // component constants
 const userStore = useUserStore();
 const { t } = useI18n();
 
 const navItems = [
-  { route: 'dashboard', i18nKey: 'dashboard', icon: IconHome },
-  { route: 'bookings', i18nKey: 'bookings', icon: IconCalendarCheck },
-  { route: 'availability', i18nKey: 'availability', icon: IconCalendarClock },
-  { route: 'settings', i18nKey: 'settings', icon: IconSettings },
+  { route: 'dashboard', i18nKey: 'dashboard', icon: PhHouse },
+  { route: 'bookings', i18nKey: 'bookings', icon: PhCalendarCheck },
+  { route: 'availability', i18nKey: 'availability', icon: PhCalendarDot },
+  { route: 'settings', i18nKey: 'settings', icon: PhGear },
 ];
 
 const menuOpen = ref(false);
@@ -56,7 +56,7 @@ async function copyLink() {
   <!-- Mobile NavBar (closed) -->
   <header class="header-mobile">
     <button @click="onMenuOpen" :aria-label="t('label.openMenu')" :aria-expanded="menuOpen" aria-controls="primaryNav">
-      <icon-menu2 size="24" />
+      <ph-list size="24" />
     </button>
 
     <router-link :to="{ name: userStore.authenticated ? 'dashboard' : 'home' }">
@@ -72,7 +72,7 @@ async function copyLink() {
     <div class="menu-content-container">
       <header>
         <button @click="onMenuClose">
-          <icon-x size="24" />
+          <ph-x size="24" />
         </button>
 
         <img src="@/assets/svg/appointment_logo.svg" alt="Appointment Logo" />
@@ -98,32 +98,32 @@ async function copyLink() {
               <user-avatar :username="userStore.data.username" :avatar-url="userStore.data.avatarUrl" />
               <span class="user-email">{{ userStore.data.email }}</span>
             </div>
-            <icon-chevron-down size="20" class="chevron-icon" />
+            <ph-caret-down size="20" class="chevron-icon" />
           </summary>
 
           <ul @click="onMenuClose">
             <router-link to="profile">
               <li>
-                <icon-user-square size="24" />
+                <ph-user-square size="24" />
                 {{ t('label.userProfile') }}
               </li>
             </router-link>
             <router-link to="report-bug">
               <li>
-                <icon-external-link size="24" />
+                <ph-arrow-square-out size="24" />
                 {{ t('navBar.reportBug') }}
               </li>
             </router-link>
             <router-link to="contact">
               <li>
-                <icon-external-link size="24" />
+                <ph-arrow-square-out size="24" />
                 {{ t('label.contact') }}
               </li>
             </router-link>
           </ul>
         </details>
         <router-link to="logout">
-          <icon-logout size="24" />
+          <ph-sign-out size="24" />
           {{ t('label.logOut') }}
         </router-link>
       </div>
@@ -312,4 +312,4 @@ nav {
     transition: opacity 250ms ease-out;
   }
 }
-</style>
+</style>

frontend/src/components/NavBarMobile.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Alert } from '@/models';
 import { AlertSchemes } from '@/definitions';
-import { IconX } from '@tabler/icons-vue';
+import { PhX } from '@phosphor-icons/vue';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { NoticeBar, NoticeBarTypes } from '@thunderbirdops/services-ui';
@@ -56,7 +56,7 @@ const toggleDetails = () => {
           <span v-if="!open">Show more</span>
         </span>
         <span v-if="canClose" class="btn-close" @click="emit('close')" :title="t('label.close')">
-          <icon-x />
+          <ph-x />
         </span>
       </span>
     </template>