refactor(gui-v2): remove icon imports

packages/nc-gui-v2/components.d.ts

@@ -74,6 +74,7 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
+    MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
@@ -102,6 +103,7 @@ declare module '@vue/runtime-core' {
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
+    MdiKeyStar: typeof import('~icons/mdi/key-star')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
@@ -110,6 +112,7 @@ declare module '@vue/runtime-core' {
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiNotebookCheckOutline: typeof import('~icons/mdi/notebook-check-outline')['default']
+    MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
@@ -118,7 +121,9 @@ declare module '@vue/runtime-core' {
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
+    MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
+    MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']

packages/nc-gui-v2/components/template/Editor.vue

@@ -5,13 +5,6 @@ import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { Form, notification } from 'ant-design-vue'
 import { srcDestMappingColumns, tableColumns } from './utils'
 import { computed, onMounted } from '#imports'
-import MdiTableIcon from '~icons/mdi/table'
-import MdiStringIcon from '~icons/mdi/alpha-a'
-import MdiLongTextIcon from '~icons/mdi/text'
-import MdiNumericIcon from '~icons/mdi/numeric'
-import MdiPlusIcon from '~icons/mdi/plus'
-import MdiKeyStarIcon from '~icons/mdi/key-star'
-import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import { extractSdkResponseErrorMsg, fieldRequiredValidator, getUIDTIcon } from '~/utils'
 import { MetaInj, ReloadViewDataHookInj } from '~/context'
 
@@ -516,7 +509,7 @@ onMounted(() => {
         <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
           <template #header>
             <span class="font-weight-bold text-lg flex items-center gap-2">
-              <MdiTableIcon class="text-primary" />
+              <mdi-table class="text-primary" />
               {{ table.ref_table_name }}
             </span>
           </template>
@@ -538,12 +531,7 @@ onMounted(() => {
                 <span>{{ record.srcCn }}</span>
               </template>
               <template v-else-if="column.key === 'destination_column'">
-                <a-select
-                  v-model:value="record.destCn"
-                  class="w-52"
-                  show-search
-                  :filter-option="filterOption"
-                >
+                <a-select v-model:value="record.destCn" class="w-52" show-search :filter-option="filterOption">
                   <a-select-option v-for="(column, i) of columns" :key="i" :value="column.title">
                     <div class="flex items-center">
                       <component :is="getUIDTIcon(column.uidt)" />
@@ -587,7 +575,7 @@ onMounted(() => {
                 />
               </a-form-item>
               <span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
-                <MdiTableIcon class="text-primary" />
+                <mdi-table class="text-primary" />
                 {{ table.table_name }}
               </span>
             </template>
@@ -597,7 +585,7 @@ onMounted(() => {
                   <!-- TODO: i18n -->
                   <span>Delete Table</span>
                 </template>
-                <MdiDeleteOutlineIcon v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" />
+                <mdi-delete-outline v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" />
               </a-tooltip>
             </template>
 
@@ -665,7 +653,7 @@ onMounted(() => {
                       <span>Primary Value</span>
                     </template>
                     <div class="flex items-center float-right mr-4">
-                      <MdiKeyStarIcon class="text-lg" />
+                      <mdi-key-star class="text-lg" />
                     </div>
                   </a-tooltip>
                   <a-tooltip v-else>
@@ -676,7 +664,7 @@ onMounted(() => {
 
                     <a-button type="text" @click="deleteTableColumn(tableIdx, record.key)">
                       <div class="flex items-center">
-                        <MdiDeleteOutlineIcon class="text-lg" />
+                        <mdi-delete-outline class="text-lg" />
                       </div>
                     </a-button>
                   </a-tooltip>
@@ -692,7 +680,7 @@ onMounted(() => {
 
                 <a-button @click="addNewColumnRow(table, 'Number')">
                   <div class="flex items-center">
-                    <MdiNumericIcon class="text-lg" />
+                    <mdi-numeric class="text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -704,7 +692,7 @@ onMounted(() => {
                 </template>
                 <a-button @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center">
-                    <MdiStringIcon class="text-lg" />
+                    <mdi-alpha-a class="text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -716,7 +704,7 @@ onMounted(() => {
                 </template>
                 <a-button @click="addNewColumnRow(table, 'LongText')">
                   <div class="flex items-center">
-                    <MdiLongTextIcon class="text-lg" />
+                    <mdi-text class="text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -728,7 +716,7 @@ onMounted(() => {
                 </template>
                 <a-button @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center">
-                    <MdiPlusIcon class="text-lg" />
+                    <mdi-plus class="text-lg" />
                     Column
                   </div>
                 </a-button>