From b2bfa7e56f94512a5cec1796f5340748abc9c43e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 23 Mar 2023 12:32:21 +0530
Subject: [PATCH] refactor: follow camel case key naming

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  |  14 +-
 .../components/dashboard/settings/Modal.vue   |   4 +-
 .../nc-gui/components/general/PreviewAs.vue   |   2 +-
 .../nc-gui/components/smartsheet/Form.vue     |   2 +-
 .../smartsheet/expanded-form/Header.vue       |   2 +-
 .../components/smartsheet/header/CellIcon.ts  |  14 +-
 .../components/smartsheet/header/Menu.vue     |   2 +-
 .../smartsheet/header/VirtualCellIcon.ts      |  22 +++-
 .../smartsheet/toolbar/ColumnFilterMenu.vue   |   4 +-
 .../smartsheet/toolbar/ExportSubActions.vue   |   2 +-
 .../smartsheet/toolbar/FieldsMenu.vue         |   2 +-
 .../smartsheet/toolbar/LockType.vue           |   8 +-
 .../smartsheet/toolbar/RowHeight.vue          |   2 +-
 .../smartsheet/toolbar/SearchData.vue         |   5 +-
 .../smartsheet/toolbar/SortListMenu.vue       |   2 +-
 .../smartsheet/toolbar/ViewActions.vue        |  11 +-
 packages/nc-gui/layouts/base.vue              |   2 +-
 .../pages/[projectType]/[projectId]/index.vue |   2 +-
 .../[projectType]/[projectId]/index/index.vue |   6 +-
 packages/nc-gui/utils/columnUtils.ts          |  16 +--
 packages/nc-gui/utils/iconUtils.ts            | 124 +++++++++---------
 21 files changed, 131 insertions(+), 117 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 0517af9602..11216e7137 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -12,6 +12,7 @@ import {
   TabType,
   computed,
   extractSdkResponseErrorMsg,
+  iconMap,
   isDrawerOrModalExist,
   isMac,
   parseProp,
@@ -29,7 +30,6 @@ import {
   useToggle,
   useUIPermission,
   watchEffect,
-  iconMap
 } from '#imports'
 import PhEyeThin from '~icons/ph/EyeThin'
 import PhTableThin from '~icons/ph/TableThin'
@@ -407,7 +407,7 @@ const setIcon = async (icon: string, table: TableType) => {
 
           <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
             <Transition name="slide-right" mode="out-in">
-              <component :is="iconMap['three-dot-vertical']" v-if="!searchActive" class="hover:text-accent outline-0" />
+              <component :is="iconMap.threeDotVertical" v-if="!searchActive" class="hover:text-accent outline-0" />
             </Transition>
 
             <template #overlay>
@@ -480,7 +480,7 @@ const setIcon = async (icon: string, table: TableType) => {
 
             <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
               <component
-                :is="iconMap['three-dot-vertical']"
+                :is="iconMap.threeDotVertical"
                 class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0"
               />
 
@@ -663,7 +663,7 @@ const setIcon = async (icon: string, table: TableType) => {
                           @click.stop
                         >
                           <component
-                            :is="iconMap['three-dot-vertical']"
+                            :is="iconMap.threeDotVertical"
                             class="transition-opacity opacity-0 group-hover:opacity-100 outline-0"
                           />
 
@@ -745,7 +745,7 @@ const setIcon = async (icon: string, table: TableType) => {
                       @click.stop
                     >
                       <component
-                        :is="iconMap['three-dot-vertical']"
+                        :is="iconMap.threeDotVertical"
                         class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0"
                       />
 
@@ -834,7 +834,7 @@ const setIcon = async (icon: string, table: TableType) => {
                       @click.stop
                     >
                       <component
-                        :is="iconMap['three-dot-vertical']"
+                        :is="iconMap.threeDotVertical"
                         class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0"
                       />
 
@@ -971,7 +971,7 @@ const setIcon = async (icon: string, table: TableType) => {
                             @click.stop
                           >
                             <component
-                              :is="iconMap['three-dot-vertical']"
+                              :is="iconMap.threeDotVertical"
                               class="transition-opacity opacity-0 group-hover:opacity-100 outline-0"
                             />
 
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 4c19528ed1..ca28757b16 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -2,7 +2,7 @@
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 import DataSources from './DataSources.vue'
 import Misc from './Misc.vue'
-import { DataSourcesSubTab,iconMap, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
+import { DataSourcesSubTab, iconMap, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: boolean
@@ -50,7 +50,7 @@ const dataSourcesAwakened = ref(false)
 const tabsInfo: TabGroup = {
   teamAndAuth: {
     title: t('title.teamAndAuth'),
-    icon: iconMap['users-icon'],
+    icon: iconMap.users,
     subTabs: {
       ...(isUIAllowed('userMgmtTab')
         ? {
diff --git a/packages/nc-gui/components/general/PreviewAs.vue b/packages/nc-gui/components/general/PreviewAs.vue
index 65132b41dc..5ef3550b37 100644
--- a/packages/nc-gui/components/general/PreviewAs.vue
+++ b/packages/nc-gui/components/general/PreviewAs.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onUnmounted, ref, useEventListener, useGlobal, useI18n, useNuxtApp, watch,iconMap } from '#imports'
+import { iconMap, 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 PhPencilCircleThin from '~icons/ph/pencil-circle-thin'
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index c965c4984c..6adeda9da5 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -598,7 +598,7 @@ watch(view, (nextView) => {
                     class="absolute flex top-2 right-2"
                   >
                     <component
-                      :is="iconMap['eye-slash']"
+                      :is="iconMap.eyeSlash"
                       class="opacity-0 nc-field-remove-icon"
                       data-testid="nc-field-remove-icon"
                       @click.stop="hideColumn(index)"
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index dc7d3b88ed..eafb295274 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -157,7 +157,7 @@ const onConfirmDeleteRowClick = async () => {
     </a-dropdown-button>
 
     <a-dropdown>
-      <component :is="iconMap['three-dot-vertical']" class="nc-icon-transition" />
+      <component :is="iconMap.threeDotVertical" class="nc-icon-transition" />
       <template #overlay>
         <a-menu>
           <a-menu-item v-if="!isNew" @click="loadRow">
diff --git a/packages/nc-gui/components/smartsheet/header/CellIcon.ts b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
index cb3a952a79..ae6afd91e2 100644
--- a/packages/nc-gui/components/smartsheet/header/CellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
@@ -5,6 +5,7 @@ import {
   computed,
   defineComponent,
   h,
+  iconMap,
   inject,
   isAttachment,
   isBoolean,
@@ -33,14 +34,13 @@ import {
   storeToRefs,
   toRef,
   useProject,
-  iconMap
 } from '#imports'
 
 const renderIcon = (column: ColumnType, abstractType: any) => {
   if (isPrimaryKey(column)) {
     return iconMap.key
   } else if (isSpecificDBType(column)) {
-    return iconMap['specific-db-type']
+    return iconMap.specificDbType
   } else if (isJSON(column)) {
     return iconMap.json
   } else if (isDate(column, abstractType)) {
@@ -48,15 +48,15 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
   } else if (isDateTime(column, abstractType)) {
     return iconMap.datetime
   } else if (isGeoData(column)) {
-    return iconMap['geo-data']
+    return iconMap.geoData
   } else if (isSet(column)) {
-    return iconMap['multi-select']
+    return iconMap.multiSelect
   } else if (isSingleSelect(column)) {
-    return iconMap['single-select']
+    return iconMap.singleSelect
   } else if (isBoolean(column, abstractType)) {
     return iconMap.boolean
   } else if (isTextArea(column)) {
-    return iconMap['long-text']
+    return iconMap.longText
   } else if (isEmail(column)) {
     return iconMap.email
   } else if (isYear(column, abstractType)) {
@@ -70,7 +70,7 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
   } else if (isDecimal(column)) {
     return iconMap.decimal
   } else if (isPhoneNumber(column)) {
-    return iconMap['file-phone']
+    return iconMap.phone
   } else if (isURL(column)) {
     return iconMap.web
   } else if (isCurrency(column)) {
diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 0d51ff2678..69394f419c 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -215,7 +215,7 @@ const hideField = async () => {
 <template>
   <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']" overlay-class-name="nc-dropdown-column-operations">
     <component
-      :is="iconMap['arrow-down']"
+      :is="iconMap.arrowDown"
       class="text-grey !text-0.5rem h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0 mr-2"
     />
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts b/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
index 1b97f431e7..37cff6bf9d 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
@@ -2,7 +2,21 @@ import type { PropType } from '@vue/runtime-core'
 import type { ColumnType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
-import { ColumnInj, MetaInj, defineComponent, h, inject, isBt, isHm, isLookup, isMm, isRollup, ref, toRef, iconMap} from '#imports'
+import {
+  ColumnInj,
+  MetaInj,
+  defineComponent,
+  h,
+  iconMap,
+  inject,
+  isBt,
+  isHm,
+  isLookup,
+  isMm,
+  isRollup,
+  ref,
+  toRef,
+} from '#imports'
 import CountIcon from '~icons/mdi/counter'
 
 const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
@@ -18,13 +32,13 @@ const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
       }
       break
     case UITypes.SpecificDBType:
-      return { icon: iconMap['specific-db-type'], color: 'text-grey' }
+      return { icon: iconMap.specificDbType, color: 'text-grey' }
     case UITypes.Formula:
       return { icon: iconMap.formula, color: 'text-grey' }
     case UITypes.QrCode:
-      return { icon: iconMap['qr-code'], color: 'text-grey' }
+      return { icon: iconMap.qrCode, color: 'text-grey' }
     case UITypes.Barcode:
-      return { icon: iconMap['qr-code'], color: 'text-grey' }
+      return { icon: iconMap.qrCode, color: 'text-grey' }
     case UITypes.Lookup:
       switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index a502afee7a..f12e1f6d44 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -5,6 +5,7 @@ import {
   IsLockedInj,
   IsPublicInj,
   computed,
+  iconMap,
   inject,
   ref,
   useGlobal,
@@ -13,7 +14,6 @@ import {
   useSmartsheetStoreOrThrow,
   useViewFilters,
   watch,
-  iconMap
 } from '#imports'
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -78,7 +78,7 @@ useMenuCloseOnEsc(open)
           <PhFunnelThin />
           <!-- Filter -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.filter') }}</span>
-          <component :is="iconMap['arrow-down']" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
 
           <span v-if="filtersLength" class="nc-count-badge">{{ filtersLength }}</span>
         </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
index 7edc3abbe3..5950287f5e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
@@ -7,6 +7,7 @@ import {
   IsPublicInj,
   MetaInj,
   extractSdkResponseErrorMsg,
+  iconMap,
   inject,
   message,
   ref,
@@ -15,7 +16,6 @@ import {
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
-  iconMap
 } from '#imports'
 
 const { t } = useI18n()
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 9fb3603072..aacfe15b3e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -162,7 +162,7 @@ useMenuCloseOnEsc(open)
           <!-- Fields -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>
 
-          <component :is="iconMap['arrow-down']" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
 
           <span v-if="numberOfHiddenFields" class="nc-count-badge">{{ numberOfHiddenFields }}</span>
         </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/LockType.vue b/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
index 4038400ea9..7e9a919187 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LockType } from '~/lib'
-import { ActiveViewInj, inject, iconMap } from '#imports'
+import { ActiveViewInj, iconMap, inject } from '#imports'
 
 const { type, hideTick } = defineProps<{ hideTick?: boolean; type: LockType }>()
 
@@ -9,17 +9,17 @@ const emit = defineEmits(['select'])
 const types = {
   [LockType.Personal]: {
     title: 'title.personalView',
-    icon: iconMap['account-icon'],
+    icon: iconMap.account,
     subtitle: 'msg.info.personalView',
   },
   [LockType.Collaborative]: {
     title: 'title.collabView',
-    icon: iconMap['users-icon'],
+    icon: iconMap.users,
     subtitle: 'msg.info.collabView',
   },
   [LockType.Locked]: {
     title: 'title.lockedView',
-    icon: iconMap['lock-icon'],
+    icon: iconMap.lock,
     subtitle: 'msg.info.lockedView',
   },
 }
diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
index aeb499c7c4..f9d3867627 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
@@ -45,7 +45,7 @@ useMenuCloseOnEsc(open)
         <div class="flex items-center gap-1">
           <PhSplitVerticalThin />
           <!-- Row Height -->
-          <component :is="iconMap['arrow-down']" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
         </div>
       </a-button>
     </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index bfb09a73af..4fcb557d23 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -4,15 +4,14 @@ import {
   ActiveViewInj,
   ReloadViewDataHookInj,
   computed,
+  iconMap,
   inject,
   onClickOutside,
   ref,
   useFieldQuery,
-  iconMap,
   useSmartsheetStoreOrThrow,
 } from '#imports'
 
-
 const reloadData = inject(ReloadViewDataHookInj)!
 
 const { meta } = useSmartsheetStoreOrThrow()
@@ -59,7 +58,7 @@ function onPressEnter() {
     >
       <component :is="iconMap.search" class="text-grey" />
 
-      <component :is="iconMap['arrow-down']" class="text-grey !text-0.5rem" />
+      <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
 
       <a-select
         v-model:value="search.field"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 25c199e565..4c9e612ba5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -80,7 +80,7 @@ useMenuCloseOnEsc(open)
 
           <!-- Sort -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>
-          <component :is="iconMap['arrow-down']" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
 
           <span v-if="sorts?.length" class="nc-count-badge">{{ sorts.length }}</span>
         </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index ee9bb2f84d..83641e4c88 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -6,6 +6,7 @@ import {
   IsPublicInj,
   MetaInj,
   extractSdkResponseErrorMsg,
+  iconMap,
   inject,
   message,
   ref,
@@ -15,7 +16,7 @@ import {
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
-  useUIPermission,iconMap
+  useUIPermission,
 } from '#imports'
 import { LockType } from '~/lib'
 
@@ -67,12 +68,12 @@ const currentBaseId = computed(() => meta.value?.base_id)
 const Icon = computed(() => {
   switch (selectedView.value?.lock_type) {
     case LockType.Personal:
-      return iconMap['account-icon']
+      return iconMap.account
     case LockType.Locked:
-      return iconMap['lock-icon']
+      return iconMap.lock
     case LockType.Collaborative:
     default:
-      return iconMap['users-icon']
+      return iconMap.users
   }
 })
 
@@ -117,7 +118,7 @@ useMenuCloseOnEsc(open)
 
           <component :is="Icon" class="text-gray-500" :class="`nc-icon-${selectedView?.lock_type}`" />
 
-          <component :is="iconMap['arrow-down']" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
         </div>
       </a-button>
 
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index bbfb150964..6da03d1349 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -79,7 +79,7 @@ hooks.hook('page:finish', () => {
         <template v-if="signedIn">
           <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
             <component
-              :is="iconMap['three-dot-vertical']"
+              :is="iconMap.threeDotVertical"
               data-testid="nc-menu-accounts"
               class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts"
               @click.prevent
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 36bc99ed0e..f6071ea0fc 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -538,7 +538,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <a-sub-menu key="account">
                       <template #title>
                         <div class="nc-project-menu-item group">
-                          <component :is="iconMap['account-icon']" class="group-hover:text-accent" />
+                          <component :is="iconMap.account" class="group-hover:text-accent" />
                           {{ $t('labels.account') }}
                           <div class="flex-1" />
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 5c011d1a2d..443d500650 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -15,11 +15,11 @@ provide(TabMetaInj, activeTab)
 const icon = (tab: TabItem) => {
   switch (tab.type) {
     case TabType.TABLE:
-      return iconMap['table']
+      return iconMap.table
     case TabType.VIEW:
-      return iconMap['eye']
+      return iconMap.eye
     case TabType.AUTH:
-      return iconMap['users-icon']
+      return iconMap.users
   }
 }
 
diff --git a/packages/nc-gui/utils/columnUtils.ts b/packages/nc-gui/utils/columnUtils.ts
index e14e20dabd..7cb398dc85 100644
--- a/packages/nc-gui/utils/columnUtils.ts
+++ b/packages/nc-gui/utils/columnUtils.ts
@@ -21,7 +21,7 @@ const uiTypes = [
   },
   {
     name: UITypes.LongText,
-    icon: iconMap['long-text'],
+    icon: iconMap.longText,
   },
   {
     name: UITypes.Attachment,
@@ -33,11 +33,11 @@ const uiTypes = [
   },
   {
     name: UITypes.MultiSelect,
-    icon: iconMap['multi-select'],
+    icon: iconMap.multiSelect,
   },
   {
     name: UITypes.SingleSelect,
-    icon: iconMap['single-select'],
+    icon: iconMap.singleSelect,
   },
   {
     name: UITypes.Date,
@@ -53,7 +53,7 @@ const uiTypes = [
   },
   {
     name: UITypes.PhoneNumber,
-    icon: iconMap['file-phone'],
+    icon: iconMap.phone,
   },
   {
     name: UITypes.Email,
@@ -103,12 +103,12 @@ const uiTypes = [
   },
   {
     name: UITypes.QrCode,
-    icon: iconMap['qr-code'],
+    icon: iconMap.qrCode,
     virtual: 1,
   },
   {
     name: UITypes.Barcode,
-    icon: iconMap['bar-code'],
+    icon: iconMap.barCode,
     virtual: 1,
   },
   {
@@ -118,7 +118,7 @@ const uiTypes = [
 
   {
     name: UITypes.GeoData,
-    icon: iconMap['geo-data'],
+    icon: iconMap.geoData,
   },
   {
     name: UITypes.JSON,
@@ -126,7 +126,7 @@ const uiTypes = [
   },
   {
     name: UITypes.SpecificDBType,
-    icon: iconMap['specific-db-type'],
+    icon: iconMap.specificDbType,
   },
 ]
 
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 3fa162591a..8213ece75d 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -79,69 +79,69 @@ import BTIcon from '~icons/mdi/table-arrow-left'
 import MMIcon from '~icons/mdi/table-network'
 
 export const iconMap = {
-  'lock-icon': PhLockIcon,
-  'account-icon': PhAccountIcon,
-  'users-icon': PhUsersThreeThin,
-  'download': PhDownloadThin,
-  'upload': PhUploadThin,
-  'hook': PhHookThin,
-  'erd': PhTreeThin,
-  'plus': PhPlusThin,
-  'search': PhSearchThin,
-  'copy': PhCopySimpleThin,
-  'clipboard': PhClipboardThin,
-  'settings': PhGearThin,
-  'image': PhImageThin,
-  'datasource': PhHardDriveThin,
-  'book': PhBookThin,
-  'arrow-down': PhCaretDownLight,
-  'three-dot-vertical': PhDotsThreeOutlineVerticalThin,
-  'table': PhTableThin,
-  'excel': PhExcelThin,
-  'csv': PhCsvThin,
-  'code': PhBracketsCurlyThin,
-  'delete': PhTrashThin,
-  'edit': PhPencilSimpleThin,
-  'link': PhLinkSimpleThin,
-  'lookup': PhListMagnifyingGlassThin,
-  'text': PhStringIcon,
-  'long-text': PhTextAreaIcon,
-  'clock': ClockIcon,
-  'web': WebIcon,
-  'boolean': BooleanIcon,
-  'calendar': CalendarIcon,
-  'single-select': SingleSelectIcon,
-  'multi-select': MultiSelectIcon,
-  'datetime': DatetimeIcon,
-  'geo-data': GeoDataIcon,
-  'rating': RatingIcon,
-  'generic': GenericIcon,
-  'numeric': NumericIcon,
-  'email': EmailIcon,
-  'currency': CurrencyIcon,
-  'percent': PercentIcon,
-  'decimal': DecimalIcon,
-  'specific-db-type': SpecificDBTypeIcon,
-  'duration': DurationIcon,
-  'file-phone': FilePhoneIcon,
-  'formula': PhFunctiontone,
-  'key': KeyIcon,
-  'json': PhBracketsCurlyThin,
-  'qr-code': PhQrCodeThin,
-  'bar-code': PhBarcodeThin,
-  'calculator': PhCalculatorThin,
-  'rollup': PhLifebuoyThin,
-  'eye': PhEyeThin,
-  'eye-slash': PhEyeSlashThin,
-  'expand': PhExpandThin,
-  'check': PhCheckThin,
-  'acl': PhFolderLockThin,
-  'sync': MdiDatabaseSync,
-  'warning': PhWarningThin,
+  lock: PhLockIcon,
+  account: PhAccountIcon,
+  users: PhUsersThreeThin,
+  download: PhDownloadThin,
+  upload: PhUploadThin,
+  hook: PhHookThin,
+  erd: PhTreeThin,
+  plus: PhPlusThin,
+  search: PhSearchThin,
+  copy: PhCopySimpleThin,
+  clipboard: PhClipboardThin,
+  settings: PhGearThin,
+  image: PhImageThin,
+  datasource: PhHardDriveThin,
+  book: PhBookThin,
+  arrowDown: PhCaretDownLight,
+  threeDotVertical: PhDotsThreeOutlineVerticalThin,
+  table: PhTableThin,
+  excel: PhExcelThin,
+  csv: PhCsvThin,
+  code: PhBracketsCurlyThin,
+  delete: PhTrashThin,
+  edit: PhPencilSimpleThin,
+  link: PhLinkSimpleThin,
+  lookup: PhListMagnifyingGlassThin,
+  text: PhStringIcon,
+  longText: PhTextAreaIcon,
+  clock: ClockIcon,
+  web: WebIcon,
+  boolean: BooleanIcon,
+  calendar: CalendarIcon,
+  singleSelect: SingleSelectIcon,
+  multiSelect: MultiSelectIcon,
+  datetime: DatetimeIcon,
+  geoData: GeoDataIcon,
+  rating: RatingIcon,
+  generic: GenericIcon,
+  numeric: NumericIcon,
+  email: EmailIcon,
+  currency: CurrencyIcon,
+  percent: PercentIcon,
+  decimal: DecimalIcon,
+  specificDbType: SpecificDBTypeIcon,
+  duration: DurationIcon,
+  phone: FilePhoneIcon,
+  formula: PhFunctiontone,
+  key: KeyIcon,
+  json: PhBracketsCurlyThin,
+  qrCode: PhQrCodeThin,
+  barCode: PhBarcodeThin,
+  calculator: PhCalculatorThin,
+  rollup: PhLifebuoyThin,
+  eye: PhEyeThin,
+  eyeSlash: PhEyeSlashThin,
+  expand: PhExpandThin,
+  check: PhCheckThin,
+  acl: PhFolderLockThin,
+  sync: MdiDatabaseSync,
+  warning: PhWarningThin,
 
-  'mm': MMIcon,
-  'hm': HMIcon,
-  'bt': BTIcon,
+  mm: MMIcon,
+  hm: HMIcon,
+  bt: BTIcon,
 } as const
 
 export const getMdiIcon = (type: string): any => {