feat: add custom icons collection

Author: atinux

app/app.config.ts

@@ -110,6 +110,24 @@ export default defineAppConfig({
       },
     },
     prose: {
+      codePreview: {
+        slots: {
+          preview: 'flex-col *:w-full [&_a]:w-fit',
+        },
+      },
+      codeIcon: {
+        'nitro.config.ts': 'i-unjs-nitro',
+        'astro.config.mjs': 'i-simple-icons:astro',
+        astro: 'i-simple-icons:astro',
+        nitro: 'i-unjs-nitro',
+        md: 'i-custom-comark',
+        mdc: 'i-custom-comark',
+        react: 'i-logos-react',
+        html: 'i-vscode-icons-file-type-html',
+        svelte: 'i-logos-svelte-icon',
+        nuxt: 'i-logos-nuxt-icon',
+        angular: 'i-logos-angular-icon',
+      },
       codeGroup: {
         slots: {
           list: 'bg-muted',

app/app.vue

@@ -53,7 +53,7 @@ useSeoMeta({
 
 provide('navigation', navTree)
 
-const colorMode = useColorMode()
+// const colorMode = useColorMode()
 const historyOpen = useVersionHistory()
 
 const { assistant } = useAppConfig()

app/assets/icons/comark.svg

@@ -27,18 +27,6 @@ const navigation = useMainNavigation()
         label="Ask AI"
         color="neutral"
         variant="outline"
-        class="hidden lg:inline-flex"
-        @click="assistantOpen = true"
-      />
-
-      <UButton
-        v-if="assistant?.enabled"
-        icon="i-lucide-sparkles"
-        aria-label="Ask AI"
-        color="neutral"
-        variant="outline"
-        :ui="{ leadingIcon: 'size-4' }"
-        class="p-2 lg:hidden"
         @click="assistantOpen = true"
       />
 

app/components/AppHeader.vue

@@ -1,6 +1,9 @@
 import { resolveModulePath } from 'exsolve'
 import { defineNuxtConfig } from 'nuxt/config'
-import { layerIconCollections } from './utils/icons'
+// import { layerIconCollections } from './utils/icons'
+import { createResolver } from 'nuxt/kit'
+
+const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig({
   compatibilityDate: '2026-06-09',
@@ -14,17 +17,25 @@ export default defineNuxtConfig({
     'nuxt-og-image',
     '@nuxtjs/mcp-toolkit',
   ],
-  ui: { content: true, prose: true },
-  sitemap: { 
+  ui: {
+    content: true,
+    prose: true
+  },
+  sitemap: {
     sources: ['/api/__sitemap__/urls'], exclude: ['/tree/**', '/blob/**']
   },
   ogImage: { zeroRuntime: false },
   icon: {
     provider: 'iconify',
-    customCollections: layerIconCollections() as never,
-    clientBundle: { 
+    customCollections: [
+      {
+        prefix: 'custom',
+        dir: resolve('app/assets/icons'),
+      },
+    ],
+    clientBundle: {
       scan: true,
-      includeCustomCollections: false
+      includeCustomCollections: true
     },
   },
   vite: {

nuxt.config.ts

@@ -12,3 +12,8 @@ Content lives as Markdown in your repository. In development it is read from the
 ::note
 This playground exercises the layer end-to-end: navigation, search, TOC, prev/next links, raw markdown mirrors and the version history panel.
 ::
+
+
+```md [test.md]
+coucou
+```