refactor: update share and reload icon

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

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

@@ -104,7 +104,7 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     <div class="max-w-[900px] mx-auto p-4" data-testid="nc-token-list">
       <div class="py-2 flex gap-4 items-center">
         <div class="flex-grow"></div>
-        <MdiReload class="cursor-pointer" @click="loadTokens" />
+        <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 />

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

@@ -144,7 +144,7 @@ const copyPasswordResetUrl = async (user: User) => {
         >
         </a-input-search>
         <div class="flex-grow"></div>
-        <MdiReload class="cursor-pointer" @click="loadUsers" />
+        <component :is="iconMap.reload" class="cursor-pointer" @click="loadUsers" />
         <a-button
           data-testid="nc-super-user-invite"
           size="small"

packages/nc-gui/components/cell/GeoData.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { GeoLocationType } from 'nocodb-sdk'
-import { Modal as AModal, latLongToJoinedString, useVModel } from '#imports'
+import { Modal as AModal, latLongToJoinedString, useVModel, iconMap } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -135,7 +135,7 @@ const openInOSM = () => {
         </a-form-item>
         <a-form-item>
           <div class="mr-2 flex flex-col items-end gap-1 text-left">
-            <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin text-gray-500': isLoading }" />
+            <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin text-gray-500': isLoading }" />
             <a-button class="ml-2" @click="onClickSetCurrentLocation"
               ><MdiGpsFixed class="mr-2" />{{ $t('labels.currentLocation') }}</a-button
             >

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

@@ -189,7 +189,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
       data-testid="attachment-cell-file-picker-button"
       @click.stop="open"
     >
-      <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+      <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
       <a-tooltip v-else placement="bottom">
         <template #title> Click or drop a file into cell</template>
@@ -239,7 +239,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
       <div
         class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       >
-        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+        <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments</template>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Tooltip as ATooltip, Empty } from 'ant-design-vue'
 import type { AuditType } from 'nocodb-sdk'
-import { h, onMounted, storeToRefs, timeAgo, useGlobal, useI18n, useNuxtApp, useProject } from '#imports'
+import { h, onMounted, storeToRefs, timeAgo, useGlobal, useI18n, useNuxtApp, useProject, iconMap } from '#imports'
 
 const { $api } = useNuxtApp()
 
@@ -94,7 +94,7 @@ const columns = [
       <a-button class="self-start" @click="loadAudits">
         <!-- Reload -->
         <div class="flex items-center gap-2 text-gray-600 font-light">
-          <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+          <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
 
           {{ $t('general.reload') }}
         </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Empty, extractSdkResponseErrorMsg, h, message, storeToRefs, useI18n, useNuxtApp, useProject } from '#imports'
+import { Empty, extractSdkResponseErrorMsg, h, message, storeToRefs, useI18n, useNuxtApp, useProject, iconMap } from '#imports'
 
 const props = defineProps<{
   baseId: string
@@ -92,7 +92,7 @@ const columns = [
         <!--        Reload -->
         <a-button v-e="['a:proj-meta:meta-data:reload']" class="self-start nc-btn-metasync-reload" @click="loadMetaDiff">
           <div class="flex items-center gap-2 text-gray-600 font-light">
-            <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+            <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
             {{ $t('general.reload') }}
           </div>
         </a-button>

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

@@ -238,7 +238,7 @@ watch(
                 @click="dataSourcesReload = true"
               >
                 <div class="flex items-center gap-2 text-gray-600 font-light">
-                  <MdiReload :class="{ 'animate-infinite animate-spin !text-success': dataSourcesReload }" />
+                  <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': dataSourcesReload }" />
                   {{ $t('general.reload') }}
                 </div>
               </a-button>

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

@@ -8,6 +8,7 @@ import {
   onMounted,
   storeToRefs,
   useGlobal,
+  iconMap,
   useI18n,
   useNuxtApp,
   useProject,
@@ -126,7 +127,7 @@ const columns = [
 
         <a-button class="self-start nc-acl-reload" @click="loadTableList">
           <div class="flex items-center gap-2 text-gray-600 font-light">
-            <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+            <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
             Reload
           </div>
         </a-button>

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

@@ -95,7 +95,7 @@ export default defineComponent({
 
       const { icon: Icon, color } = renderIcon(column.value, relationColumn)
 
-      return h(Icon, { class: `${color} mx-1 !text-xs` })
+      return h(Icon, { class: `${color} mx-1`,style: { fontSize: '16px' }  })
     }
   },
 })

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

@@ -157,7 +157,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">
-          <PhEyeThin />
+          <component :is="iconMap.eye" />
 
           <!-- Fields -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>

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

@@ -250,7 +250,7 @@ const copyIframeCode = async () => {
       @click="genShareLink"
     >
       <div class="flex items-center gap-1">
-        <PhShareThin />
+        <component :is="iconMap.share" />
         <!-- Share View -->
         <span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.shareView') }}</span>
       </div>
@@ -273,7 +273,7 @@ const copyIframeCode = async () => {
         <div class="flex-1 h-min text-xs text-gray-500">{{ sharedViewUrl }}</div>
 
         <a v-e="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
-          <MdiOpenInNew class="text-sm text-gray-500" />
+          <component :is="iconMap.share" class="text-sm text-gray-500" />
         </a>
 
         <component

packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue

@@ -169,7 +169,7 @@ onMounted(() => {
         <div class="flex flex-row space-x-1">
           <a-button size="middle" type="text" @click="loadApiTokens()">
             <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-              <MdiReload class="text-gray-500" />
+              <component :is="iconMap.reload" class="text-gray-500" />
               <div class="text-gray-500">{{ $t('general.reload') }}</div>
             </div>
           </a-button>

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -230,7 +230,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
       <div class="flex flex-row space-x-1">
         <a-button v-e="['a:user:reload']" size="middle" type="text" @click="loadUsers()">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiReload class="text-gray-500" />
+            <component :is="iconMap.reload" class="text-gray-500" />
             <div class="text-gray-500">{{ $t('general.reload') }}</div>
           </div>
         </a-button>

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -154,7 +154,7 @@ onMounted(() => {
 <template>
   <div class="flex flex-col w-full" data-testid="nc-share-base-sub-modal">
     <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
-      <MdiOpenInNew />
+      <component :is="iconMap.share" />
 
       <div class="text-xs">{{ $t('activity.shareBase.link') }}</div>
     </div>
@@ -170,7 +170,7 @@ onMounted(() => {
 
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="recreate">
             <template #icon>
-              <MdiReload class="flex mx-auto text-gray-600" />
+              <component :is="iconMap.reload" class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -194,7 +194,7 @@ onMounted(() => {
 
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="navigateToSharedBase">
             <template #icon>
-              <MdiOpenInNew class="flex mx-auto text-gray-600" />
+              <component :is="iconMap.share"  class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -206,7 +206,7 @@ onMounted(() => {
 
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="generateEmbeddableIframe">
             <template #icon>
-              <MdiXml class="flex mx-auto text-gray-600" />
+             <component :is="iconMap.xml" class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -231,7 +231,7 @@ watch(
 
         <div v-else class="flex flex-col pb-4">
           <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
-            <MdiAccountOutline />
+            <component :is="iconMap.account" />
             <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? $t('activity.editUser') : $t('activity.inviteTeam') }}</div>
           </div>
 

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

@@ -112,7 +112,7 @@ const onClick = (row: Row) => {
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
       <div class="flex mb-4 items-center gap-2 px-12">
         <div class="flex-1" />
-        <MdiReload
+        <component :is="iconMap.reload"
           v-if="!isForm"
           class="cursor-pointer text-gray-500"
           data-testid="nc-child-list-reload"

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

@@ -5,6 +5,7 @@ import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
   ColumnInj,
   Empty,
+  iconMap,
   IsPublicInj,
   SaveRowInj,
   computed,
@@ -210,7 +211,7 @@ watch(vModel, (nextVal) => {
 
         <div class="flex-1" />
 
-        <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
+        <component :is="iconMap.reload" class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
 
         <!--        Add new record -->
         <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">

packages/nc-gui/layouts/base.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, navigateTo, ref, useGlobal, useNuxtApp, useRoute, useSidebar } from '#imports'
+import { computed, navigateTo, ref, useGlobal, useNuxtApp, useRoute, useSidebar, iconMap } from '#imports'
 
 const { signOut, signedIn, isLoading, user, currentVersion } = useGlobal()
 
@@ -60,7 +60,7 @@ hooks.hook('page:finish', () => {
           <div v-show="isLoading" class="flex items-center gap-2 ml-3" data-testid="nc-loading">
             {{ $t('general.loading') }}
 
-            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+            <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin': isLoading }" />
           </div>
         </div>
 

packages/nc-gui/layouts/shared-view.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { navigateTo, useEventListener, useRouter } from '#imports'
+import { navigateTo, useEventListener, useRouter , iconMap} from '#imports'
 
 const { isLoading, appInfo } = useGlobal()
 
@@ -65,7 +65,7 @@ export default {
               <template v-if="isLoading">
                 <span class="text-white" data-testid="nc-loading">{{ $t('general.loading') }}</span>
 
-                <MdiReload :class="{ 'animate-infinite animate-spin ': isLoading }" />
+                <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin ': isLoading }" />
               </template>
 
               <div v-else class="text-xl font-semibold truncate text-white nc-shared-view-title flex gap-2 items-center">

packages/nc-gui/utils/iconUtils.ts

@@ -77,6 +77,9 @@ import PhWarningThin from '~icons/ph/warning-thin'
 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 PhReloadThin from '~icons/ph/arrow-clockwise-thin'
+import PhCodeThin from '~icons/ph/code-thin'
 
 export const iconMap = {
   lock: PhLockIcon,
@@ -138,6 +141,9 @@ export const iconMap = {
   acl: PhFolderLockThin,
   sync: MdiDatabaseSync,
   warning: PhWarningThin,
+  share: PhShareThin,
+  reload: PhReloadThin,
+  xml: PhCodeThin,
 
   mm: MMIcon,
   hm: HMIcon,