docs: add vitepress-plugin-group-icons (#1056)

Author: skirtles-code

docs/.vitepress/config.ts

@@ -1,5 +1,6 @@
 import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
+import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 import vite from './vite.config'
 
 const GETTING_STARTED: DefaultTheme.NavItemWithLink[] = [
@@ -39,6 +40,9 @@ export default defineConfig({
       light: 'vitesse-light',
       dark: 'vitesse-dark',
     },
+    config(md) {
+      md.use(groupIconMdPlugin)
+    },
   },
 
   cleanUrls: true,

docs/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import Theme from 'vitepress/theme'
 import { h } from 'vue'
 import 'uno.css'
 import './style.css'
+import 'virtual:group-icons.css'
 
 export default {
   extends: Theme,

docs/.vitepress/vite.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath } from 'node:url'
 import UnoCSS from 'unocss/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
+import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 
 export default defineConfig({
   plugins: [
@@ -13,6 +14,7 @@ export default defineConfig({
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
       extensions: ['vue', 'md'],
     }),
+    groupIconVitePlugin(),
     UnoCSS(
       fileURLToPath(new URL('./uno.config.ts', import.meta.url)),
     ),

docs/getting-started/open-in-editor.md

@@ -12,7 +12,7 @@ Starting from **v7.2.0**, you can specify the editor by `launchEditor` option:
 
 This is a list of [supported editors](https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors), please ensure that the editor's environment variables are correctly configured beforehand.
 
-```ts
+```ts [vite.config.ts]
 import VueDevTools from 'vite-plugin-vue-devtools'
 
 export default defineConfig({

docs/guide/vite-plugin.md

@@ -30,9 +30,7 @@ $ bun add -D vite-plugin-vue-devtools
 
 ## Usage
 
-```ts
-//  Configuration Vite
-
+```ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
 

docs/help/faq.md

@@ -10,7 +10,7 @@ Starting from **v7.2.0**, you can specify the editor by `launchEditor` option:
 
 This is a list of [supported editors](https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors), please ensure that the editor's environment variables are correctly configured beforehand.
 
-```ts
+```ts [vite.config.ts]
 import VueDevTools from 'vite-plugin-vue-devtools'
 
 export default defineConfig({
@@ -25,7 +25,7 @@ export default defineConfig({
 
 ## How to work with Laravel Vite Plugin?
 
-```ts
+```ts [vite.config.ts]
 import laravel from 'laravel-vite-plugin'
 import { defineConfig } from 'vite'
 import VueDevTools from 'vite-plugin-vue-devtools'
@@ -48,9 +48,7 @@ export default defineConfig({
 We still recommend using [Nuxt DevTools](https://github.com/nuxt/devtools) for a better development experience.
 :::
 
-```ts
-// nuxt.config.ts
-
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   vite: {
     plugins: [
@@ -64,7 +62,7 @@ export default defineNuxtConfig({
 
 ## How to work with [Vite Ruby](https://vite-ruby.netlify.app/)?
 
-```ts
+```ts [vite.config.ts]
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 import RubyPlugin from 'vite-plugin-ruby'
@@ -83,8 +81,7 @@ export default defineConfig({
 
 ## How to work with [WXT](https://wxt.dev/)?
 
-```ts
-// wxt.config.ts
+```ts [wxt.config.ts]
 import devtools from 'vite-plugin-vue-devtools'
 import { defineConfig } from 'wxt'
 

docs/help/troubleshooting.md

@@ -8,8 +8,7 @@ If you see devtools render as follows:
 
 And you are using `vite-plugin-html`, please make sure register `vite-plugin-vue-devtools` before `vite-plugin-html`.
 
-```ts
-// vite.config.ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'

docs/package.json

@@ -12,6 +12,7 @@
     "@vueuse/core": "catalog:",
     "unplugin-vue-components": "^29.1.0",
     "vitepress": "1.6.4",
+    "vitepress-plugin-group-icons": "^1.7.1",
     "vue": "catalog:"
   }
 }