refactor: update expand and eye icon

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

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

@@ -7,6 +7,7 @@ import {
   DropZoneRef,
   IsGalleryInj,
   IsKanbanInj,
+  iconMap,
   inject,
   isImage,
   nextTick,
@@ -243,7 +244,8 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments</template>
 
-          <MdiArrowExpand
+          <component
+            :is="iconMap.expand"
             class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
             @click.stop="modalVisible = true"
           />

packages/nc-gui/components/erd/HistogramPanel.vue

@@ -1,17 +1,18 @@
 <script lang="ts" setup>
 import { Panel, PanelPosition } from '@vue-flow/additional-components'
+import { iconMap } from '#imports'
 </script>
 
 <template>
   <Panel class="text-xs bg-white border-1 rounded border-gray-200 z-50 nc-erd-histogram" :position="PanelPosition.BottomRight">
     <div class="flex flex-col divide-y-1">
       <div class="flex items-center gap-1 p-2">
-        <MdiTableLarge class="text-primary" />
+        <component :is="iconMap.table" class="text-primary" />
         <div>{{ $t('objects.table') }}</div>
       </div>
 
       <div class="flex items-center gap-1 p-2">
-        <MdiEyeCircleOutline class="text-primary" />
+        <component :is="iconMap.eye" class="text-primary" />
         <div>{{ $t('objects.sqlVIew') }}</div>
       </div>
     </div>

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

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { onUnmounted, ref, useEventListener, useGlobal, useI18n, useNuxtApp, watch } from '#imports'
+import { iconMap } from '~/utils'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
 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'
 
@@ -25,7 +25,7 @@ const roleIcon = {
   owner: MdiAccountStar,
   creator: MdiAccountHardHat,
   editor: MdiAccountEdit,
-  viewer: MdiEyeOutline,
+  viewer: iconMap.eye,
   commenter: MdiCommentAccountOutline,
 }
 

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Icon as IcIcon } from '@iconify/vue'
 import type { TableType } from 'nocodb-sdk'
+import { iconMap } from '#imports'
 
 const { meta: tableMeta } = defineProps<{
   meta: TableType
@@ -15,6 +16,6 @@ const { meta: tableMeta } = defineProps<{
     :icon="tableMeta.meta?.icon"
   />
 
-  <MdiEyeCircleOutline v-else-if="tableMeta?.type === 'view'" class="w-5" />
-  <MdiTableLarge v-else class="w-5" />
+  <component :is="iconMap.eye" v-else-if="tableMeta?.type === 'view'" class="w-5" />
+  <component :is="iconMap.table" v-else class="w-5" />
 </template>

packages/nc-gui/components/smartsheet/Form.vue

@@ -597,7 +597,8 @@ watch(view, (nextView) => {
                     v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)"
                     class="absolute flex top-2 right-2"
                   >
-                    <MdiEyeOffOutline
+                    <component
+                      :is="iconMap['eye-slash']"
                       class="opacity-0 nc-field-remove-icon"
                       data-testid="nc-field-remove-icon"
                       @click.stop="hideColumn(index)"

packages/nc-gui/components/smartsheet/Grid.vue

@@ -830,7 +830,8 @@ const closeAddColumnDropdown = () => {
                             v-else
                             class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
                           >
-                            <MdiArrowExpand
+                            <component
+                              :is="iconMap.expand"
                               v-e="['c:row-expand']"
                               class="select-none transform hover:(text-accent scale-120) nc-row-expand"
                               @click="expandForm(row, state)"

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -588,7 +588,7 @@ watch(view, async (nextView) => {
           <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
             <a-menu-item v-if="contextMenuTarget" @click="expandForm(contextMenuTarget)">
               <div v-e="['a:kanban:expand-record']" class="nc-project-menu-item nc-kanban-context-menu-item">
-                <MdiArrowExpand class="flex" />
+                <component :is="iconMap.expand" class="flex" />
                 <!-- Expand Record -->
                 {{ $t('activity.expandRecord') }}
               </div>

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -248,7 +248,7 @@ const hideField = async () => {
         <a-divider class="!my-0" />
         <a-menu-item v-if="!column?.pv" @click="hideField">
           <div v-e="['a:field:hide']" class="nc-column-insert-before nc-header-menu-item">
-            <MdiEyeOffOutline class="text-primary" />
+            <component :is="iconMap.eye" class="text-primary" />
             <!-- Hide Field -->
             {{ $t('general.hideField') }}
           </div>

packages/nc-gui/components/virtual-cell/BelongsTo.vue

@@ -12,6 +12,7 @@ import {
   RowInj,
   computed,
   createEventHook,
+  iconMap,
   inject,
   ref,
   useProvideLTARStore,
@@ -19,8 +20,6 @@ import {
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
 } from '#imports'
-import MdiArrowExpand from '~icons/mdi/arrow-expand'
-import MdiPlus from '~icons/mdi/plus'
 
 const column = inject(ColumnInj)!
 
@@ -53,7 +52,7 @@ const { loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvid
 
 await loadRelatedTableMeta()
 
-const addIcon = computed(() => (cellValue?.value ? MdiArrowExpand : MdiPlus))
+const addIcon = computed(() => (cellValue?.value ? iconMap.expand : iconMap.plus))
 
 const value = computed(() => {
   if (cellValue?.value) {

packages/nc-gui/components/virtual-cell/HasMany.vue

@@ -114,7 +114,8 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       </div>
 
       <div v-if="!isLocked" class="flex justify-end gap-1 min-h-[30px] items-center">
-        <MdiArrowExpand
+        <component
+          :is="iconMap.expand"
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click.stop="childListDlg = true"
         />

packages/nc-gui/components/virtual-cell/ManyToMany.vue

@@ -116,7 +116,8 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       </div>
 
       <div v-if="!isLocked" class="flex justify-end gap-1 min-h-[30px] items-center">
-        <MdiArrowExpand
+        <component
+          :is="iconMap.expand"
           class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click.stop="childListDlg = true"
         />

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

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
-import { iconMap } from '#imports';
-
 import {
   TabType,
   computed,
   definePageMeta,
   extractSdkResponseErrorMsg,
+  iconMap,
   isDrawerOrModalExist,
   isMac,
   message,

packages/nc-gui/utils/iconUtils.ts

@@ -15,7 +15,6 @@ 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 PhEyeThin from '~icons/ph/EyeThin'
 import PhTableThin from '~icons/ph/TableThin'
 
 import PhLockIcon from '~icons/ph/lock-key-thin'
@@ -67,6 +66,9 @@ import PhFunctionDuotone from '~icons/ph/function-duotone'
 import PhQrCodeThin from '~icons/ph/qr-code-thin'
 import PhBarcodeThin from '~icons/ph/barcode-thin'
 import PhCalculatorThin from '~icons/ph/calculator-thin'
+import PhEyeSlashThin from '~icons/ph/eye-slash-thin'
+import PhEyeThin from '~icons/ph/eye-thin'
+import PhExpandThin from '~icons/ph/arrows-out-simple-thin'
 
 export const iconMap = {
   'mdi-check-bold': MdiCheckBold,
@@ -138,6 +140,9 @@ export const iconMap = {
   'qr-code': PhQrCodeThin,
   'bar-code': PhBarcodeThin,
   'calculator': PhCalculatorThin,
+  'eye': PhEyeThin,
+  'eye-slash': PhEyeSlashThin,
+  'expand': PhExpandThin,
 } as const
 
 export const getMdiIcon = (type: string): any => {