refactor: move all icons to iconMap (WIP)

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

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

@@ -6,12 +6,12 @@ import {
   computed,
   emailValidator,
   extractSdkResponseErrorMsg,
+  iconMap,
   message,
   ref,
   useCopy,
   useDashboard,
   useI18n,
-  iconMap,
   useNuxtApp,
 } from '#imports'
 import type { User } from '~/lib'

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 , iconMap} from '#imports'
+import { computed, iconMap, isImage, onClickOutside, ref, useAttachment } from '#imports'
 
 const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
 
@@ -53,7 +53,11 @@ 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">
-          <component :is="iconMap.closeCircle" 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 , iconMap} from '#imports'
+import { iconMap, isImage, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -133,7 +133,8 @@ function onRemoveFileClick(title: any, i: number) {
 
             <a-tooltip v-if="!readOnly">
               <template #title> Remove File </template>
-              <component :is="iconMap.closeCircle"
+              <component
+                :is="iconMap.closeCircle"
                 v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublic && !isLocked)"
                 class="nc-attachment-remove"
                 @click.stop="onRemoveFileClick(item.title, i)"

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

@@ -372,7 +372,12 @@ const setIcon = async (icon: string, table: TableType) => {
           </Transition>
 
           <Transition name="layout" mode="out-in">
-            <component :is="iconMap.close" 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>
@@ -399,7 +404,12 @@ const setIcon = async (icon: string, table: TableType) => {
           </Transition>
 
           <Transition name="slide-right" mode="out-in">
-            <component :is="iconMap.close" 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="onSearchIconClick" />
           </Transition>
 
@@ -456,7 +466,7 @@ const setIcon = async (icon: string, table: TableType) => {
                     target="_blank"
                     class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
                   >
-                    <MdiOpenInNew class="group-hover:text-accent" />
+                    <component :is="iconMap.openInNew" class="group-hover:text-accent" />
                     <!-- Request a data source you need? -->
                     {{ $t('labels.requestDataSource') }}
                   </a>
@@ -579,7 +589,7 @@ const setIcon = async (icon: string, table: TableType) => {
                       target="_blank"
                       class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
                     >
-                      <MdiOpenInNew class="group-hover:text-accent" />
+                      <component :is="iconMap.openInNew" class="group-hover:text-accent" />
                       <!-- Request a data source you need? -->
                       {{ $t('labels.requestDataSource') }}
                     </a>
@@ -846,7 +856,7 @@ const setIcon = async (icon: string, table: TableType) => {
                               @click="openAirtableImportDialog(base.id)"
                             >
                               <div class="color-transition nc-project-menu-item group">
-                                <MdiTableLarge class="group-hover:text-accent" />
+                                <component :is="iconMap.airtable" class="group-hover:text-accent" />
                                 Airtable
                               </div>
                             </a-menu-item>
@@ -857,7 +867,7 @@ const setIcon = async (icon: string, table: TableType) => {
                               @click="openQuickImportDialog('csv', base.id)"
                             >
                               <div class="color-transition nc-project-menu-item group">
-                                <MdiFileDocumentOutline class="group-hover:text-accent" />
+                                <component :is="iconMap.csv" class="group-hover:text-accent" />
                                 CSV file
                               </div>
                             </a-menu-item>
@@ -868,7 +878,7 @@ const setIcon = async (icon: string, table: TableType) => {
                               @click="openQuickImportDialog('json', base.id)"
                             >
                               <div class="color-transition nc-project-menu-item group">
-                                <MdiCodeJson class="group-hover:text-accent" />
+                                <component :is="iconMap.json" class="group-hover:text-accent" />
                                 JSON file
                               </div>
                             </a-menu-item>
@@ -879,7 +889,7 @@ const setIcon = async (icon: string, table: TableType) => {
                               @click="openQuickImportDialog('excel', base.id)"
                             >
                               <div class="color-transition nc-project-menu-item group">
-                                <MdiFileExcel class="group-hover:text-accent" />
+                                <component :is="iconMap.excel" class="group-hover:text-accent" />
                                 Microsoft Excel
                               </div>
                             </a-menu-item>
@@ -894,7 +904,7 @@ const setIcon = async (icon: string, table: TableType) => {
                               target="_blank"
                               class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
                             >
-                              <MdiOpenInNew class="group-hover:text-accent" />
+                              <component :is="iconMap.openInNew" class="group-hover:text-accent" />
                               <!-- Request a data source you need? -->
                               {{ $t('labels.requestDataSource') }}
                             </a>

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

@@ -121,7 +121,7 @@ const columns = [
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <a-input v-model:value="searchInput" placeholder="Search models" class="nc-acl-search">
           <template #prefix>
-            <MdiMagnify />
+            <component :is="iconMap.search" />
           </template>
         </a-input>
 
@@ -134,7 +134,7 @@ const columns = [
 
         <a-button class="self-start nc-acl-save" @click="saveUIAcl">
           <div class="flex items-center gap-2 text-gray-600 font-light">
-            <MdiContentSave />
+            <component :is="iconMap.save" />
             Save
           </div>
         </a-button>

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

@@ -566,7 +566,11 @@ watch(
 
                     <a-input v-model:value="item.value" />
 
-                    <component :is="iconMap.close" :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,11 @@ onMounted(async () => {
 
                     <a-input v-model:value="item.value" />
 
-                    <component :is="iconMap.close" :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">
@@ -589,7 +593,7 @@ onMounted(async () => {
         </div>
       </a-form-item>
       <div class="w-full flex items-center mt-2 text-[#e65100]">
-        <MdiWarning class="mr-1" />
+        <component :is="iconMap.warning" class="mr-1" />
         Please make sure database you are trying to connect is valid! This operation can cause schema loss!!
       </div>
     </a-form>

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

@@ -3,11 +3,11 @@ 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,
   fieldRequiredValidator,
+  iconMap,
   message,
   nextTick,
   onBeforeUnmount,

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

@@ -12,6 +12,7 @@ import {
   computed,
   extractSdkResponseErrorMsg,
   fieldRequiredValidator,
+  iconMap,
   importCsvUrlValidator,
   importExcelUrlValidator,
   importUrlValidator,
@@ -413,7 +414,7 @@ const beforeUpload = (file: UploadFile) => {
             <a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false">
               <template #tab>
                 <span class="flex items-center gap-2">
-                  <MdiCodeJson />
+                  <component :is="iconMap.json" />
                   JSON Editor
                 </span>
               </template>

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

@@ -1,5 +1,17 @@
 <script setup lang="ts">
-import { Form, computed, nextTick, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
+import {
+  Form,
+  computed,
+  iconMap,
+  nextTick,
+  onMounted,
+  ref,
+  useProject,
+  useTable,
+  useTabs,
+  useVModel,
+  validateTableName,
+} from '#imports'
 import { TabType } from '~/lib'
 
 const props = defineProps<{
@@ -143,8 +155,8 @@ onMounted(() => {
           <div class="pointer flex flex-row items-center gap-x-1" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
             {{ isAdvanceOptVisible ? $t('general.hideAll') : $t('general.showMore') }}
 
-            <MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
+            <component :is="iconMap.minusCircle" v-if="isAdvanceOptVisible" class="text-gray-500" />
-            <MdiPlusCircleOutline v-else class="text-gray-500" />
+            <component :is="iconMap.plusCircle" v-else class="text-gray-500" />
           </div>
         </div>
         <div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { iconMap } from '#imports'
+
 const { isUIAllowed } = useUIPermission()
 
 const { t } = useI18n()
@@ -14,7 +16,7 @@ const toggleDialog = inject(ToggleDialogInj, () => {})
   >
     <div>
       <div class="flex items-center space-x-1">
-        <PhUsersThreeThin class="mr-1 nc-new-base" />
+        <component :is="iconMap.users" class="mr-1 nc-new-base" />
         <div>{{ t('title.teamAndSettings') }}</div>
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, storeToRefs, useGlobal, useProject, useRoute } from '#imports'
+import { iconMap, ref, storeToRefs, useGlobal, useProject, useRoute } from '#imports'
 
 const showDrawer = ref(false)
 
@@ -19,7 +19,7 @@ const openSwaggerLink = () => {
     class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)"
     @click="showDrawer = true"
   >
-    <PhChatTextThin class="mr-1" />
+    <component :is="iconMap.apiAndSupport" class="mr-1" />
 
     <!-- APIs & Support -->
     <div>{{ $t('title.APIsAndSupport') }}</div>

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

@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+import { iconMap } from '#imports'
+</script>
+
 <template>
   <a
     v-e="['c:navbar:join-cloud']"
@@ -5,7 +9,7 @@
     href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url"
     target="_blank"
   >
-    <PhCloudLightningThin class="mr-1" />
+    <component :is="iconMap.cloud" class="mr-1" />
     Join NocoDB Cloud
   </a>
 </template>

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

@@ -42,7 +42,7 @@ const logout = async () => {
           <a-menu-item-group title="User Settings">
             <a-menu-item key="email" class="!rounded-t">
               <nuxt-link v-e="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
-                <MdiAt class="mt-1 group-hover:text-success" />
+                <component :is="iconMap.at" class="mt-1 group-hover:text-success" />
                 &nbsp;
                 <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
               </nuxt-link>
@@ -52,7 +52,7 @@ const logout = async () => {
 
             <a-menu-item key="signout" class="!rounded-b">
               <div v-e="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
-                <MdiLogout class="group-hover:(!text-red-500)" />&nbsp;
+                <component :is="iconMap.signout" class="group-hover:(!text-red-500)" />&nbsp;
                 <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
                   {{ $t('general.signOut') }}
                 </span>
@@ -66,7 +66,7 @@ const logout = async () => {
     <div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
       <a-dropdown :trigger="['contextmenu']" placement="right" overlay-class-name="nc-dropdown">
         <div :class="[route.name === 'index' ? 'active' : '']" class="nc-mini-sidebar-item" @click="navigateTo('/')">
-          <MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
+          <component :is="iconMap.folder" class="cursor-pointer transform hover:scale-105 text-2xl" />
         </div>
 
         <template #overlay>
@@ -95,7 +95,7 @@ const logout = async () => {
                   class="group flex items-center gap-2 py-2 hover:text-primary"
                   @click="navigateTo('/project/create-external')"
                 >
-                  <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
+                  <component :is="iconMap.database" class="text-lg group-hover:text-accent" />
                   <div v-html="$t('activity.createProjectExtended.extDB')" />
                 </div>
               </a-menu-item>
@@ -112,7 +112,7 @@ const logout = async () => {
           class="nc-mini-sidebar-item"
           @click="navigateTo(`/${route.params.projectType}/${route.params.projectId}`)"
         >
-          <MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
+          <component :is="iconMap.database" class="cursor-pointer transform hover:scale-105 text-2xl" />
         </div>
       </a-tooltip>
     </div>

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

@@ -82,7 +82,7 @@ watch(previewAs, (newRole) => {
 
       <!-- Close -->
       <div class="flex items-center gap-2 cursor-pointer nc-preview-btn-exit-to-app" @click="previewAs = null">
-        <MdiExitToApp />
+        <component :is="iconMap.exit" />
         {{ $t('general.close') }}
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDrawerOrModalExist, isMac, useNuxtApp, useRoute, useUIPermission } from '#imports'
+import { iconMap, isDrawerOrModalExist, isMac, useNuxtApp, useRoute, useUIPermission } from '#imports'
 
 const route = useRoute()
 
@@ -45,7 +45,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         </template>
         <a-button type="primary" class="!rounded-md mr-1" size="medium">
           <div class="flex items-center space-x-1 cursor-pointer text-xs font-weight-bold">
-            <MdiAccountPlusOutline class="mr-1 nc-share-base hover:text-accent text-sm" />
+            <component :is="iconMap.accountPlus" class="mr-1 nc-share-base hover:text-accent text-sm" />
             {{ $t('activity.share') }}
           </div>
         </a-button>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useI18n } from '#imports'
+import { iconMap, useI18n } from '#imports'
 
 const { locale } = useI18n()
 
@@ -19,7 +19,12 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
   />
 
   <div v-else class="flex justify-between gap-1 w-full px-2">
-    <MdiDiscord v-e="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" />
+    <component
+      :is="iconMap.discord"
+      v-e="['e:community:discord']"
+      class="icon text-[#7289DA]"
+      @click="open('https://discord.gg/5RgZmkW')"
+    />
 
     <div
       v-e="['e:community:discourse']"
@@ -29,11 +34,22 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
       <div class="discourse" />
     </div>
 
-    <MdiReddit v-e="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
+    <component
+      :is="iconMap.reddit"
+      v-e="['e:community:reddit']"
+      class="icon text-[#FF4600]"
+      @click="open('https://www.reddit.com/r/NocoDB/')"
+    />
 
-    <MdiTwitter v-e="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
+    <component
+      :is="iconMap.twitter"
+      v-e="['e:community:twitter']"
+      class="icon text-[#1DA1F2]"
+      @click="open('https://twitter.com/NocoDB')"
+    />
 
-    <MdiCalendarMonth
+    <component
+      :is="iconMap.calendar"
       v-e="['e:community:book-demo']"
       class="icon text-green-500"
       @click="open('https://calendly.com/nocodb-meeting')"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { enumColor as colors, useDialog, useGlobal, useNuxtApp } from '#imports'
+import { enumColor as colors, iconMap, useDialog, useGlobal, useNuxtApp } from '#imports'
 
 const { $e } = useNuxtApp()
 
@@ -39,7 +39,7 @@ function openKeyboardShortcutDialog() {
           to="https://docs.nocodb.com/"
         >
           <div class="ml-3 flex items-center text-sm">
-            <MdiBookOpenOutline class="text-lg text-accent" />
+            <component :is="iconMap.book" class="text-lg text-accent" />
             <span class="ml-3">{{ $t('labels.documentation') }}</span>
           </div>
         </nuxt-link>
@@ -55,7 +55,7 @@ function openKeyboardShortcutDialog() {
           to="https://apis.nocodb.com/"
         >
           <div class="ml-3 flex items-center text-sm">
-            <MdiJson class="text-lg text-green-500" />
+            <component :is="iconMap.json" class="text-lg text-green-500" />
             <!--            todo:  i18n -->
             <span class="ml-3">API {{ $t('labels.documentation') }}</span>
           </div>
@@ -72,7 +72,7 @@ function openKeyboardShortcutDialog() {
           target="_blank"
         >
           <div class="flex items-center text-sm">
-            <mdi-github class="mx-3 text-lg" />
+            <component :is="iconMap.github" class="mx-3 text-lg" />
             <div v-if="isRtlLang">
               <!-- us on Github -->
               {{ $t('labels.community.starUs2') }}
@@ -101,7 +101,7 @@ function openKeyboardShortcutDialog() {
           target="_blank"
         >
           <div class="flex items-center text-sm">
-            <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
+            <component :is="iconMap.calendar" class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
             <!-- Book a Free DEMO -->
             <div>
               {{ $t('labels.community.bookDemo') }}
@@ -120,7 +120,7 @@ function openKeyboardShortcutDialog() {
           target="_blank"
         >
           <div class="flex items-center text-sm">
-            <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
+            <component :is="iconMap.discord" class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
             <!-- Get your questions answered -->
             <div>
               {{ $t('labels.community.getAnswered') }}
@@ -139,7 +139,7 @@ function openKeyboardShortcutDialog() {
           target="_blank"
         >
           <div class="flex items-center text-sm">
-            <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
+            <component :is="iconMap.twitter" class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
             <!-- Follow NocoDB -->
             <div>
               {{ $t('labels.community.followNocodb') }}
@@ -176,7 +176,7 @@ function openKeyboardShortcutDialog() {
           to="https://www.reddit.com/r/NocoDB/"
         >
           <div class="ml-3 flex items-center text-sm">
-            <LogosRedditIcon />
+            <component :is="iconMap.reddit" color="red" />
             <span class="ml-4">/r/NocoDB/</span>
           </div>
         </nuxt-link>
@@ -184,7 +184,7 @@ function openKeyboardShortcutDialog() {
 
       <a-list-item @click="openKeyboardShortcutDialog">
         <div class="ml-3 flex items-center text-sm">
-          <MdiKeyboard class="text-lg text-primary" />
+          <component :is="iconMap.keyboard" class="text-lg text-primary" />
           <span class="ml-4">{{ $t('title.keyboardShortcut') }}</span>
         </div>
       </a-list-item>

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

@@ -208,7 +208,8 @@ watch(inputs, () => {
               />
             </div>
 
-            <component :is="iconMap.close"
+            <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/Comments.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
 import type { AuditType } from 'nocodb-sdk'
-import { enumColor, ref, timeAgo, useCopy, useExpandedFormStoreOrThrow, useGlobal, useI18n, watch } from '#imports'
+import { enumColor, iconMap, ref, timeAgo, useCopy, useExpandedFormStoreOrThrow, useGlobal, useI18n, watch } from '#imports'
 
 const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment, updateComment } =
   useExpandedFormStoreOrThrow()
@@ -133,7 +133,11 @@ watch(
         <div v-for="(log, idx) of commentsAndLogs" :key="log.id">
           <a-dropdown :trigger="['contextmenu']" :overlay-class-name="`nc-dropdown-comment-context-menu-${idx}`">
             <div class="flex gap-1 text-xs">
-              <MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
+              <component
+            :is="iconMap.accountCircle"
+            class="row-span-2"
+            :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '"
+          />
 
               <div class="flex-1">
                 <p class="mb-1 caption edited-text text-[10px] text-gray-500">
@@ -208,12 +212,12 @@ watch(
         >
           <template #addonBefore>
             <div class="flex items-center">
-              <mdi-account-circle class="text-lg text-pink-300" small @click="saveComment" />
+              <component :is="iconMap.accountCircle" class="text-lg text-pink-300" small @click="saveComment" />
             </div>
           </template>
 
           <template #suffix>
-            <mdi-keyboard-return v-if="comment" class="text-sm" small @click="saveComment" />
+            <component :is="iconMap.returnKey" v-if="comment" class="text-sm" small @click="saveComment" />
           </template>
         </a-input>
       </div>

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

@@ -107,7 +107,8 @@ const onConfirmDeleteRowClick = async () => {
         <!-- todo: i18n -->
         <div class="text-center w-full">Copy record URL</div>
       </template>
-      <mdi-link
+      <component
+        :is="iconMap.link"
         v-if="!isNew"
         class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
         @click="copyRecordUrl"
@@ -186,7 +187,8 @@ 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">
-              <component :is="iconMap.closeCircle"
+              <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/toolbar/ColumnFilter.vue

@@ -2,13 +2,13 @@
 import type { ColumnType, FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import {
-  iconMap,
   ActiveViewInj,
   MetaInj,
   ReloadViewDataHookInj,
   comparisonOpList,
   comparisonSubOpList,
   computed,
+  iconMap,
   inject,
   ref,
   useNuxtApp,
@@ -214,7 +214,8 @@ defineExpose({
       <template v-for="(filter, i) in filters" :key="i">
         <template v-if="filter.status !== 'delete'">
           <template v-if="filter.is_group">
-            <component :is="iconMap.closeBox"
+            <component
+              :is="iconMap.closeBox"
               v-if="!filter.readOnly"
               :key="i"
               small
@@ -252,7 +253,8 @@ defineExpose({
             </div>
           </template>
           <template v-else>
-            <component :is="iconMap.closeBox"
+            <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/Erd.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {iconMap} from '#imports'
+import { iconMap } from '#imports'
 
 interface Props {
   modelValue: boolean

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

@@ -76,7 +76,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">
-          <PhSortAscendingThin />
+          <component :is="iconMap.sort" />
 
           <!-- Sort -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>
@@ -94,7 +94,8 @@ 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">
-            <component :is="iconMap.closeBox"
+            <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

@@ -206,7 +206,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">
-                <PhListBulletsThin class="text-gray-500" />
+                <component :is="iconMap.list" class="text-gray-500" />
                 <!-- Shared View List -->
                 {{ $t('activity.listSharedView') }}
               </div>
@@ -226,7 +226,7 @@ useMenuCloseOnEsc(open)
 
             <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">
-                <PhBracketsAngleThin class="text-gray-500" />
+                <component :is="iconMap.snippet" class="text-gray-500" />
                 <!-- Get API Snippet -->
                 {{ $t('activity.getApiSnippet') }}
               </div>

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

@@ -321,7 +321,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
               </template>
 
               <template v-else>
-                <PhFolderSimpleThin class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
+                <component :is="iconMap.folder" class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
               </template>
             </div>
 
@@ -330,7 +330,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">
-                      <PhFolderThin class="group-hover:text-accent text-xl" />
+                      <component :is="iconMap.folder" class="group-hover:text-accent text-xl" />
 
                       <div class="flex flex-col">
                         <div class="text-lg group-hover:(!text-primary) font-semibold capitalize">
@@ -368,7 +368,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)"
                       >
-                        <PhBracketsCurlyThin class="group-hover:text-accent" />
+                        <component :is="iconMap.json" class="group-hover:text-accent" />
                         {{ $t('activity.account.swagger') }}
                       </div>
                     </a-menu-item>
@@ -493,7 +493,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">
-                          <PhPresentationThin class="group-hover:text-accent" />
+                          <component :is="iconMap.preview" class="group-hover:text-accent" />
                           {{ $t('activity.previewAs') }}
 
                           <div class="flex-1" />
@@ -517,7 +517,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   >
                     <template #title>
                       <div class="nc-project-menu-item group">
-                        <PhTranslateThin class="group-hover:text-accent nc-language" />
+                        <component :is="iconMap.translate" 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" />
@@ -556,7 +556,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                           class="nc-project-menu-item group !no-underline"
                           to="/account/users"
                         >
-                          <PhAtThin class="mt-1 group-hover:text-accent" />&nbsp;
+                          <component :is="iconMap.at" 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>
@@ -566,7 +566,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">
-                          <PhSignOutThin class="group-hover:(!text-accent)" />&nbsp;
+                          <component :is="iconMap.signout" class="group-hover:(!text-accent)" />&nbsp;
 
                           <span class="prose-sm nc-user-menu-signout">
                             {{ $t('general.signOut') }}
@@ -583,7 +583,8 @@ 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"
           >
-            <PhCaretDoubleLeftThin
+            <component
+              :is="iconMap.arrowDoubleLeft"
               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,8 @@ 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"
         >
-          <PhCaretDoubleLeftThin
+          <component
+            :is="iconMap.arrowDoubleLeft"
             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/pages/[projectType]/form/[viewId]/index/survey.vue

@@ -3,10 +3,10 @@ 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,
+  iconMap,
   isValidURL,
   onKeyStroke,
   onMounted,
@@ -366,7 +366,8 @@ onMounted(() => {
                     </Transition>
 
                     <Transition name="slide-right" mode="out-in">
-                      <component :is="iconMap.closeCircle"
+                      <component
+                        :is="iconMap.closeCircle"
                         v-if="v$.localState[field.title]?.$error || columnValidationError"
                         class="text-red-500 md:text-md"
                       />

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

@@ -559,7 +559,11 @@ onMounted(async () => {
 
                     <a-input v-model:value="item.value" />
 
-                    <component :is="iconMap.close" :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

@@ -41,7 +41,6 @@ import PhCsvThin from '~icons/ph/file-csv-light'
 import PhBracketsCurlyThin from '~icons/ph/brackets-curly-light'
 import PhTrashThin from '~icons/ph/trash-light'
 import PhPencilSimpleThin from '~icons/ph/pencil-simple-light'
-import PhLinkSimpleThin from '~icons/ph/link-simple-light'
 import PhListMagnifyingGlassThin from '~icons/ph/list-magnifying-glass-light'
 import PhStringIcon from '~icons/ph/text-aa-light'
 import PhTextAreaIcon from '~icons/ph/text-align-left-light'
@@ -52,7 +51,6 @@ import WebIcon from '~icons/ph/planet-light'
 import BooleanIcon from '~icons/ph/check-square-light'
 import CalendarIcon from '~icons/ph/calendar-blank-light'
 import SingleSelectIcon from '~icons/ph/caret-circle-down-light'
-import MultiSelectIcon from '~icons/ph/list-bullets-light'
 import DatetimeIcon from '~icons/ph/calendar-light'
 import GeoDataIcon from '~icons/ph/map-pin-light'
 import RatingIcon from '~icons/ph/star-light'
@@ -92,10 +90,60 @@ 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'
+import PhSignInLight from '~icons/ph/sign-in-light'
+import PhSignOutLight from '~icons/ph/sign-out-light'
+import PhCaretDoubleLeftLight from '~icons/ph/caret-double-left-light'
+import MdiOpenInNew from '~icons/mdi/open-in-new'
+import PhFloppyDiskLight from '~icons/ph/floppy-disk-light'
+import PhPlusCircleLight from '~icons/ph/plus-circle-light'
+import PhMinusCircleLight from '~icons/ph/minus-circle-light'
+import PhAtLight from '~icons/ph/at-light'
+import PhDatabaseLight from '~icons/ph/database-light'
+import PhUserPlusLight from '~icons/ph/user-plus-light'
+import PhDiscordLogoLight from '~icons/ph/discord-logo-light'
+import PhRedditLogoLight from '~icons/ph/reddit-logo-light'
+import PhTwitterLogoLight from '~icons/ph/twitter-logo-light'
+import PhGithubLogoLight from '~icons/ph/github-logo-light'
+import PhKeyboardLight from '~icons/ph/keyboard-light'
+import PhUserCircleLight from '~icons/ph/user-circle-light'
+import PhKeyReturnThin from '~icons/ph/key-return-light'
+import PhLinkSimpleHorizontalLight from '~icons/ph/link-simple-horizontal-light'
+import PhPresentationThin from '~icons/ph/presentation-light'
+import PhTranslateThin from '~icons/ph/translate-light'
+import PhSortAscendingThin from '~icons/ph/sort-ascending-light'
+import PhChatTextThin from '~icons/ph/chat-text-light'
+import PhCloudLightningThin from '~icons/ph/cloud-lightning-light'
+import PhListBulletsThin from '~icons/ph/list-bullets-light'
+import PhBracketsAngleThin from '~icons/ph/brackets-angle-light'
+import MdiExitToApp from '~icons/mdi/exit-to-app'
 
 export const iconMap = {
+  exit: MdiExitToApp,
+  snippet: PhBracketsAngleThin,
+  list: PhListBulletsThin,
+  cloud: PhCloudLightningThin,
+  apiAndSupport: PhChatTextThin,
+  sort: PhSortAscendingThin,
+  translate: PhTranslateThin,
+  preview: PhPresentationThin,
+  link: PhLinkSimpleHorizontalLight,
+  returnKey: PhKeyReturnThin,
+  keyboard: PhKeyboardLight,
+  accountPlus: PhUserPlusLight,
+  database: PhDatabaseLight,
+  discord: PhDiscordLogoLight,
+  reddit: PhRedditLogoLight,
+  github: PhGithubLogoLight,
+  twitter: PhTwitterLogoLight,
+  at: PhAtLight,
+  plusCircle: PhPlusCircleLight,
+  minusCircle: PhMinusCircleLight,
+  save: PhFloppyDiskLight,
+  signin: PhSignInLight,
+  signout: PhSignOutLight,
   lock: PhLockIcon,
   account: PhAccountIcon,
+  accountCircle: PhUserCircleLight,
   users: PhUsersThreeThin,
   download: PhDownloadThin,
   upload: PhUploadThin,
@@ -111,6 +159,7 @@ export const iconMap = {
   book: PhBookThin,
   arrowDown: PhCaretDownLight,
   arrowRight: PhCaretRightLight,
+  arrowDoubleLeft: PhCaretDoubleLeftLight,
   threeDotVertical: PhDotsThreeOutlineVerticalThin,
   threeDotHorizontal: PhDotsThreeOutlineThin,
   table: PhTableThin,
@@ -119,7 +168,6 @@ export const iconMap = {
   code: PhBracketsCurlyThin,
   delete: PhTrashThin,
   edit: PhPencilSimpleThin,
-  link: PhLinkSimpleThin,
   lookup: PhListMagnifyingGlassThin,
   text: PhStringIcon,
   longText: PhTextAreaIcon,
@@ -128,7 +176,7 @@ export const iconMap = {
   boolean: BooleanIcon,
   calendar: CalendarIcon,
   singleSelect: SingleSelectIcon,
-  multiSelect: MultiSelectIcon,
+  multiSelect: PhListBulletsThin,
   datetime: DatetimeIcon,
   geoData: GeoDataIcon,
   rating: RatingIcon,
@@ -171,6 +219,7 @@ export const iconMap = {
   closeBox: PhXSquareLight,
   close: PhXLight,
 
+  openInNew: MdiOpenInNew,
   mm: MMIcon,
   hm: HMIcon,
   bt: BTIcon,