docs(icons): dynamic theme section

docs/app/components/content/IconsTheme.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import json5 from 'json5'
+
+const appConfig = useAppConfig()
+
+const { data: ast } = await useAsyncData<any>(`icons-theme`, () => parseMarkdown(`
+\`\`\`yml
+${json5.stringify(appConfig.ui.icons, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
+\`\`\`\
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize this component in your \`app.config.ts\` under \`ui.icons\` key.
+::
+`))
+</script>
+
+<template>
+  <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" />
+</template>

docs/content/1.getting-started/4.icons.md

@@ -48,96 +48,6 @@ For example, to use the `i-uil-github` icon, install it's collection with `@icon
 Read more about custom collections in the `@nuxt/icon` documentation.
 ::
 
-### Defaults
-
-You can easily replace all the default icons of the components in your `app.config.ts`.
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    button: {
-      default: {
-        loadingIcon: 'i-octicon-sync-24'
-      }
-    },
-    input: {
-      default: {
-        loadingIcon: 'i-octicon-sync-24'
-      }
-    },
-    select: {
-      default: {
-        loadingIcon: 'i-octicon-sync-24',
-        trailingIcon: 'i-octicon-chevron-down-24'
-      }
-    },
-    selectMenu: {
-      default: {
-        selectedIcon: 'i-octicon-check-24'
-      }
-    },
-    notification: {
-      default: {
-        closeButton: {
-          icon: 'i-octicon-x-24'
-        }
-      }
-    },
-    commandPalette: {
-      default: {
-        icon: 'i-octicon-search-24',
-        loadingIcon: 'i-octicon-sync-24',
-        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-octicon-sync-24'
-        },
-        emptyState: {
-          icon: 'i-octicon-database-24'
-        }
-      }
-    },
-    pagination: {
-      default: {
-        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'
-        }
-      }
-    },
-    accordion: {
-      default: {
-        openIcon: 'i-octicon-chevron-down-24'
-      }
-    },
-    breadcrumb: {
-      default: {
-        divider: 'i-octicon-chevron-right-24'
-      }
-    }
-  }
-})
-```
-
 ## Theme
 
-:component-theme
+:icons-theme