refactor: change to light icon

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

packages/nc-gui/components/account/Token.vue

@@ -107,7 +107,7 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
         <component :is="iconMap.reload" class="cursor-pointer" @click="loadTokens" />
         <a-button data-testid="nc-token-create" size="small" type="primary" @click="showNewTokenModal = true">
           <div class="flex items-center gap-1">
-            <MdiAdd />
+            <component :is="iconMap.plus" />
             Add new token
           </div>
         </a-button>

packages/nc-gui/components/account/UserList.vue

@@ -157,7 +157,7 @@ const copyPasswordResetUrl = async (user: User) => {
           "
         >
           <div class="flex items-center gap-1">
-            <MdiAdd />
+            <component :is="iconMap.plus" />
             Invite new user
           </div>
         </a-button>
@@ -239,7 +239,7 @@ const copyPasswordResetUrl = async (user: User) => {
                 <div class="flex flex-row items-center">
                   <a-button type="text" class="!px-0">
                     <div class="flex flex-row items-center h-[1.2rem]">
-                      <MdiDotsHorizontal class="nc-user-row-action" />
+                      <component :is="iconMap.threeDotHorizontal" class="nc-user-row-action" />
                     </div>
                   </a-button>
                 </div>
@@ -250,7 +250,7 @@ const copyPasswordResetUrl = async (user: User) => {
                       <a-menu-item>
                         <!-- Resend invite Email -->
                         <div class="flex flex-row items-center py-3" @click="resendInvite(record)">
-                          <MdiEmailArrowRightOutline class="flex h-[1rem] text-gray-500" />
+                          <component :is="iconMap.email" class="flex h-[1rem] text-gray-500" />
                           <div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div>
                         </div>
                       </a-menu-item>

packages/nc-gui/components/account/UsersModal.vue

@@ -11,6 +11,7 @@ import {
   useCopy,
   useDashboard,
   useI18n,
+  iconMap,
   useNuxtApp,
 } from '#imports'
 import type { User } from '~/lib'
@@ -126,7 +127,7 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
         <template v-if="usersData.invitationToken">
           <div class="flex flex-col mt-1 border-b-1 pb-5">
             <div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]">
-              <MdiAccountOutline />
+              <component :is="iconMap.account" />
               <div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
             </div>
 

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
-import { computed, isImage, onClickOutside, ref, useAttachment } from '#imports'
+import { computed, isImage, onClickOutside, ref, useAttachment , iconMap} from '#imports'
 
 const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
 
@@ -53,7 +53,7 @@ onClickOutside(carouselRef, () => {
     <template v-if="selectedImage">
       <div class="overflow-hidden p-12 text-center relative">
         <div class="text-white group absolute top-5 right-5">
-          <MdiCloseCircle class="group-hover:text-red-500 cursor-pointer text-4xl" @click.stop="selectedImage = false" />
+          <component :is="iconMap.closeCircle" class="group-hover:text-red-500 cursor-pointer text-4xl" @click.stop="selectedImage = false" />
         </div>
 
         <div

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -2,7 +2,7 @@
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import { isImage, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports'
+import { isImage, ref, useAttachment, useDropZone, useUIPermission, watch , iconMap} from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -133,7 +133,7 @@ function onRemoveFileClick(title: any, i: number) {
 
             <a-tooltip v-if="!readOnly">
               <template #title> Remove File </template>
-              <MdiCloseCircle
+              <component :is="iconMap.closeCircle"
                 v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublic && !isLocked)"
                 class="nc-attachment-remove"
                 @click.stop="onRemoveFileClick(item.title, i)"
@@ -144,7 +144,7 @@ function onRemoveFileClick(title: any, i: number) {
               <template #title> Download File </template>
 
               <div class="nc-attachment-download group-hover:(opacity-100)">
-                <MdiDownload @click.stop="downloadFile(item)" />
+                <component :is="iconMap.download" @click.stop="downloadFile(item)" />
               </div>
             </a-tooltip>
 
@@ -155,7 +155,7 @@ function onRemoveFileClick(title: any, i: number) {
               <template #title> Rename File </template>
 
               <div class="nc-attachment-download group-hover:(opacity-100) mr-[35px]">
-                <MdiEditOutline @click.stop="renameFile(item, i)" />
+                <component :is="iconMap.edit" @click.stop="renameFile(item, i)" />
               </div>
             </a-tooltip>
 

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

@@ -31,8 +31,6 @@ import {
   useUIPermission,
   watchEffect,
 } from '#imports'
-import PhEyeThin from '~icons/ph/EyeThin'
-import PhTableThin from '~icons/ph/TableThin'
 
 const { isMobileMode } = useGlobal()
 
@@ -153,10 +151,10 @@ watchEffect(() => {
 
 const icon = (table: TableType) => {
   if (table.type === 'table') {
-    return PhTableThin
+    return iconMap.table
   }
   if (table.type === 'view') {
-    return PhEyeThin
+    return iconMap.view
   }
 }
 
@@ -374,7 +372,7 @@ const setIcon = async (icon: string, table: TableType) => {
           </Transition>
 
           <Transition name="layout" mode="out-in">
-            <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <component :is="iconMap.close" v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
             <component :is="iconMap.search" v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
           </Transition>
         </div>
@@ -401,8 +399,8 @@ const setIcon = async (icon: string, table: TableType) => {
           </Transition>
 
           <Transition name="slide-right" mode="out-in">
-            <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <component :is="iconMap.close" 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="onSearchIconClick" />
+            <component :is="iconMap.search" v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchIconClick" />
           </Transition>
 
           <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>

packages/nc-gui/components/dashboard/settings/AppStore.vue

@@ -125,7 +125,7 @@ onMounted(async () => {
 
           <a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
             <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-reset">
-              <MdiCloseCircleOutline />
+              <component :is="iconMap.closeCircle" />
               <div class="flex ml-0.5">Reset</div>
             </div>
           </a-button>

packages/nc-gui/components/dashboard/settings/Modal.vue

@@ -170,7 +170,7 @@ watch(
         data-testid="settings-modal-close-button"
         @click="vModel = false"
       >
-        <MdiClose class="cursor-pointer nc-modal-close w-4" />
+        <component :is="iconMap.close" class="cursor-pointer nc-modal-close w-4" />
       </a-button>
     </div>
 

packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@@ -566,7 +566,7 @@ watch(
 
                     <a-input v-model:value="item.value" />
 
-                    <MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
+                    <component :is="iconMap.close" :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
                   </div>
                 </div>
                 <a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">

packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue

@@ -538,7 +538,7 @@ onMounted(async () => {
 
                     <a-input v-model:value="item.value" />
 
-                    <MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
+                    <component :is="iconMap.close" :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
                   </div>
                 </div>
                 <a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">

packages/nc-gui/components/dlg/AirtableImport.vue

@@ -3,6 +3,7 @@ import type { Socket } from 'socket.io-client'
 import io from 'socket.io-client'
 import type { Card as AntCard } from 'ant-design-vue'
 import {
+  iconMap,
   Form,
   computed,
   extractSdkResponseErrorMsg,
@@ -407,7 +408,7 @@ onBeforeUnmount(() => {
         <a-card ref="logRef" :body-style="{ backgroundColor: '#000000', height: '400px', overflow: 'auto' }">
           <div v-for="({ msg, status }, i) in progress" :key="i">
             <div v-if="status === 'FAILED'" class="flex items-center">
-              <MdiCloseCircleOutline class="text-red-500" />
+              <component :is="iconMap.closeCircle" class="text-red-500" />
 
               <span class="text-red-500 ml-2">{{ msg }}</span>
             </div>

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

@@ -104,7 +104,7 @@ watch(previewAs, (newRole) => {
     <template v-if="previewAs">
       <a-menu-item @click="previewAs = null">
         <div class="nc-project-menu-item group">
-          <MdiClose class="group-hover:text-accent" />
+          <component :is="iconMap.close" class="group-hover:text-accent" />
           <!-- Reset Preview -->
           <span class="text-capitalize text-xs whitespace-nowrap">
             {{ $t('activity.resetReview') }}

packages/nc-gui/components/smartsheet/column/SelectOptions.vue

@@ -208,7 +208,7 @@ watch(inputs, () => {
               />
             </div>
 
-            <MdiClose
+            <component :is="iconMap.close"
               v-if="element.status !== 'remove'"
               class="ml-2 hover:!text-black-500 text-gray-500 cursor-pointer"
               :data-testid="`select-column-option-remove-${index}`"

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -186,7 +186,7 @@ const onConfirmDeleteRowClick = async () => {
           </a-menu-item>
           <a-menu-item @click="emit('cancel')">
             <div v-e="['c:row-expand:delete']" class="py-2 flex gap-2 items-center">
-              <MdiCloseCircleOutline
+              <component :is="iconMap.closeCircle"
                 class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
               />
               {{ $t('general.close') }}

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

@@ -111,7 +111,7 @@ export default defineComponent({
     return () => {
       if (!column.value) return null
 
-      return h(renderIcon(column.value, abstractType.value), { class: 'text-black mx-1', style: { fontSize: '16px' } })
+      return h(renderIcon(column.value, abstractType.value), { class: 'text-gray-500 mx-1', style: { fontSize: '16px' } })
     }
   },
 })

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { OpenNewRecordFormHookInj, inject } from '#imports'
+import { IsLockedInj, OpenNewRecordFormHookInj, iconMap, inject } from '#imports'
 
 const isLocked = inject(IsLockedInj)
 
@@ -19,7 +19,8 @@ const onClick = () => {
       :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"
     >
-      <PhPlusThin
+      <component
+        :is="iconMap.plus"
         :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"
         @click="onClick"
       />

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

@@ -2,6 +2,7 @@
 import type { ColumnType, FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import {
+  iconMap,
   ActiveViewInj,
   MetaInj,
   ReloadViewDataHookInj,
@@ -213,7 +214,7 @@ defineExpose({
       <template v-for="(filter, i) in filters" :key="i">
         <template v-if="filter.status !== 'delete'">
           <template v-if="filter.is_group">
-            <MdiCloseBox
+            <component :is="iconMap.closeBox"
               v-if="!filter.readOnly"
               :key="i"
               small
@@ -251,7 +252,7 @@ defineExpose({
             </div>
           </template>
           <template v-else>
-            <MdiCloseBox
+            <component :is="iconMap.closeBox"
               v-if="!filter.readOnly"
               class="nc-filter-item-remove-btn text-grey self-center"
               @click.stop="deleteFilter(filter, i)"

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

@@ -75,7 +75,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">
-          <PhFunnelThin />
+          <component :is="iconMap.filter" />
           <!-- Filter -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.filter') }}</span>
           <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import {iconMap} from '#imports'
+
 interface Props {
   modelValue: boolean
 }
@@ -32,7 +34,7 @@ const selectedView = inject(ActiveViewInj)
       </div>
 
       <div class="flex h-full items-center justify-center rounded group" @click="vModel = false">
-        <MdiClose class="cursor-pointer mt-1 nc-modal-close group-hover:text-accent text-opacity-100" />
+        <component :is="iconMap.close" class="cursor-pointer mt-1 nc-modal-close group-hover:text-accent text-opacity-100" />
       </div>
     </div>
 

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

@@ -31,7 +31,7 @@ const selectedView = inject(ActiveViewInj)
   <div class="nc-locked-menu-item" @click="emit('select', type)">
     <div :class="{ 'show-tick': !hideTick }">
       <template v-if="!hideTick">
-        <MdiCheck v-if="selectedView?.lock_type === type" />
+        <component :is="iconMap.check" v-if="selectedView?.lock_type === type" />
 
         <span v-else />
       </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj, inject, ref, useNuxtApp, watch } from '#imports'
+import { ReloadViewDataHookInj, iconMap, inject, ref, useNuxtApp, watch } from '#imports'
 
 const { $e, $state } = useNuxtApp()
 
@@ -26,7 +26,8 @@ const onClick = () => {
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-toolbar-btn flex min-w-32px w-32px h-32px items-center">
-      <PhArrowClockwiseThin
+      <component
+        :is="iconMap.reload"
         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,7 +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">
-          <PhSplitVerticalThin />
+          <component :is="iconMap.rowHeight" />
           <!-- Row Height -->
           <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
         </div>

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

@@ -94,7 +94,7 @@ useMenuCloseOnEsc(open)
       >
         <div v-if="sorts?.length" class="sort-grid mb-2 max-h-420px overflow-y-auto" @click.stop>
           <template v-for="(sort, i) of sorts" :key="i">
-            <MdiCloseBox
+            <component :is="iconMap.closeBox"
               ref="removeIcon"
               class="nc-sort-item-remove-btn text-grey self-center"
               small

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

@@ -134,9 +134,7 @@ useMenuCloseOnEsc(open)
                 <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
                   <LazySmartsheetToolbarLockType hide-tick :type="lockType" />
 
-                  <MaterialSymbolsChevronRightRounded
+                  <component :is="iconMap.arrowRight" class="transform group-hover:(scale-115 text-accent) text-gray-400" />
-                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                  />
                 </div>
               </template>
 
@@ -164,9 +162,7 @@ useMenuCloseOnEsc(open)
                   {{ $t('general.download') }}
                   <div class="flex-1" />
 
-                  <MaterialSymbolsChevronRightRounded
+                  <component :is="iconMap.arrowRight" class="transform group-hover:(scale-115 text-accent) text-gray-400" />
-                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                  />
                 </div>
               </template>
 
@@ -184,9 +180,7 @@ useMenuCloseOnEsc(open)
                     {{ $t('general.upload') }}
                     <div class="flex-1" />
 
-                    <MaterialSymbolsChevronRightRounded
+                    <component :is="iconMap.arrowRight" class="transform group-hover:(scale-115 text-accent) text-gray-400" />
-                      class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                    />
                   </div>
                 </template>
 

packages/nc-gui/components/webhook/List.vue

@@ -136,7 +136,7 @@ onMounted(() => {
 
               <template #avatar>
                 <div class="my-1 px-2">
-                  <MdiHook class="text-xl" />
+                  <component :is="iconMap.hook" class="text-xl" />
                 </div>
                 <div class="px-2 text-white rounded" :class="{ 'bg-green-500': item.active, 'bg-gray-500': !item.active }">
                   {{ item.active ? 'ON' : 'OFF' }}

packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@@ -3,6 +3,7 @@ import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { SwipeDirection, breakpointsTailwind } from '@vueuse/core'
 import {
+  iconMap,
   DropZoneRef,
   IsSurveyFormInj,
   computed,
@@ -365,7 +366,7 @@ onMounted(() => {
                     </Transition>
 
                     <Transition name="slide-right" mode="out-in">
-                      <MdiCloseCircleOutline
+                      <component :is="iconMap.closeCircle"
                         v-if="v$.localState[field.title]?.$error || columnValidationError"
                         class="text-red-500 md:text-md"
                       />

packages/nc-gui/pages/account/index.vue

@@ -89,7 +89,7 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
               @click="navigateTo('/account/license')"
             >
               <div class="flex items-center space-x-2">
-                <MdiKey />
+                <component :is="iconMap.key" />
 
                 <div class="select-none">License</div>
               </div>

packages/nc-gui/pages/error/404.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { definePageMeta } from '#imports'
+import { definePageMeta, iconMap } from '#imports'
 
 definePageMeta({
   requiresAuth: false,
@@ -10,7 +10,7 @@ definePageMeta({
 <template>
   <div class="bg-primary bg-opacity-5 w-full h-full flex flex-col justify-center items-center text-4xl gap-12">
     <div class="text-gray-400 flex gap-4 items-center">
-      <MdiWarning />
+      <component :is="iconMap.warning" />
       Page Not Found
     </div>
   </div>

packages/nc-gui/pages/index/index/create-external.vue

@@ -559,7 +559,7 @@ onMounted(async () => {
 
                     <a-input v-model:value="item.value" />
 
-                    <MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
+                    <component :is="iconMap.close" :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
                   </div>
                 </div>
                 <a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">

packages/nc-gui/utils/iconUtils.ts

@@ -15,76 +15,83 @@ import MdiFlagOutline from '~icons/mdi/flag-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiEyeCircleOutline from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
-import PhTableThin from '~icons/ph/TableThin'
+import PhTableThin from '~icons/ph/table-light'
 
-import PhLockIcon from '~icons/ph/lock-key-thin'
+import PhLockIcon from '~icons/ph/lock-key-light'
-import PhAccountIcon from '~icons/ph/user'
+import PhAccountIcon from '~icons/ph/user-light'
-import PhUsersThreeThin from '~icons/ph/users-three-thin'
+import PhUsersThreeThin from '~icons/ph/users-three-light'
-import PhDownloadThin from '~icons/ph/arrow-line-down-thin'
+import PhDownloadThin from '~icons/ph/arrow-line-down-light'
-import PhUploadThin from '~icons/ph/arrow-line-up-thin'
+import PhUploadThin from '~icons/ph/arrow-line-up-light'
-import PhHookThin from '~icons/ph/anchor-thin'
+import PhHookThin from '~icons/ph/anchor-light'
-import PhTreeThin from '~icons/ph/tree-structure-thin'
+import PhTreeThin from '~icons/ph/tree-structure-light'
-import PhPlusThin from '~icons/ph/plus-thin'
+import PhPlusThin from '~icons/ph/plus-light'
-import PhSearchThin from '~icons/ph/magnifying-glass-thin'
+import PhSearchThin from '~icons/ph/magnifying-glass-light'
-import PhCopySimpleThin from '~icons/ph/copy-simple-thin'
+import PhCopySimpleThin from '~icons/ph/copy-simple-light'
-import PhClipboardThin from '~icons/ph/clipboard-text-thin'
+import PhClipboardThin from '~icons/ph/clipboard-text-light'
-import PhGearThin from '~icons/ph/gear-thin'
+import PhGearThin from '~icons/ph/gear-light'
-import PhImageThin from '~icons/ph/image-thin'
+import PhImageThin from '~icons/ph/image-light'
-import PhHardDriveThin from '~icons/ph/hard-drives-thin'
+import PhHardDriveThin from '~icons/ph/hard-drives-light'
-import PhBookThin from '~icons/ph/book-bookmark-thin'
+import PhBookThin from '~icons/ph/book-bookmark-light'
 import PhCaretDownLight from '~icons/ph/caret-down-light'
-import PhDotsThreeOutlineVerticalThin from '~icons/ph/dots-three-outline-vertical-thin'
+import PhCaretRightLight from '~icons/ph/caret-right-light'
-import PhExcelThin from '~icons/ph/microsoft-excel-logo-thin'
+import PhDotsThreeOutlineVerticalThin from '~icons/ph/dots-three-outline-vertical-light'
-import PhCsvThin from '~icons/ph/file-csv-thin'
+import PhDotsThreeOutlineThin from '~icons/ph/dots-three-outline-light'
-import PhBracketsCurlyThin from '~icons/ph/brackets-curly-thin'
+import PhExcelThin from '~icons/ph/microsoft-excel-logo-light'
-import PhTrashThin from '~icons/ph/trash-thin'
+import PhCsvThin from '~icons/ph/file-csv-light'
-import PhPencilSimpleThin from '~icons/ph/pencil-simple-thin'
+import PhBracketsCurlyThin from '~icons/ph/brackets-curly-light'
-import PhLinkSimpleThin from '~icons/ph/link-simple-thin'
+import PhTrashThin from '~icons/ph/trash-light'
-import PhListMagnifyingGlassThin from '~icons/ph/list-magnifying-glass-thin'
+import PhPencilSimpleThin from '~icons/ph/pencil-simple-light'
-import PhStringIcon from '~icons/ph/text-aa-thin'
+import PhLinkSimpleThin from '~icons/ph/link-simple-light'
-import PhTextAreaIcon from '~icons/ph/text-align-left-thin'
+import PhListMagnifyingGlassThin from '~icons/ph/list-magnifying-glass-light'
-import FilePhoneIcon from '~icons/ph/phone-call-thin'
+import PhStringIcon from '~icons/ph/text-aa-light'
-import KeyIcon from '~icons/ph/key-thin'
+import PhTextAreaIcon from '~icons/ph/text-align-left-light'
-import ClockIcon from '~icons/ph/alarm-thin'
+import FilePhoneIcon from '~icons/ph/phone-call-light'
-import WebIcon from '~icons/ph/planet-thin'
+import KeyIcon from '~icons/ph/key-light'
-import BooleanIcon from '~icons/ph/check-square-thin'
+import ClockIcon from '~icons/ph/alarm-light'
-import CalendarIcon from '~icons/ph/calendar-blank-thin'
+import WebIcon from '~icons/ph/planet-light'
-import SingleSelectIcon from '~icons/ph/caret-circle-down-thin'
+import BooleanIcon from '~icons/ph/check-square-light'
-import MultiSelectIcon from '~icons/ph/list-bullets-thin'
+import CalendarIcon from '~icons/ph/calendar-blank-light'
-import DatetimeIcon from '~icons/ph/calendar-thin'
+import SingleSelectIcon from '~icons/ph/caret-circle-down-light'
-import GeoDataIcon from '~icons/ph/map-pin-thin'
+import MultiSelectIcon from '~icons/ph/list-bullets-light'
-import RatingIcon from '~icons/ph/star-thin'
+import DatetimeIcon from '~icons/ph/calendar-light'
-import GenericIcon from '~icons/ph/square-thin'
+import GeoDataIcon from '~icons/ph/map-pin-light'
-import NumericIcon from '~icons/ph/number-square-one-thin'
+import RatingIcon from '~icons/ph/star-light'
-import EmailIcon from '~icons/ph/envelope-thin'
+import GenericIcon from '~icons/ph/square-light'
-import CurrencyIcon from '~icons/ph/currency-circle-dollar-thin'
+import NumericIcon from '~icons/ph/number-square-one-light'
-import PercentIcon from '~icons/ph/percent-thin'
+import EmailIcon from '~icons/ph/envelope-light'
+import CurrencyIcon from '~icons/ph/currency-circle-dollar-light'
+import PercentIcon from '~icons/ph/percent-light'
 import DecimalIcon from '~icons/mdi/decimal'
-import SpecificDBTypeIcon from '~icons/ph/database-thin'
+import DurationIcon from '~icons/ph/clock-clockwise-light'
-import DurationIcon from '~icons/ph/clock-clockwise-thin'
+import PhFunctiontone from '~icons/ph/function-light'
-import PhFunctiontone from '~icons/ph/function-thin'
+import PhQrCodeThin from '~icons/ph/qr-code-light'
-import PhQrCodeThin from '~icons/ph/qr-code-thin'
+import PhBarcodeThin from '~icons/ph/barcode-light'
-import PhBarcodeThin from '~icons/ph/barcode-thin'
+import PhCalculatorThin from '~icons/ph/calculator-light'
-import PhCalculatorThin from '~icons/ph/calculator-thin'
+import PhEyeSlashThin from '~icons/ph/eye-slash-light'
-import PhEyeSlashThin from '~icons/ph/eye-slash-thin'
+import PhEyeThin from '~icons/ph/eye-light'
-import PhEyeThin from '~icons/ph/eye-thin'
+import PhExpandThin from '~icons/ph/arrows-out-simple-light'
-import PhExpandThin from '~icons/ph/arrows-out-simple-thin'
+import PhLifebuoyThin from '~icons/ph/lifebuoy-light'
-import PhLifebuoyThin from '~icons/ph/lifebuoy-thin'
+import PhCheckThin from '~icons/ph/check-light'
-import PhCheckThin from '~icons/ph/check-thin'
+import PhFolderLockThin from '~icons/ph/folder-simple-lock-light'
-import PhFolderLockThin from '~icons/ph/folder-simple-lock-thin'
 import MdiDatabaseSync from '~icons/mdi/database-sync'
-import PhWarningThin from '~icons/ph/warning-thin'
+import PhWarningThin from '~icons/ph/warning-light'
 import HMIcon from '~icons/mdi/table-arrow-right'
 import BTIcon from '~icons/mdi/table-arrow-left'
 import MMIcon from '~icons/mdi/table-network'
-import PhShareThin from '~icons/ph/share-thin'
+import PhShareThin from '~icons/ph/share-light'
-import PhReloadThin from '~icons/ph/arrow-clockwise-thin'
+import PhReloadThin from '~icons/ph/arrow-clockwise-light'
-import PhCodeThin from '~icons/ph/code-thin'
+import PhCodeThin from '~icons/ph/code-light'
-import PhGridNineThin from '~icons/ph/grid-nine-thin'
+import PhFunnelThin from '~icons/ph/funnel-light'
-import PhGridThin from '~icons/ph/grid-four-thin'
+import PhGridNineThin from '~icons/ph/grid-nine-light'
-import PhComputerTowerThin from '~icons/ph/ComputerTowerThin'
+import PhSplitVerticalThin from '~icons/ph/split-vertical-light'
-import PhSquareHalfBottomThin from '~icons/ph/SquareHalfBottomThin'
+import PhGridThin from '~icons/ph/grid-four'
+import PhComputerTowerThin from '~icons/ph/computer-tower-light'
+import PhSquareHalfBottomThin from '~icons/ph/square-half-bottom-light'
 import MdiMapIcon from '~icons/mdi/map-outline'
+import MdiDatabaseSettingsOutline from '~icons/mdi/database-settings-outline'
+import PhXCircleLight from '~icons/ph/x-circle-light'
+import PhXLight from '~icons/ph/x-light'
+import PhXSquareLight from '~icons/ph/x-square-light'
 
 export const iconMap = {
   lock: PhLockIcon,
@@ -103,7 +110,9 @@ export const iconMap = {
   datasource: PhHardDriveThin,
   book: PhBookThin,
   arrowDown: PhCaretDownLight,
+  arrowRight: PhCaretRightLight,
   threeDotVertical: PhDotsThreeOutlineVerticalThin,
+  threeDotHorizontal: PhDotsThreeOutlineThin,
   table: PhTableThin,
   excel: PhExcelThin,
   csv: PhCsvThin,
@@ -129,7 +138,7 @@ export const iconMap = {
   currency: CurrencyIcon,
   percent: PercentIcon,
   decimal: DecimalIcon,
-  specificDbType: SpecificDBTypeIcon,
+  specificDbType: MdiDatabaseSettingsOutline,
   duration: DurationIcon,
   phone: FilePhoneIcon,
   formula: PhFunctiontone,
@@ -156,6 +165,12 @@ export const iconMap = {
   map: MdiMapIcon,
   kanban: PhSquareHalfBottomThin,
   view: PhEyeThin,
+  rowHeight: PhSplitVerticalThin,
+  filter: PhFunnelThin,
+  closeCircle: PhXCircleLight,
+  closeBox: PhXSquareLight,
+  close: PhXLight,
+
   mm: MMIcon,
   hm: HMIcon,
   bt: BTIcon,