refactor: load material font and use GeneralIcon component

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

packages/nc-gui/assets/style/fonts.css

@@ -1,5 +1,3 @@
-@import 'material-symbols/outlined.css';
-
 /* inter-100 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
@@ -152,12 +150,44 @@
   font-display: swap;
 }
 
+
+/* material-symbols-outlined-200 - latin */
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 200;
+  src: url('./material-symbols/material-symbols-outlined-v92-latin-200.eot'); /* IE9 Compat Modes */
+  src: url('./material-symbols/material-symbols-outlined-v92-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('./material-symbols/material-symbols-outlined-v92-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
+  url('./material-symbols/material-symbols-outlined-v92-latin-200.woff') format('woff'), /* Modern Browsers */
+  url('./material-symbols/material-symbols-outlined-v92-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('./material-symbols/material-symbols-outlined-v92-latin-200.svg#MaterialSymbolsOutlined') format('svg'); /* Legacy iOS */
+}
+
+/*      //   href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,200,0,-25',
+*/
+
+/* fallback */
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 200;
+  src: url(./material.woff2) format('woff2');
+}
+
 .material-symbols-outlined {
-  font-size: 1.3rem;
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-size: 20px  !important;
 
-    font-variation-settings:
-           'FILL' 0,
-           'wght' 200,
-           'GRAD' 0,
-           'opsz' 20
 }

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

@@ -7,5 +7,5 @@ const props = defineProps<{
 </script>
 
 <template>
-  <component :is="iconMap[props.icon]" class="mr-2" />
+  <component :is="iconMap[props.icon]"/>
 </template>

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

@@ -52,7 +52,7 @@ const { loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvid
 
 await loadRelatedTableMeta()
 
-const addIcon = computed(() => (cellValue?.value ? iconMap.expand : iconMap.plus))
+const addIcon = computed(() => (cellValue?.value ?'expand' : 'plus'))
 
 const value = computed(() => {
   if (cellValue?.value) {
@@ -93,8 +93,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       v-if="!readOnly && !isLocked && (isUIAllowed('xcDatatableEditable') || isForm)"
       class="flex justify-end gap-1 min-h-[30px] items-center"
     >
-      <component
-        :is="addIcon"
+      <GeneralIcon
+        :icon="addIcon"
         class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500) nc-plus"
         @click.stop="listItemsDlg = true"
       />

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

@@ -18,6 +18,7 @@ import {
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
 } from '#imports'
+import General from '~/layouts/general.vue'
 
 const column = inject(ColumnInj)!
 
@@ -114,14 +115,14 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       </div>
 
       <div v-if="!isLocked" class="flex justify-end gap-1 min-h-[30px] items-center">
-        <component
-          :is="iconMap.expand"
+        <GeneralIcon
+          icon="expand"
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click.stop="childListDlg = true"
         />
 
-        <component
-          :is="iconMap.plus"
+        <GeneralIcon
+          icon="plus"
           v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
           class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
           @click.stop="listItemsDlg = true"

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

@@ -116,14 +116,14 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       </div>
 
       <div v-if="!isLocked" class="flex justify-end gap-1 min-h-[30px] items-center">
-        <component
-          :is="iconMap.expand"
+        <GeneralIcon
+          icon="expand"
           class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click.stop="childListDlg = true"
         />
 
-        <component
-          :is="iconMap.plus"
+        <GeneralIcon
+          icon="plus"
           v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
           class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
           @click.stop="listItemsDlg = true"

packages/nc-gui/nuxt.config.ts

@@ -54,7 +54,7 @@ export default defineNuxtConfig({
         rel: 'icon',
         type: 'image/x-icon',
         href: './favicon.ico',
-      },
+      }
     ],
     meta: [
       { charset: 'utf-8' },

packages/nc-gui/package-lock.json

@@ -30,7 +30,6 @@
         "leaflet": "^1.9.2",
         "leaflet.markercluster": "^1.5.3",
         "locale-codes": "^1.3.1",
-        "material-symbols": "^0.5.1",
         "monaco-editor": "^0.33.0",
         "nocodb-sdk": "file:../nocodb-sdk",
         "papaparse": "^5.3.2",
@@ -11383,11 +11382,6 @@
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
       "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
     },
-    "node_modules/material-symbols": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.5.1.tgz",
-      "integrity": "sha512-o2R47ZQnzyudeos86/aaDt2NVQyOTmIJdXrud8uCJOKYTGGTi13WE8T4CMLM8Dt+Te2rJpK9sj290lQfdusJHQ=="
-    },
     "node_modules/mdast-util-from-markdown": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
@@ -26726,11 +26720,6 @@
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
       "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
     },
-    "material-symbols": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.5.1.tgz",
-      "integrity": "sha512-o2R47ZQnzyudeos86/aaDt2NVQyOTmIJdXrud8uCJOKYTGGTi13WE8T4CMLM8Dt+Te2rJpK9sj290lQfdusJHQ=="
-    },
     "mdast-util-from-markdown": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",

