Fix empy icon page (#2650)

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -14,6 +14,7 @@ import CarbonAdOverlay from './CarbonAdOverlay.vue';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
+const DEFAULT_GRID_ITEMS = 10 * 160;
 
 const props = defineProps<{
   icons: IconEntity[];
@@ -114,11 +115,23 @@ function handleCloseDrawer() {
       />
     </StickyBar>
     <NoResults
-      v-if="list.length === 0"
+      v-if="list.length === 0 && searchQuery !== ''"
       :searchQuery="searchQuery"
       @clear="searchQuery = ''"
     />
-    <div v-bind="wrapperProps" class="icon">
+    <IconGrid
+      v-else-if="list.length === 0"
+      :key="index"
+      overlayMode
+      :icons="[...searchResults].splice(0, DEFAULT_GRID_ITEMS)"
+      :activeIcon="activeIconName"
+      @setActiveIcon="setActiveIconName"
+    />
+    <div
+      v-bind="wrapperProps"
+      class="icon"
+      v-else
+    >
       <IconGrid
         v-for="{ index, data: icons } in list"
         :key="index"

docs/package.json

@@ -39,8 +39,8 @@
     "@floating-ui/vue": "^1.0.3",
     "@headlessui/vue": "^1.7.17",
     "@resvg/resvg-wasm": "^2.6.2",
-    "@vueuse/components": "^10.7.2",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/components": "^12.0.0",
+    "@vueuse/core": "^12.0.0",
     "element-to-path": "^1.2.1",
     "fuse.js": "^6.5.3",
     "jszip": "^3.7.0",
@@ -57,6 +57,6 @@
     "sitemap": "^7.1.1",
     "svg-pathdata": "^6.0.3",
     "svgson": "^5.2.1",
-    "vue": "^3.4.13"
+    "vue": "^3.5.13"
   }
 }