docs: use vitepress-plugin-group-icons

docs/.vitepress/config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+import { groupIconPlugin } from 'vitepress-plugin-group-icons'
 import { zhCN } from './zhCN'
 import { enUS } from './enUS'
 
@@ -35,6 +36,9 @@ export default defineConfig({
     image: {
       lazyLoading: true,
     },
+    config(md) {
+      md.use(groupIconPlugin as any)
+    },
   },
   head: [
     ['meta', { property: 'og:title', content: 'Unplugin Turbo Console' }],

docs/.vitepress/theme/index.ts

@@ -4,14 +4,19 @@ import 'uno.css'
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import '@shikijs/vitepress-twoslash/style.css'
 import type { EnhanceAppContext } from 'vitepress'
-import GroupName from '../components/GroupName.vue'
+import { GroupIconComponent } from 'vitepress-plugin-group-icons/client'
+import rspack from '../assets/icons/rspack.svg?raw'
+import farm from '../assets/icons/farm.svg?raw'
 import Layout from './Layout.vue'
 
 export default {
   ...Theme,
   Layout,
   enhanceApp({ app }: EnhanceAppContext) {
     app.use(TwoslashFloatingVue)
-    app.component('group-name', GroupName)
+    app.use(GroupIconComponent, {
+      rspack,
+      farm,
+    })
   },
 }

docs/.vitepress/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<object, object, any>
+  export default component
+}

docs/features/highlight.md

@@ -37,12 +37,12 @@ Add `~console/theme-detect` to your project entry file. Example:
 
 ::: code-group
 
-```ts [<group-name name="Vite" icon="i-logos:vitejs" />]
+```ts [Vite]
 // main.ts
 import '~console/theme-detect'
 ```
 
-```vue [<group-name name="Nuxt" icon="i-logos-nuxt-icon" />]
+```vue [Nuxt]
 <!-- app.vue -->
 <script setup lang="ts">
 import '~console/theme-detect'

docs/features/pass-logs.md

@@ -12,21 +12,21 @@ Here are examples in some frameworks:
 
 ::: code-group
 
-```vue [<group-name name="Nuxt" icon="i-logos-nuxt-icon" />]
+```vue [Nuxt]
 <!-- app.vue -->
 <script setup lang="ts">
 import '~console'
 </script>
 ```
 
-```svelte [<group-name name="SvelteKit" icon="i-logos-svelte-icon" />]
+```svelte [SvelteKit]
 <!-- +page.svelte -->
 <script lang="ts">
 import '~console'
 </script>
 ```
 
-```tsx{3} [<group-name name="SolidStart" icon="i-logos-solidjs-icon" />]
+```tsx{3} [SolidStart]
 // entry-client.tsx
 import { StartClient, mount } from '@solidjs/start/client'
 import '~console'

docs/guide/getting-started.md

@@ -26,19 +26,19 @@ outline: deep
 
 ::: code-group
 
-```bash [<group-name name="pnpm" icon="i-logos:pnpm" />]
+```bash [pnpm]
 pnpm add -D unplugin-turbo-console
 ```
 
-```bash [<group-name name="yarn" icon="i-logos:yarn" />]
+```bash [yarn]
 yarn add unplugin-turbo-console -D
 ```
 
-```bash [<group-name name="npm" icon="i-logos:npm-icon" />]
+```bash [npm]
 npm i unplugin-turbo-console --save-dev
 ```
 
-```bash [<group-name name="bun" icon="i-logos:bun" />]
+```bash [bun]
 bun add unplugin-turbo-console -d
 ```
 
@@ -50,7 +50,7 @@ bun add unplugin-turbo-console -d
 
 ::: code-group
 
-```ts{3,7-9} twoslash [<group-name name="Vite" icon="i-logos:vitejs" />]
+```ts{3,7-9} twoslash [Vite]
 // vite.config.ts
 import { defineConfig } from 'vite'
 import TurboConsole from 'unplugin-turbo-console/vite'
@@ -64,7 +64,7 @@ export default defineConfig({
 })
 ```
 
-```js{5} [<group-name name="webpack" icon="i-logos:webpack" />]
+```js{5} [webpack]
 // webpack.config.js
 module.exports = {
   /* ... */
@@ -74,7 +74,7 @@ module.exports = {
 }
 ```
 
-```js{6,9-11} [<group-name name="Vue CLI" icon="i-logos:vue" />]
+```js{6,9-11} [Vue CLI]
 // vue.config.js
 const { defineConfig } = require('@vue/cli-service')
 
@@ -91,7 +91,7 @@ module.exports = defineConfig({
 })
 ```
 
-```js{12-14} [<group-name name="Rspack" icon="i-custom:rspack" />]
+```js{12-14} [Rspack]
 // rspack.config.js
 const rspack = require('@rspack/core')
 const { VueLoaderPlugin } = require('vue-loader')
@@ -112,7 +112,7 @@ const config = {
 module.exports = config
 ```
 
-```ts{4,11-13} twoslash [<group-name name="Farm" icon="i-custom:farm" />]
+```ts{4,11-13} twoslash [Farm]
 // farm.config.ts
 import { defineConfig } from '@farmfe/core'
 import vue from '@vitejs/plugin-vue'
@@ -136,7 +136,7 @@ export default defineConfig({
 
 ::: code-group
 
-``` ts{4} [<group-name name="Nuxt" icon="i-logos-nuxt-icon" />]
+``` ts{4} [Nuxt]
 // nuxt.config.ts
 export default defineNuxtConfig({
   modules: [
@@ -148,7 +148,7 @@ export default defineNuxtConfig({
 })
 ```
 
-```ts{3,7} [<group-name name="SvelteKit" icon="i-logos-svelte-icon" />]
+```ts{3,7} [SvelteKit]
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig } from 'vite'
 import TurboConsole from 'unplugin-turbo-console/vite'
@@ -161,7 +161,7 @@ export default defineConfig({
 })
 ```
 
-```js{3,8} [<group-name name="Astro" icon="i-logos-astro-icon" />]
+```js{3,8} [Astro]
 // astro.config.mjs
 import { defineConfig } from 'astro/config'
 import TurboConsole from 'unplugin-turbo-console/astro'
@@ -174,7 +174,7 @@ export default defineConfig({
 })
 ```
 
-```js{6} [<group-name name="Next.js" icon="i-logos-nextjs-icon" />]
+```js{6} [Next.js]
 // next.config.js
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -190,7 +190,7 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-```ts{2,7} twoslash [<group-name name="SolidStart" icon="i-logos-solidjs-icon" />]
+```ts{2,7} twoslash [SolidStart]
 import { defineConfig } from '@solidjs/start/config'
 import TurboConsole from 'unplugin-turbo-console/vite'
 

docs/package.json

@@ -15,6 +15,7 @@
     "case-police": "^0.6.1",
     "unocss": "^0.61.3",
     "unplugin-turbo-console": "workspace:*",
-    "vitepress": "^1.3.1"
+    "vitepress": "^1.3.1",
+    "vitepress-plugin-group-icons": "^0.0.8"
   }
 }

