feat(gui-v2): add view icons

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

packages/nc-gui-v2/components/smartsheet/Sidebar.vue

@@ -76,6 +76,7 @@ const toggleDrawer = ref(false)
                 </v-icon>
                 <v-icon v-else color="primary" small> mdi-table </v-icon>
               </v-list-item-icon> -->
+            <component :is="viewIcons[view.type].icon" :class="`text-${viewIcons[view.type].color} mr-1`" />
             <span>{{ view.alias || view.title }}</span>
 
             <!--              <v-list-item-title>

packages/nc-gui-v2/utils/viewIcons.ts

@@ -1,11 +0,0 @@
-import { ViewTypes } from 'nocodb-sdk'
-
-export const viewIcons = {
-  [ViewTypes.GRID]: { icon: 'mdi-grid-large', color: 'blue' },
-  // [ViewTypes.GRID]: { icon: "mdi-grid-large", color: "blue" },
-  [ViewTypes.FORM]: { icon: 'mdi-form-select', color: 'pink' },
-  calendar: { icon: 'mdi-calendar', color: 'purple' },
-  [ViewTypes.GALLERY]: { icon: 'mdi-camera-image', color: 'orange' },
-  [ViewTypes.KANBAN]: { icon: 'mdi-tablet-dashboard', color: 'green' },
-  view: { icon: 'mdi-eye-circle-outline', color: 'blue' },
-}

packages/nc-gui-v2/utils/viewUtils.ts

@@ -1,11 +1,19 @@
 import { ViewTypes } from 'nocodb-sdk'
 
+import MdiGridIcon from '~icons/mdi/grid-large'
+import MdiFormIcon from '~icons/mdi/form-select'
+import MdiCalendarIcon from '~icons/mdi/calendar'
+import MdiGalleryIcon from '~icons/mdi/camera-image'
+import MdiKanbanIcon from '~icons/mdi/tablet-dashboard'
+import MdiEyeIcon from '~icons/mdi/eye-circle-outline'
+
+
 export const viewIcons = {
-  [ViewTypes.GRID]: { icon: 'mdi-grid-large', color: 'blue' },
+  [ViewTypes.GRID]: { icon: MdiGridIcon, color: 'blue' },
   // [ViewTypes.GRID]: { icon: "mdi-grid-large", color: "blue" },
-  [ViewTypes.FORM]: { icon: 'mdi-form-select', color: 'pink' },
+  [ViewTypes.FORM]: { icon: MdiFormIcon, color: 'pink' },
-  calendar: { icon: 'mdi-calendar', color: 'purple' },
+  calendar: { icon: MdiCalendarIcon, color: 'purple' },
-  [ViewTypes.GALLERY]: { icon: 'mdi-camera-image', color: 'orange' },
+  [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' },
-  [ViewTypes.KANBAN]: { icon: 'mdi-tablet-dashboard', color: 'green' },
+  [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' },
-  view: { icon: 'mdi-eye-circle-outline', color: 'blue' },
+  view: { icon: MdiEyeIcon, color: 'blue' },
 }