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

docs/.vitepress/config/shared.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'pathe'
 import { defineConfig } from 'vitepress'
+import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 
 export const sharedConfig = defineConfig({
   title: 'TresJS',
@@ -91,4 +92,9 @@ export const sharedConfig = defineConfig({
       },
     },
   },
+  markdown: {
+    config: (md) => {
+      md.use(groupIconMdPlugin)
+    },
+  },
 })

docs/.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import TresLayout from './TresLayout.vue'
 import './custom.css'
 
 import 'uno.css'
+import 'virtual:group-icons.css'
 
 /* const plausible = createPlausible({
   init: {

docs/de/guide/getting-started.md

@@ -79,7 +79,7 @@ Da die Version 2 ein benutzerdefinierter Renderer ist, müssen wir dem `vue-comp
 
 Du musst lediglich Folgendes zu deiner `vite.config.ts`-Datei innerhalb des Vue-Plugins hinzufügen:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/de/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 Wenn du Vite verwendest, solltest du Folgendes zu deiner `vite.config.ts` hinzufügen:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/de/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
 Füge `@tresjs/nuxt` zum Abschnitt `modules` in `nuxt.config.ts` hinzu.
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/de/guide/troubleshooting.md

@@ -60,7 +60,7 @@ Derzeit gibt es keine native Unterstützung von Vue, um den verwendeten Renderer
 
 Öffne `vite.config.ts` und füge die folgende Konfiguration zum `@vitejs/plugin-vue` hinzu um die Warnung aus der Konsole zu entfernen:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

docs/es/guide/getting-started.md

@@ -79,7 +79,7 @@ Dado que la versión 2 es un renderizador personalizado, necesitamos informar al
 
 Solo necesitas agregar esto a tu archivo `vite.config.ts` dentro del plugin de Vue:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/es/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 Si estás utilizando Vite, debes agregar lo siguiente a tu `vite.config.ts`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/es/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
 Agrega `@tresjs/nuxt` a la sección `modules` de `nuxt.config.ts`
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/es/guide/troubleshooting.md

@@ -60,7 +60,7 @@ En este momento, no hay soporte nativo de Vue para definir el renderizador utili
 
 Ve a tu archivo `vite.config.ts` y agrega la siguiente configuración al `@vitejs/plugin-vue`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

docs/fr/guide/getting-started.md

@@ -79,7 +79,7 @@ Depuis que v2 es un moteur de rendu personnalisé, il nous faut informer le `vue
 
 Vous devez seulement ajouter ceci à votre `vite.config.ts` dans le plugin Vue:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/fr/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 Si vous utilisez Vite, vous devez ajoutez ceci à votre `vite.config.ts`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/fr/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
 Ajoutez `@tresjs/nuxt` à la section `modules` de votre `nuxt.config.ts`
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/fr/guide/troubleshooting.md

@@ -60,7 +60,7 @@ Actuellement, il n'est pas possible de définir nativement un autre moteur de re
 
 Dans votre `vite.config.ts`, ajoutez la configuration pour le plugin `@vitejs/plugin-vue`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

docs/guide/getting-started.md

@@ -79,7 +79,7 @@ Since v2 is a custom renderer, we need to let the `vue-compiler` of your app kno
 
 You just need to import and add the `templateCompilerOptions` from TresJS to your `vite.config.ts` inside of the vue plugin:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 If you are using Vite, you just need to import and add the `templateCompilerOptions` from TresJS to your `vite.config.ts` inside of the vue plugin:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
  Add `@tresjs/nuxt` to the `modules` section of `nuxt.config.ts`
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/guide/troubleshooting.md

@@ -60,7 +60,7 @@ At this moment, there is no native Vue support to define the renderer used on th
 
 Got to your `vite.config.ts` and add the following configuration to the `@vitejs/plugin-vue`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

docs/nl/guide/getting-started.md

@@ -79,7 +79,7 @@ Omdat v2 een custom renderer is, moeten we de `vue-compiler` van uw app laten we
 
 Je hoeft alleen maar de `templateCompilerOptions` van TresJS te importeren en toe te voegen aan uw `vite.config.ts` in de vue plugin:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/nl/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 Als je Vite gebruikt, dan hoef je alleen `templateCompilerOptions` toe te voegen en te importeren van TresJS asan je `vite.config.ts`in de vue plugin:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/nl/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
  Voeg `@tresjs/nuxt` toe aan de `modules` sectie van `nuxt.config.ts`
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/nl/guide/troubleshooting.md

@@ -60,7 +60,7 @@ Op dit moment is er geen native Vue-ondersteuning om de renderer te definiëren
 
 Ga naar je `vite.config.ts` en voeg de volgende configuratie toe aan `@vitejs/plugin-vue`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

docs/package.json

@@ -16,6 +16,7 @@
     "@iconify-json/logos": "^1.2.3",
     "@iconify-json/mdi": "^1.2.1",
     "unocss": "^0.63.4",
-    "vite-svg-loader": "^5.1.0"
+    "vite-svg-loader": "^5.1.0",
+    "vitepress-plugin-group-icons": "^1.3.1"
   }
 }

docs/vite.config.ts

@@ -3,6 +3,7 @@ import Unocss from 'unocss/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 import svgLoader from 'vite-svg-loader'
+import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 
 export default defineConfig({
   plugins: [
@@ -29,5 +30,6 @@ export default defineConfig({
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
       dts: 'components.d.ts',
     }),
+    groupIconVitePlugin(),
   ],
 })

docs/zh/guide/getting-started.md

@@ -79,7 +79,7 @@ import { TresCanvas } from '@tresjs/core'
 
 您只需将此添加到 vue 插件中的 `vite.config.ts`：
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/zh/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 如果你使用 Vite，你需要在你的 `vite.config.ts` 中添加下面的配置:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/zh/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
 将 `@tresjs/nuxt` 添加到 `nuxt.config.ts` 的 `module` 部分
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/zh/guide/troubleshooting.md

@@ -60,7 +60,7 @@ body {
 
 在你的 `vite.config.ts` 中将以下配置添加到 `@vitejs/plugin-vue`：
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'