fix: icon issues with latest nuxt changes

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Aug 29, 2024 · ea12eaa · ea12eaa
1 parent 080f368
commit ea12eaa
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 169 deletions.
diff --git a/app/app.config.ts b/app/app.config.ts
@@ -38,37 +38,77 @@ export default defineAppConfig({
     ui: {
         primary: 'blue',
         gray: 'neutral',
-        tooltip: {
+
+        button: {
             default: {
-                openDelay: 500,
+                loadingIcon: 'i-mdi-loading',
             },
         },
-        button: {
+        input: {
+            default: {
+                loadingIcon: 'i-mdi-loading',
+            },
+        },
+        select: {
+            default: {
+                loadingIcon: 'i-mdi-loading',
+                trailingIcon: 'i-octicon-chevron-down-24',
+            },
+        },
+        selectMenu: {
             default: {
+                selectedIcon: 'i-mdi-check',
+            },
+        },
+        commandPalette: {
+            default: {
+                icon: 'i-octicon-search-24',
                 loadingIcon: 'i-mdi-loading',
+                selectedIcon: 'i-octicon-check-24',
+                emptyState: {
+                    icon: 'i-octicon-search-24',
+                },
             },
         },
         table: {
+            default: {
+                sortAscIcon: 'i-octicon-sort-asc-24',
+                sortDescIcon: 'i-octicon-sort-desc-24',
+                sortButton: {
+                    icon: 'i-octicon-arrow-switch-24',
+                },
+                loadingState: {
+                    icon: 'i-mdi-loading',
+                },
+                emptyState: {
+                    icon: 'i-octicon-database-24',
+                },
+            },
             tr: {
                 base: 'hover:border-primary-500/25 dark:hover:border-primary-400/25 hover:bg-primary-100/50 dark:hover:bg-primary-900/10 border-white dark:border-gray-900',
             },
             td: {
                 padding: 'px-1.5 py-1.5',
             },
         },
-        selectMenu: {
+        pagination: {
             default: {
-                selectedIcon: 'i-mdi-check',
-            },
-        },
-        card: {
-            footer: {
-                padding: 'px-2 py-3 sm:px-4',
+                firstButton: {
+                    icon: 'i-octicon-chevron-left-24',
+                },
+                prevButton: {
+                    icon: 'i-octicon-arrow-left-24',
+                },
+                nextButton: {
+                    icon: 'i-octicon-arrow-right-24',
+                },
+                lastButton: {
+                    icon: 'i-octicon-chevron-right-24',
+                },
             },
         },
+        // Nuxt UI Pro Icons
         icons: {
-            dynamic: false,
-            // Nuxt UI Pro Icons
             dark: 'i-mdi-moon-and-stars',
             light: 'i-mdi-weather-sunny',
             system: 'i-mdi-computer',
@@ -80,24 +120,28 @@ export default defineAppConfig({
             close: 'i-mdi-window-close',
             check: 'i-mdi-check-circle',
         },
+        accordion: {
+            default: {
+                openIcon: 'i-octicon-chevron-down-24',
+            },
+        },
         breadcrumb: {
             default: {
                 divider: 'i-mdi-chevron-right',
             },
         },
+        card: {
+            footer: {
+                padding: 'px-2 py-3 sm:px-4',
+            },
+        },
         // Nuxt UI Pro
         dashboard: {
             page: {
                 wrapper: 'flex w-full min-h-screen min-w-screen max-w-full overflow-y-auto',
             },
         },
     },
-    nuxtIcon: {
-        iconifyApiOptions: {
-            url: '/api/icons',
-            publicApiFallback: false,
-        },
-    },
 
     popover: {
         waitTime: 850,

diff --git a/app/app.vue b/app/app.vue
@@ -11,15 +11,6 @@ const { t, setLocale, locale, finalizePendingLocaleChange } = useI18n();
 
 const appConfig = useAppConfig();
 
-if (!appConfig.nuxtIcon.iconifyApiOptions) {
-    appConfig.nuxtIcon.iconifyApiOptions = {
-        url: window.location.protocol + '//' + window.location.host + '/api/icons',
-        publicApiFallback: false,
-    };
-} else {
-    appConfig.nuxtIcon.iconifyApiOptions.url = window.location.protocol + '//' + window.location.host + '/api/icons';
-}
-
 const toast = useToast();
 
 const colorMode = useColorMode();

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -39,10 +39,16 @@ export default defineNuxtConfig({
     },
 
     ui: {
-        icons: ['simple-icons', 'mdi', 'flagpack'],
         safelistColors: ['primary', 'gray', 'red', 'orange', 'green', 'error', 'warn', 'info', 'success'],
     },
 
+    icon: {
+        collections: ['simple-icons', 'mdi', 'flagpack'],
+        provider: 'iconify',
+        iconifyApiEndpoint: '/api/icons',
+        fallbackToApi: true,
+    },
+
     fonts: {
         families: [{ name: 'DM Sans', weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], global: true }],
     },

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "dependencies": {
         "@iconify-json/flagpack": "1.1.15",
         "@iconify-json/mdi": "1.1.68",
-        "@iconify-json/simple-icons": "1.1.114",
+        "@iconify-json/simple-icons": "1.1.115",
         "@nuxt/fonts": "0.7.2",
         "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest",
         "@nuxtjs/robots": "4.1.3",
@@ -73,7 +73,7 @@
         "@types/howler": "2.2.11",
         "@types/leaflet": "1.9.12",
         "@types/leaflet-contextmenu": "1.4.3",
-        "@types/node": "22.5.0",
+        "@types/node": "22.5.1",
         "@types/splitpanes": "2.2.6",
         "@types/uuid": "10.0.0",
         "@types/zxcvbn": "4.4.5",
@@ -88,9 +88,8 @@
         "eslint-plugin-tailwindcss": "3.17.4",
         "eslint-plugin-vue": "9.27.0",
         "i18next-scanner": "4.5.0",
-        "nuxi": "3.13.0",
+        "nuxi": "3.13.1",
         "nuxt": "3.13.0",
-        "nuxt-icon": "0.6.10",
         "nuxt-typed-router": "3.6.5",
         "postcss": "8.4.41",
         "postcss-custom-properties": "14.0.1",
@@ -107,7 +106,7 @@
         "typescript": "5.5.4",
         "vue": "3.4.38",
         "vue-i18n-routing": "1.2.0",
-        "vue-tsc": "2.0.29"
+        "vue-tsc": "2.1.2"
     },
     "packageManager": "[email protected]"
 }