packages/nc-gui/package.json

@@ -54,7 +54,6 @@
     "leaflet": "^1.9.2",
     "leaflet.markercluster": "^1.5.3",
     "locale-codes": "^1.3.1",
-    "material-symbols": "^0.5.1",
     "monaco-editor": "^0.33.0",
     "nocodb-sdk": "file:../nocodb-sdk",
     "papaparse": "^5.3.2",

packages/nc-gui/utils/iconUtils.ts

@@ -329,10 +329,10 @@ export const iconMap = {
   keyboard: h('span', { class: 'material-symbols-outlined' }, 'keyboard'),
   accountPlus: h('span', { class: 'material-symbols-outlined' }, 'person_add'),
   database: h('span', { class: 'material-symbols-outlined' }, 'storage'),
-  discord: h('span', { class: 'material-symbols-outlined' }, 'discord'),
-  reddit: h('span', { class: 'material-symbols-outlined' }, 'reddit'),
-  github: h('span', { class: 'material-symbols-outlined' }, 'github'),
-  twitter: h('span', { class: 'material-symbols-outlined' }, 'twitter'),
+  discord: PhDiscordLogoLight,
+  reddit: PhRedditLogoLight,
+  github: PhGithubLogoLight,
+  twitter: PhTwitterLogoLight,
   at: h('span', { class: 'material-symbols-outlined' }, 'alternate_email'),
   plusCircle: h('span', { class: 'material-symbols-outlined' }, 'add_circle'),
   minusCircle: h('span', { class: 'material-symbols-outlined' }, 'remove_circle'),
@@ -359,8 +359,11 @@ export const iconMap = {
   arrowDown: h('span', { class: 'material-symbols-outlined', style: { fontSize: '.8rem' } }, 'keyboard_arrow_down'),
   arrowRight: h('span', { class: 'material-symbols-outlined' }, 'keyboard_arrow_right'),
   arrowDoubleLeft: h('span', { class: 'material-symbols-outlined' }, 'first_page'),
-  threeDotVertical: h('span', { class: 'material-symbols-outlined' }, 'more_vert'),
-  threeDotHorizontal: h('span', { class: 'material-symbols-outlined' }, 'more_horiz'),
+  // threeDotVertical: h('span', { class: 'material-symbols-outlined' }, 'more_vert'),
+  // threeDotHorizontal: h('span', { class: 'material-symbols-outlined' }, 'more_horiz'),
+
+  threeDotVertical: PhDotsThreeOutlineVerticalThin,
+  threeDotHorizontal: PhDotsThreeOutlineThin,
   table: h('span', { class: 'material-symbols-outlined' }, 'table_chart'),
   excel: PhExcelThin, // h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
   csv: PhCsvThin, // h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
@@ -406,7 +409,7 @@ export const iconMap = {
   sync: h('span', { class: 'material-symbols-outlined' }, 'sync'),
   warning: h('span', { class: 'material-symbols-outlined' }, 'warning'),
   share: h('span', { class: 'material-symbols-outlined' }, 'share'),
-  reload: h('span', { class: 'material-symbols-outlined ' }, 'refresh'),
+  reload: h('span', { class: 'material-symbols-outlined' }, 'refresh'),
   xml: h('span', { class: 'material-symbols-outlined' }, 'code'),
   airtable: h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
   grid: h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
@@ -415,7 +418,8 @@ export const iconMap = {
   map: h('span', { class: 'material-symbols-outlined' }, 'map'),
   kanban: h('span', { class: 'material-symbols-outlined' }, 'view_column'),
   view: h('span', { class: 'material-symbols-outlined' }, 'view_list'),
-  rowHeight: h('span', { class: 'material-symbols-outlined' }, 'height'),
+  // rowHeight: h('span', { class: 'material-symbols-outlined' }, 'height'),
+  rowHeight: h(PhSplitVerticalThin, { style: { fontSize: '14px' } }),
   filter: h('span', { class: 'material-symbols-outlined' }, 'filter_list'),
   closeCircle: h('span', { class: 'material-symbols-outlined' }, 'cancel'),
   closeBox: h('span', { class: 'material-symbols-outlined' }, 'close'),