refactor: move all icons to iconMap (WIP)

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

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

@@ -429,7 +429,7 @@ onBeforeUnmount(() => {
             class="flex items-center"
           >
             <!--            Importing -->
-            <MdiLoading class="text-green-500 animate-spin" />
+            <component :is="iconMap.loading" class="text-green-500 animate-spin" />
             <span class="text-green-500 ml-2"> {{ $t('labels.importing') }}</span>
           </div>
         </a-card>

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

@@ -367,7 +367,7 @@ watch(view, async (nextView) => {
                         >
                           <LazyGeneralTruncateText>{{ stack.title ?? 'uncategorized' }}</LazyGeneralTruncateText>
                           <span v-if="!isLocked" class="w-full flex w-[15px]">
-                            <mdi-menu-down class="text-grey text-lg ml-auto" />
+                            <component :is="iconMap.arrowDown" class="text-grey text-lg ml-auto" />
                           </span>
                         </div>
                         <template v-if="!isLocked" #overlay>
@@ -389,7 +389,7 @@ watch(view, async (nextView) => {
                             </a-menu-item>
                             <a-menu-item v-e="['c:kanban:collapse-stack']" @click="handleCollapseStack(stackIdx)">
                               <div class="py-2 flex gap-2 items-center">
-                                <mdi-arrow-collapse class="text-gray-500" />
+                                <component :is="iconMap.arrowCollapse" class="text-gray-500" />
                                 {{ $t('activity.kanban.collapseStack') }}
                               </div>
                             </a-menu-item>
@@ -399,7 +399,7 @@ watch(view, async (nextView) => {
                               @click="handleDeleteStackClick(stack.title, stackIdx)"
                             >
                               <div class="py-2 flex gap-2 items-center">
-                                <mdi-delete class="text-gray-500" />
+                                <component :is="iconMap.delete" class="text-gray-500" />
                                 {{ $t('activity.kanban.deleteStack') }}
                               </div>
                             </a-menu-item>
@@ -572,7 +572,7 @@ watch(view, async (nextView) => {
                       :class="{ capitalize: stack.title === null }"
                     >
                       <LazyGeneralTruncateText>{{ stack.title ?? 'uncategorized' }}</LazyGeneralTruncateText>
-                      <mdi-menu-down class="text-grey text-lg" />
+                      <component :is="iconMap.arrowDown" class="text-grey text-lg" />
                     </div>
                     <!-- Record Count -->
                     {{ formattedData.get(stack.title).length }} / {{ countByStack.get(stack.title) }}

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

@@ -3,7 +3,7 @@ import 'leaflet/dist/leaflet.css'
 import L, { LatLng } from 'leaflet'
 import 'leaflet.markercluster'
 import { ViewTypes } from 'nocodb-sdk'
-import { IsPublicInj, OpenNewRecordFormHookInj, latLongToJoinedString, onMounted, provide, ref } from '#imports'
+import { IsPublicInj, OpenNewRecordFormHookInj, iconMap, latLongToJoinedString, onMounted, provide, ref } from '#imports'
 import type { Row } from '~/lib'
 
 const route = useRoute()
@@ -228,7 +228,7 @@ const count = computed(() => paginationData.value.totalRows)
 
         <div v-if="count > 900" class="nc-warning-info flex min-w-32px h-32px items-center gap-1 px-2 bg-white">
           <div>{{ count }} {{ $t('objects.records') }}</div>
-          <mdi-map-marker-alert />
+          <component :is="iconMap.markerAlert" />
         </div>
       </a-tooltip>
     </div>

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

@@ -2,7 +2,7 @@
 import type { UITypes } from 'nocodb-sdk'
 import { AllowedColumnTypesForQrAndBarcodes } from 'nocodb-sdk'
 import type { SelectProps } from 'ant-design-vue'
-import { onMounted, useVModel, watch } from '#imports'
+import { iconMap, onMounted, useVModel, watch } from '#imports'
 
 const props = defineProps<{
   modelValue: any
@@ -98,7 +98,7 @@ const showBarcodeValueColumnInfoIcon = computed(() => !columnsAllowedAsBarcodeVa
                   Decimal. Please create one first.
                 </span>
               </template>
-              <mdi-information class="cursor-pointer" />
+              <component :is="iconMap.info" class="cursor-pointer" />
             </a-tooltip>
           </div>
         </div>

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

@@ -703,7 +703,7 @@ onMounted(async () => {
               <template #title>
                 <span> <strong>data</strong> : Row data <br /> </span>
               </template>
-              <MdiInformation class="ml-2" />
+              < <component :is="iconMap.info" class="ml-2" />
             </a-tooltip>
 
             <div class="mt-3">

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

@@ -83,7 +83,7 @@ const hideSidebarOnClickOrTouchIfMobileMode = () => {
           <div v-if="isLoading" class="flex items-center gap-2 ml-3 text-gray-200" data-testid="nc-loading">
             {{ $t('general.loading') }}
 
-            <MdiLoading class="animate-infinite animate-spin" />
+            <component :is="iconMap.loading" class="animate-infinite animate-spin" />
           </div>
         </div>
 

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

@@ -371,7 +371,7 @@ onMounted(() => {
                         v-if="v$.localState[field.title]?.$error || columnValidationError"
                         class="text-red-500 md:text-md"
                       />
-                      <MdiCheck v-else class="text-white md:text-md" />
+                      <component :is="iconMap.check" v-else class="text-white md:text-md" />
                     </Transition>
                   </button>
                 </a-tooltip>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { navigateTo, useUIPermission } from '#imports'
+import { iconMap, navigateTo, useUIPermission } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -77,7 +77,7 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
               @click="navigateTo('/account/apps')"
             >
               <div class="flex items-center space-x-2">
-                <MdiStorefrontOutline />
+                <component :is="iconMap.appstore" />
 
                 <div class="select-none">App Store</div>
               </div>

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

@@ -37,6 +37,7 @@ const formatTitle = (title?: string) =>
             :style="{ '--thumbnail-color': '#1348ba' }"
             @click="props.onClick"
           >
+            a
             <component :is="iconMap.plus" />
           </div>
           <div class="prose-lg font-semibold">

packages/nc-gui/utils/iconUtils.ts

@@ -139,12 +139,21 @@ import MdiLinkVariantRemove from '~icons/mdi/link-variant-remove'
 import MdiChevronLeft from '~icons/mdi/chevron-left'
 import MdiChevronRight from '~icons/mdi/chevron-right'
 import MdiFileImageBox from '~icons/mdi/file-image-box'
+import MdiStorefrontOutline from '~icons/mdi/storefront-outline'
+import MdiLoading from '~icons/mdi/loading'
+import MdiArrowCollapse from '~icons/mdi/arrow-collpse'
+import MdiInformationOutline from '~icons/mdi/information-outline'
+import MdiMapMarkerAlert from '~icons/mdi/map-marker-alert'
 
 export const iconMap = {
+  info: MdiInformationOutline,
+  loading: MdiLoading,
+  arrowCollapse: MdiArrowCollapse,
+  markerAlert: MdiMapMarkerAlert,
+  appstore: MdiStorefrontOutline,
   chevronLeft: MdiChevronLeft,
   chevronRight: MdiChevronRight,
   imagePlaceholder: MdiFileImageBox,
-
   linkRemove: MdiLinkVariantRemove,
   closeThick: MdiCloseThick,
   role: MdiDramaMasks,