docs(ComponentTheme/IconsTheme): wrap around defineAppConfig

docs/app/components/content/IconsTheme.vue

@@ -2,16 +2,32 @@
 import json5 from 'json5'
 
 const appConfig = useAppConfig()
+const { $prettier } = useNuxtApp()
 
-const { data: ast } = await useAsyncData(`icons-theme`, () => parseMarkdown(`
-\`\`\`yml
-${json5.stringify(appConfig.ui.icons, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
+const { data: ast } = await useAsyncData(`icons-theme`, async () => {
+  const md = `
+\`\`\`ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: ${json5.stringify(appConfig.ui.icons, null, 2)}
+  }
+})
 \`\`\`\
+`
 
-::tip
-You can customize this component in your \`app.config.ts\` under \`ui.icons\` key.
-::
-`))
+  let formatted = ''
+  try {
+    formatted = await $prettier.format(md, {
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
+    })
+  } catch (e) {
+    formatted = md
+  }
+
+  return parseMarkdown(formatted)
+})
 </script>
 
 <template>