docs/uno.config.ts

@@ -10,12 +10,6 @@ export default defineConfig({
         'display': 'inline-block',
         'vertical-align': 'middle',
       },
-      collections: {
-        custom: {
-          rspack: () => fs.readFile('./public/icons/rspack.svg', 'utf-8'),
-          farm: () => fs.readFile('./public/icons/farm.svg', 'utf-8'),
-        },
-      },
     }),
   ],
   transformers: [

docs/zh-CN/features/highlight.md

@@ -37,12 +37,12 @@ pages
 
 ::: code-group
 
-```ts [<group-name name="Vite" icon="i-logos:vitejs" />]
+```ts [Vite]
 // main.ts
 import '~console/theme-detect'
 ```
 
-```vue [<group-name name="Nuxt" icon="i-logos-nuxt-icon" />]
+```vue [Nuxt]
 <!-- app.vue -->
 <script setup lang="ts">
 import '~console/theme-detect'

docs/zh-CN/features/pass-logs.md

@@ -10,21 +10,21 @@
 
 ::: code-group
 
-```vue [<group-name name="Nuxt" icon="i-logos-nuxt-icon" />]
+```vue [Nuxt]
 <!-- app.vue -->
 <script setup lang="ts">
 import '~console'
 </script>
 ```
 
-```svelte [<group-name name="SvelteKit" icon="i-logos-svelte-icon" />]
+```svelte [SvelteKit]
 <!-- +page.svelte -->
 <script lang="ts">
 import '~console'
 </script>
 ```
 
-```tsx{3} [<group-name name="SolidStart" icon="i-logos-solidjs-icon" />]
+```tsx{3} [SolidStart]
 // entry-client.tsx
 import { StartClient, mount } from '@solidjs/start/client'
 import '~console'

docs/zh-CN/guide/getting-started.md

@@ -26,19 +26,19 @@ outline: deep
 
 ::: code-group
 
-```bash [<group-name name="pnpm" icon="i-logos:pnpm" />]
+```bash [pnpm]
 pnpm add -D unplugin-turbo-console
 ```
 
-```bash [<group-name name="yarn" icon="i-logos:yarn" />]
+```bash [yarn]
 yarn add unplugin-turbo-console -D
 ```
 
-```bash [<group-name name="npm" icon="i-logos:npm-icon" />]
+```bash [npm]
 npm i unplugin-turbo-console --save-dev
 ```
 
-```bash [<group-name name="bun" icon="i-logos:bun" />]
+```bash [bun]
 bun add unplugin-turbo-console -d
 ```
 
@@ -50,7 +50,7 @@ bun add unplugin-turbo-console -d
 
 ::: code-group
 
-```ts{3,7-9} twoslash [<group-name name="Vite" icon="i-logos:vitejs" />]
+```ts{3,7-9} twoslash [Vite]
 // vite.config.ts
 import { defineConfig } from 'vite'
 import TurboConsole from 'unplugin-turbo-console/vite'
@@ -64,7 +64,7 @@ export default defineConfig({
 })
 ```
 
-```js{5} [<group-name name="webpack" icon="i-logos:webpack" />]
+```js{5} [webpack]
 // webpack.config.js
 module.exports = {
   /* ... */
@@ -74,7 +74,7 @@ module.exports = {
 }
 ```
 
-```js{6,9-11} [<group-name name="Vue CLI" icon="i-logos:vue" />]
+```js{6,9-11} [Vue CLI]
 // vue.config.js
 const { defineConfig } = require('@vue/cli-service')
 
@@ -91,7 +91,7 @@ module.exports = defineConfig({
 })
 ```
 
-```js{12-14} [<group-name name="Rspack" icon="i-custom:rspack" />]
+```js{12-14} [Rspack]
 // rspack.config.js
 const rspack = require('@rspack/core')
 const { VueLoaderPlugin } = require('vue-loader')
@@ -112,7 +112,7 @@ const config = {
 module.exports = config
 ```
 
-```ts{4,11-13} twoslash [<group-name name="Farm" icon="i-custom:farm" />]
+```ts{4,11-13} twoslash [Farm]
 // farm.config.ts
 import { defineConfig } from '@farmfe/core'
 import vue from '@vitejs/plugin-vue'
@@ -136,7 +136,7 @@ export default defineConfig({
 
 ::: code-group
 
-``` ts{4} [<group-name name="Nuxt" icon="i-logos-nuxt-icon" />]
+``` ts{4} [Nuxt]
 // nuxt.config.ts
 export default defineNuxtConfig({
   modules: [
@@ -148,7 +148,7 @@ export default defineNuxtConfig({
 })
 ```
 
-```ts{3,7} [<group-name name="SvelteKit" icon="i-logos-svelte-icon" />]
+```ts{3,7} [SvelteKit]
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig } from 'vite'
 import TurboConsole from 'unplugin-turbo-console/vite'
@@ -161,7 +161,7 @@ export default defineConfig({
 })
 ```
 
-```js{3,8} [<group-name name="Astro" icon="i-logos-astro-icon" />]
+```js{3,8} [Astro]
 // astro.config.mjs
 import { defineConfig } from 'astro/config'
 import TurboConsole from 'unplugin-turbo-console/astro'
@@ -174,7 +174,7 @@ export default defineConfig({
 })
 ```
 
-```js{6} [<group-name name="Next.js" icon="i-logos-nextjs-icon" />]
+```js{6} [Next.js]
 // next.config.js
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -190,7 +190,7 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-```ts{2,7} twoslash [<group-name name="SolidStart" icon="i-logos-solidjs-icon" />]
+```ts{2,7} twoslash [SolidStart]
 import { defineConfig } from '@solidjs/start/config'
 import TurboConsole from 'unplugin-turbo-console/vite'