refactor: update icons in dashboard (WIP)

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components.d.ts

@@ -258,10 +258,34 @@ declare module '@vue/runtime-core' {
     NcIconsRowHeightMedium: typeof import('~icons/nc-icons/row-height-medium')['default']
     NcIconsRowHeightShort: typeof import('~icons/nc-icons/row-height-short')['default']
     NcIconsRowHeightTall: typeof import('~icons/nc-icons/row-height-tall')['default']
+    'Ph:clockClockwiseThin': typeof import('~icons/ph/clock-clockwise-thin')['default']
+    PhArrowClockwiseThin: typeof import('~icons/ph/arrow-clockwise-thin')['default']
+    PhAtThin: typeof import('~icons/ph/at-thin')['default']
+    PhBracketsAngleThin: typeof import('~icons/ph/brackets-angle-thin')['default']
+    PhBracketsCurlyThin: typeof import('~icons/ph/brackets-curly-thin')['default']
+    PhCaretDoubleLeftThin: typeof import('~icons/ph/caret-double-left-thin')['default']
+    PhCaretDoubleRightThin: typeof import('~icons/ph/caret-double-right-thin')['default']
+    PhCaretDoubleThin: typeof import('~icons/ph/caret-double-thin')['default']
+    PhCaretDownThin: typeof import('~icons/ph/caret-down-thin')['default']
     PhChatTextThin: typeof import('~icons/ph/chat-text-thin')['default']
+    PhClockClockwiseThin: typeof import('~icons/ph/clock-clockwise-thin')['default']
     PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default']
     PhCloudLightningThin: typeof import('~icons/ph/cloud-lightning-thin')['default']
+    PhEyeThin: typeof import('~icons/ph/eye-thin')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
+    PhFolderSimpleThin: typeof import('~icons/ph/folder-simple-thin')['default']
+    PhFolderThin: typeof import('~icons/ph/folder-thin')['default']
+    PhFunnelThin: typeof import('~icons/ph/funnel-thin')['default']
+    PhlistBulletsThin: typeof import('~icons/ph/list-bullets-thin')['default']
+    PhListBulletsThin: typeof import('~icons/ph/list-bullets-thin')['default']
+    PhMagnifyingGlassThin: typeof import('~icons/ph/magnifying-glass-thin')['default']
+    PhPlusThin: typeof import('~icons/ph/plus-thin')['default']
+    PhPresentationThin: typeof import('~icons/ph/presentation-thin')['default']
+    PhShareThin: typeof import('~icons/ph/share-thin')['default']
+    PhSignOutThin: typeof import('~icons/ph/sign-out-thin')['default']
+    PhSortAscendingThin: typeof import('~icons/ph/sort-ascending-thin')['default']
+    PhSplitVerticalThin: typeof import('~icons/ph/split-vertical-thin')['default']
+    PhTranslateThin: typeof import('~icons/ph/translate-thin')['default']
     PhUserPlusThin: typeof import('~icons/ph/user-plus-thin')['default']
     PhUsersThreeThin: typeof import('~icons/ph/users-three-thin')['default']
     RiLineHeight: typeof import('~icons/ri/line-height')['default']

packages/nc-gui/components/dashboard/TreeView.vue

@@ -32,6 +32,7 @@ import {
 } from '#imports'
 import PhEyeThin from '~icons/ph/EyeThin'
 import PhTableThin from '~icons/ph/TableThin'
+import { iconMap } from '~/utils';
 
 const { isMobileMode } = useGlobal()
 
@@ -374,7 +375,7 @@ const setIcon = async (icon: string, table: TableType) => {
 
           <Transition name="layout" mode="out-in">
             <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
-            <IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+            <component :is="iconMap['search']" v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
           </Transition>
         </div>
         <div
@@ -471,9 +472,8 @@ const setIcon = async (icon: string, table: TableType) => {
           <div
             v-if="isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-2 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
-            @click="openTableCreateDialog(bases[0].id)"
-          >
-            <MdiPlus class="w-5" />
+            @click="openTableCreateDialog(bases[0].id)">
+            <component :is="iconMap['plus']" class="w-5" />
 
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
 
@@ -724,8 +724,8 @@ const setIcon = async (icon: string, table: TableType) => {
                     v-if="index === '0' && isUIAllowed('table-create')"
                     class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
                     @click="openTableCreateDialog(bases[0].id)"
-                  >
-                    <MdiPlus />
+                    >
+                    <component :is="iconMap['plus']" />
 
                     <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
                       $t('tooltip.addTable')
@@ -811,7 +811,8 @@ const setIcon = async (icon: string, table: TableType) => {
                     class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
                     @click="openTableCreateDialog(base.id)"
                   >
-                    <MdiPlus />
+                    <component :is="
+iconMap['plus']" />
 
                     <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
                       $t('tooltip.addTable')
@@ -1028,7 +1029,7 @@ const setIcon = async (icon: string, table: TableType) => {
 
     <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
       <LazyGeneralAddBaseButton
-        class="color-transition py-1.5 px-2 font-bold cursor-pointer select-none hover:text-primary"
+        class="color-transition py-1.5 px-2 cursor-pointer select-none hover:text-primary"
       />
 
       <LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />

packages/nc-gui/components/general/PreviewAs.vue

@@ -2,9 +2,9 @@
 import { onUnmounted, ref, useEventListener, useGlobal, useI18n, useNuxtApp, watch } from '#imports'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
-import MdiAccountEdit from '~icons/mdi/account-edit'
-import MdiEyeOutline from '~icons/mdi/eye-outline'
-import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
+import MdiAccountEdit from '~icons/ph/pencil-circle-thin'
+import MdiEyeOutline from '~icons/ph/eye-thin'
+import MdiCommentAccountOutline from '~icons/ph/chat-teardrop-text-thin'
 import { ProjectRole } from '~/lib'
 
 const { float } = defineProps<{ float?: boolean }>()

packages/nc-gui/components/smartsheet/header/CellIcon.ts

@@ -34,29 +34,29 @@ import {
   toRef,
   useProject,
 } from '#imports'
-import FilePhoneIcon from '~icons/mdi/file-phone'
-import KeyIcon from '~icons/mdi/key-variant'
-import JSONIcon from '~icons/mdi/code-json'
-import ClockIcon from '~icons/mdi/clock-time-five'
-import WebIcon from '~icons/mdi/web'
-import TextAreaIcon from '~icons/mdi/card-text-outline'
-import StringIcon from '~icons/mdi/alpha-a-box-outline'
-import BooleanIcon from '~icons/mdi/check-box-outline'
-import CalendarIcon from '~icons/mdi/calendar'
-import SingleSelectIcon from '~icons/mdi/arrow-down-drop-circle'
-import MultiSelectIcon from '~icons/mdi/format-list-bulleted-square'
-import DatetimeIcon from '~icons/mdi/calendar-clock'
-import GeoDataIcon from '~icons/mdi/map-marker'
-import RatingIcon from '~icons/mdi/star'
-import GenericIcon from '~icons/mdi/square-rounded'
-import NumericIcon from '~icons/mdi/numeric'
-import AttachmentIcon from '~icons/mdi/image-multiple-outline'
-import EmailIcon from '~icons/mdi/email'
-import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
-import PercentIcon from '~icons/mdi/percent-outline'
+import FilePhoneIcon from '~icons/ph/text-align-left-thin'
+import KeyIcon from '~icons/ph/text-align-left-thin'
+import JSONIcon from '~icons/ph/text-align-left-thin'
+import ClockIcon from '~icons/ph/alarm-thin'
+import WebIcon from '~icons/ph/planet-thin'
+import TextAreaIcon from '~icons/ph/text-align-left-thin'
+import StringIcon from '~icons/ph/text-aa-thin'
+import BooleanIcon from '~icons/ph/check-square-thin'
+import CalendarIcon from '~icons/ph/calendar-blank-thin'
+import SingleSelectIcon from '~icons/ph/caret-circle-down-thin'
+import MultiSelectIcon from '~icons/ph/list-bullets-thin'
+import DatetimeIcon from '~icons/ph/calendar-thin'
+import GeoDataIcon from '~icons/ph/map-pin-thin'
+import RatingIcon from '~icons/ph/star-thin'
+import GenericIcon from '~icons/ph/square-thin'
+import NumericIcon from '~icons/ph/number-square-one-thin'
+import AttachmentIcon from '~icons/ph/image-thin'
+import EmailIcon from '~icons/ph/envelope-thin'
+import CurrencyIcon from '~icons/ph/currency-circle-dollar-thin'
+import PercentIcon from '~icons/ph/percent-thin'
 import DecimalIcon from '~icons/mdi/decimal'
-import SpecificDBTypeIcon from '~icons/mdi/database-settings'
-import DurationIcon from '~icons/mdi/timer-outline'
+import SpecificDBTypeIcon from '~icons/ph/database-thin'
+import DurationIcon from '~icons/ph/clock-clockwise-thin'
 
 const renderIcon = (column: ColumnType, abstractType: any) => {
   if (isPrimaryKey(column)) {
@@ -133,7 +133,7 @@ export default defineComponent({
     return () => {
       if (!column.value) return null
 
-      return h(renderIcon(column.value, abstractType.value), { class: 'text-grey mx-1 !text-xs' })
+      return h(renderIcon(column.value, abstractType.value), { class: 'text-black mx-1', style:{ fontSize: '16px'} })
     }
   },
 })

packages/nc-gui/components/smartsheet/toolbar/AddRow.vue

@@ -13,12 +13,13 @@ const onClick = () => {
 <template>
   <a-tooltip placement="bottom">
     <template #title> {{ $t('activity.addRow') }} </template>
+    <IonImageOutline/>
     <div
       v-e="['c:row:add:grid-top']"
       :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
       class="nc-add-new-row-btn nc-toolbar-btn flex min-w-32px w-32px h-32px items-center"
     >
-      <MdiPlusOutline
+      <PhPlusThin
         :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"
         @click="onClick"
       />

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -74,7 +74,7 @@ useMenuCloseOnEsc(open)
     <div :class="{ 'nc-active-btn': filtersLength }">
       <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-1">
-          <MdiFilterOutline />
+          <PhFunnelThin/>
           <!-- Filter -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.filter') }}</span>
           <MdiMenuDown class="text-grey" />

packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue

@@ -16,6 +16,7 @@ import {
   useProject,
   useSmartsheetStoreOrThrow,
 } from '#imports'
+import { iconMap } from '~/utils';
 
 const { t } = useI18n()
 
@@ -99,7 +100,8 @@ const exportFile = async (exportType: ExportTypes) => {
 <template>
   <a-menu-item>
     <div v-e="['a:actions:download-csv']" class="nc-project-menu-item" @click="exportFile(ExportTypes.CSV)">
-      <MdiDownloadOutline class="text-gray-500" />
+      <component :is="
+iconMap.download" class="text-gray-500" />
       <!-- Download as CSV -->
       {{ $t('activity.downloadCSV') }}
     </div>
@@ -107,7 +109,8 @@ const exportFile = async (exportType: ExportTypes) => {
 
   <a-menu-item>
     <div v-e="['a:actions:download-excel']" class="nc-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
-      <MdiDownloadOutline class="text-gray-500" />
+      <component :is="
+iconMap.download" class="text-gray-500" />
       <!-- Download as XLSX -->
       {{ $t('activity.downloadExcel') }}
     </div>

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -156,7 +156,7 @@ useMenuCloseOnEsc(open)
     <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
-          <PhUserPlusThin />
+          <PhEyeThin />
 
           <!-- Fields -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>

packages/nc-gui/components/smartsheet/toolbar/LockType.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { iconMap } from '~/utils'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
@@ -12,17 +13,17 @@ const emit = defineEmits(['select'])
 const types = {
   [LockType.Personal]: {
     title: 'title.personalView',
-    icon: MdiAccountIcon,
+    icon: iconMap['account-icon'],
     subtitle: 'msg.info.personalView',
   },
   [LockType.Collaborative]: {
     title: 'title.collabView',
-    icon: MdiAccountGroupIcon,
+    icon: iconMap['users-icon'],
     subtitle: 'msg.info.collabView',
   },
   [LockType.Locked]: {
     title: 'title.lockedView',
-    icon: MdiLockOutlineIcon,
+    icon: iconMap['lock-icon'],
     subtitle: 'msg.info.lockedView',
   },
 }

packages/nc-gui/components/smartsheet/toolbar/Reload.vue

@@ -26,7 +26,7 @@ const onClick = () => {
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-toolbar-btn flex min-w-32px w-32px h-32px items-center">
-      <MdiReload
+      <PhArrowClockwiseThin
         class="w-full h-full cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn"
         :class="isReloading ? 'animate-spin' : ''"
         @click="onClick"

packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue

@@ -43,8 +43,7 @@ useMenuCloseOnEsc(open)
     <div>
       <a-button v-e="['c:row-height']" class="nc-height-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
-          <RiLineHeight />
-
+          <PhSplitVerticalThin />
           <!-- Row Height -->
           <MdiMenuDown class="text-grey" />
         </div>

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -11,6 +11,8 @@ import {
   useSmartsheetStoreOrThrow,
 } from '#imports'
 
+import { iconMap } from '~/utils';
+
 const reloadData = inject(ReloadViewDataHookInj)!
 
 const { meta } = useSmartsheetStoreOrThrow()
@@ -55,7 +57,8 @@ function onPressEnter() {
       :class="{ '!bg-gray-100 ': isDropdownOpen }"
       @click="isDropdownOpen = !isDropdownOpen"
     >
-      <MdiMagnify class="text-grey" />
+      <component :is="
+iconMap['search']" class="text-grey" />
 
       <MdiMenuDown class="text-grey" />
 

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -249,7 +249,7 @@ const copyIframeCode = async () => {
       @click="genShareLink"
     >
       <div class="flex items-center gap-1">
-        <MdiOpenInNew />
+        <PhShareThin />
         <!-- Share View -->
         <span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.shareView') }}</span>
       </div>

packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@@ -75,7 +75,7 @@ useMenuCloseOnEsc(open)
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
-          <MdiSort />
+          <PhSortAscendingThin/>
 
           <!-- Sort -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>

packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@@ -18,9 +18,7 @@ import {
   useUIPermission,
 } from '#imports'
 import { LockType } from '~/lib'
-import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
-import MdiAccountIcon from '~icons/mdi/account'
-import MdiAccountGroupIcon from '~icons/mdi/account-group'
+import { iconMap } from '~/utils'
 
 const { t } = useI18n()
 
@@ -70,12 +68,12 @@ const currentBaseId = computed(() => meta.value?.base_id)
 const Icon = computed(() => {
   switch (selectedView.value?.lock_type) {
     case LockType.Personal:
-      return MdiAccountIcon
+      return iconMap['account-icon']
     case LockType.Locked:
-      return MdiLockOutlineIcon
+      return iconMap['lock-icon']
     case LockType.Collaborative:
     default:
-      return MdiAccountGroupIcon
+      return iconMap['users-icon']
   }
 })
 
@@ -162,7 +160,7 @@ useMenuCloseOnEsc(open)
               <template #title>
                 <!--                Download -->
                 <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                  <MdiDownload class="group-hover:text-accent text-gray-500" />
+                  <component :is="iconMap.download" class="group-hover:text-accent text-gray-500" />
                   {{ $t('general.download') }}
                   <div class="flex-1" />
 
@@ -182,7 +180,7 @@ useMenuCloseOnEsc(open)
                 <!--                Upload -->
                 <template #title>
                   <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                    <MdiUpload class="group-hover:text-accent text-gray-500" />
+                    <component :is="iconMap.upload" class="group-hover:text-accent text-gray-500" />
                     {{ $t('general.upload') }}
                     <div class="flex-1" />
 
@@ -201,7 +199,7 @@ useMenuCloseOnEsc(open)
                       :class="{ disabled: isLocked }"
                       @click="!isLocked ? (dialog.value = true) : {}"
                     >
-                      <MdiUploadOutline class="text-gray-500" />
+                      <component :is="iconMap.upload" class="text-gray-500" />
                       {{ `${$t('general.upload')} ${type.toUpperCase()}` }}
                       <div class="flex items-center text-gray-400"><MdiAlpha />version</div>
                     </div>
@@ -214,7 +212,7 @@ useMenuCloseOnEsc(open)
 
             <a-menu-item v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView">
               <div v-e="['a:actions:shared-view-list']" class="py-2 flex gap-2 items-center" @click="sharedViewListDlg = true">
-                <MdiViewListOutline class="text-gray-500" />
+                <PhListBulletsThin class="text-gray-500" />
                 <!-- Shared View List -->
                 {{ $t('activity.listSharedView') }}
               </div>
@@ -227,14 +225,14 @@ useMenuCloseOnEsc(open)
                 class="py-2 flex gap-2 items-center"
                 @click="showWebhookDrawer = true"
               >
-                <MdiHook class="text-gray-500" />
+                <component :is="iconMap['hook']" class="text-gray-500" />
                 {{ $t('objects.webhooks') }}
               </div>
             </a-menu-item>
 
             <a-menu-item v-if="!isSharedBase && !isPublicView && !isMobileMode">
               <div v-e="['c:snippet:open']" class="py-2 flex gap-2 items-center" @click="showApiSnippetDrawer = true">
-                <MdiXml class="text-gray-500" />
+                <PhBracketsAngleThin class="text-gray-500" />
                 <!-- Get API Snippet -->
                 {{ $t('activity.getApiSnippet') }}
               </div>
@@ -247,7 +245,7 @@ useMenuCloseOnEsc(open)
                 class="py-2 flex gap-2 items-center nc-view-action-erd"
                 @click="showErd = true"
               >
-                <MaterialSymbolsAccountTreeRounded class="text-gray-500" />
+                <component :is="iconMap.erd" class="text-gray-500" />
                 {{ $t('title.erdView') }}
               </div>
             </a-menu-item>

packages/nc-gui/package-lock.json

@@ -11,7 +11,6 @@
         "@ckpack/vue-color": "^1.2.0",
         "@iconify/vue": "^4.0.1",
         "@pinia/nuxt": "^0.4.7",
-        "@types/file-saver": "^2.0.5",
         "@vue-flow/additional-components": "^1.2.0",
         "@vue-flow/core": "^1.3.0",
         "@vuelidate/core": "^2.0.0-alpha.44",
@@ -61,13 +60,14 @@
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/eva": "^1.1.2",
         "@iconify-json/ic": "^1.1.7",
+        "@iconify-json/ion": "^1.1.8",
         "@iconify-json/la": "^1.1.2",
         "@iconify-json/logos": "^1.1.14",
         "@iconify-json/lucide": "^1.1.36",
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/mi": "^1.1.2",
-        "@iconify-json/ph": "^1.1.2",
+        "@iconify-json/ph": "^1.1.5",
         "@iconify-json/ri": "^1.1.3",
         "@iconify-json/simple-icons": "^1.1.29",
         "@iconify-json/system-uicons": "^1.1.4",
@@ -1116,6 +1116,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/ion": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ion/-/ion-1.1.8.tgz",
+      "integrity": "sha512-RRyuDG3Sf3ggpK3MV/uSfMXAWlQUpquvt/jHtDg8Duprb/zE8NNXHhEFoSVGVRu7533nNEzUzN4KmYRdxJ790A==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/la": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/la/-/la-1.1.2.tgz",
@@ -1171,9 +1180,9 @@
       }
     },
     "node_modules/@iconify-json/ph": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.1.2.tgz",
-      "integrity": "sha512-NuTdtt/UmuxIHS4hfdyv3BP5JiWikNkr81hFHXDScXlH0GUMdRSY/B5T9vDvbXDY/esMLFnIAXoFVDLsGinhpw==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.1.5.tgz",
+      "integrity": "sha512-iLXq3nohfGge22gL2tZmQ2WHBKkKkIbGWrkuyC8arckS4PWaONyh4A+uDPtSek9QbYDvi9AE2+NxWkNZhANotA==",
       "dev": true,
       "dependencies": {
         "@iconify/types": "*"
@@ -19077,6 +19086,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/ion": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ion/-/ion-1.1.8.tgz",
+      "integrity": "sha512-RRyuDG3Sf3ggpK3MV/uSfMXAWlQUpquvt/jHtDg8Duprb/zE8NNXHhEFoSVGVRu7533nNEzUzN4KmYRdxJ790A==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/la": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/la/-/la-1.1.2.tgz",
@@ -19132,9 +19150,9 @@
       }
     },
     "@iconify-json/ph": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.1.2.tgz",
-      "integrity": "sha512-NuTdtt/UmuxIHS4hfdyv3BP5JiWikNkr81hFHXDScXlH0GUMdRSY/B5T9vDvbXDY/esMLFnIAXoFVDLsGinhpw==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.1.5.tgz",
+      "integrity": "sha512-iLXq3nohfGge22gL2tZmQ2WHBKkKkIbGWrkuyC8arckS4PWaONyh4A+uDPtSek9QbYDvi9AE2+NxWkNZhANotA==",
       "dev": true,
       "requires": {
         "@iconify/types": "*"

packages/nc-gui/package.json

@@ -84,13 +84,14 @@
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/eva": "^1.1.2",
     "@iconify-json/ic": "^1.1.7",
+    "@iconify-json/ion": "^1.1.8",
     "@iconify-json/la": "^1.1.2",
     "@iconify-json/logos": "^1.1.14",
     "@iconify-json/lucide": "^1.1.36",
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/mi": "^1.1.2",
-    "@iconify-json/ph": "^1.1.2",
+    "@iconify-json/ph": "^1.1.5",
     "@iconify-json/ri": "^1.1.3",
     "@iconify-json/simple-icons": "^1.1.29",
     "@iconify-json/system-uicons": "^1.1.4",

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
+import { iconMap } from '#imports';
+
 import {
   TabType,
   computed,
@@ -320,7 +322,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
               </template>
 
               <template v-else>
-                <MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
+                <PhFolderSimpleThin class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
               </template>
             </div>
 
@@ -329,7 +331,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                 <a-menu-item-group>
                   <template #title>
                     <div class="group select-none flex items-center gap-4 py-1">
-                      <MdiFolder class="group-hover:text-accent text-xl" />
+                      <PhFolderThin class="group-hover:text-accent text-xl" />
 
                       <div class="flex flex-col">
                         <div class="text-lg group-hover:(!text-primary) font-semibold capitalize">
@@ -352,7 +354,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         class="nc-project-menu-item group"
                         @click.stop="copyProjectInfo"
                       >
-                        <MdiContentCopy class="group-hover:text-accent" />
+                        <component :is="iconMap.copy" class="group-hover:text-accent" />
                         {{ $t('activity.account.projInfo') }}
                       </div>
                     </a-menu-item>
@@ -367,7 +369,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         class="nc-project-menu-item group"
                         @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                       >
-                        <MdiApi class="group-hover:text-accent" />
+                        <PhBracketsCurlyThin class="group-hover:text-accent" />
                         {{ $t('activity.account.swagger') }}
                       </div>
                     </a-menu-item>
@@ -380,7 +382,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         class="nc-project-menu-item group"
                         @click.stop="copyAuthToken"
                       >
-                        <MdiScriptTextKeyOutline class="group-hover:text-accent" />
+                        <component :is="
+iconMap['copy']" class="group-hover:text-accent" />
                         {{ $t('activity.account.authToken') }}
                       </div>
                     </a-menu-item>
@@ -395,7 +398,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         class="nc-project-menu-item group"
                         @click="toggleDialog(true, 'teamAndAuth')"
                       >
-                        <MdiCog class="group-hover:text-accent" />
+                        <component :is="iconMap.settings" class="group-hover:text-accent" />
                         {{ $t('title.teamAndSettings') }}
                       </div>
                     </a-menu-item>
@@ -417,7 +420,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       <a-sub-menu key="theme">
                         <template #title>
                           <div class="nc-project-menu-item group">
-                            <ClarityImageLine class="group-hover:text-accent" />
+                            <component :is="iconMap.image" class="group-hover:text-accent" />
                             {{ $t('activity.account.themes') }}
 
                             <div class="flex-1" />
@@ -492,7 +495,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <a-sub-menu v-if="isUIAllowed('previewAs') && !isMobileMode" key="preview-as">
                       <template #title>
                         <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                          <MdiFileEyeOutline class="group-hover:text-accent" />
+                          <PhPresentationThin class="group-hover:text-accent" />
                           {{ $t('activity.previewAs') }}
 
                           <div class="flex-1" />
@@ -516,7 +519,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   >
                     <template #title>
                       <div class="nc-project-menu-item group">
-                        <MaterialSymbolsTranslate class="group-hover:text-accent nc-language" />
+                        <PhTranslateThin class="group-hover:text-accent nc-language" />
                         {{ $t('labels.language') }}
                         <div class="flex items-center text-gray-400 text-xs">(Community Translated)</div>
                         <div class="flex-1" />
@@ -537,7 +540,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <a-sub-menu key="account">
                       <template #title>
                         <div class="nc-project-menu-item group">
-                          <MdiAccount class="group-hover:text-accent" />
+                          <component :is="iconMap['account-icon']" class="group-hover:text-accent" />
                           {{ $t('labels.account') }}
                           <div class="flex-1" />
 
@@ -555,7 +558,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                           class="nc-project-menu-item group !no-underline"
                           to="/account/users"
                         >
-                          <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
+                          <PhAtThin class="mt-1 group-hover:text-accent" />&nbsp;
                           <div class="prose-sm group-hover:text-primary">
                             <div>Account</div>
                             <div class="text-xs text-gray-500">{{ email }}</div>
@@ -565,7 +568,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
                       <a-menu-item key="1" class="!rounded-b">
                         <div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
-                          <MdiLogout class="group-hover:(!text-accent)" />&nbsp;
+                          <PhSignOutThin class="group-hover:(!text-accent)" />&nbsp;
 
                           <span class="prose-sm nc-user-menu-signout">
                             {{ $t('general.signOut') }}
@@ -582,7 +585,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           <div
             class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
           >
-            <MdiBackburger
+            <PhCaretDoubleLeftThin
               v-e="['c:grid:toggle-navdraw']"
               class="cursor-pointer transform transition-transform duration-500"
               :class="{ 'rotate-180': !isOpen }"

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -44,7 +44,7 @@ const hideSidebarOnClickOrTouchIfMobileMode = () => {
           v-if="!isOpen"
           class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3 mb-1"
         >
-          <MdiMenu
+          <PhCaretDoubleLeftThin
             v-e="['c:grid:toggle-navdraw']"
             class="cursor-pointer transform transition-transform duration-500 text-gray-500/80 hover:text-gray-500"
             :class="{ 'rotate-180': !isOpen }"

packages/nc-gui/utils/iconUtils.ts

@@ -18,6 +18,21 @@ import MdiAccountGroup from '~icons/mdi/account-group'
 import PhEyeThin from '~icons/ph/EyeThin'
 import PhTableThin from '~icons/ph/TableThin'
 
+import PhLockIcon from '~icons/ph/lock-key-thin'
+import PhAccountIcon from '~icons/ph/user'
+import PhUsersThreeThin from '~icons/ph/users-three-thin'
+import PhDownloadThin from '~icons/ph/arrow-line-down-thin'
+import PhUploadThin from '~icons/ph/arrow-line-up-thin'
+import PhHookThin from '~icons/ph/anchor-thin'
+import PhFlowThin from '~icons/ph/flow-arrow-thin'
+import PhPlusThin from '~icons/ph/plus-thin'
+import PhSearchThin from '~icons/ph/magnifying-glass-thin'
+import PhCopySimpleThin from '~icons/ph/copy-simple-thin'
+import PhClipboardThin from '~icons/ph/clipboard-text-thin'
+import PhGearThin from '~icons/ph/gear-thin'
+import PhImageThin from '~icons/ph/image-thin'
+
+
 export const iconMap = {
   'mdi-check-bold': MdiCheckBold,
   'mdi-crop-square': MdiCropSquare,
@@ -35,7 +50,21 @@ export const iconMap = {
   'mdi-flag-outline': MdiFlagOutline,
   'mdi-table-large': PhTableThin,
   'mdi-eye-circle-outline': PhEyeThin,
-  'mdi-account-group': MdiAccountGroup,
+  'mdi-account-group': PhUsersThreeThin,
+
+  'lock-icon': PhLockIcon,
+  'account-icon': PhAccountIcon,
+  'users-icon': PhUsersThreeThin,
+  'download': PhDownloadThin,
+  'upload': PhUploadThin,
+  'hook': PhHookThin,
+  'erd': PhFlowThin,
+  'plus': PhPlusThin,
+  'search': PhSearchThin,
+  'copy': PhCopySimpleThin,
+  'clipboard': PhClipboardThin,
+  'settings': PhGearThin,
+  'image': PhImageThin,
 } as const
 
 export const getMdiIcon = (type: string): any => {