docs: add code group icon (unocss#4077)

lzl0304 · Aug 16, 2024 · f438190 · f438190
1 parent 8006de8
commit f438190
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 72 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/types'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+import { groupIconPlugin } from 'vitepress-plugin-group-icons'
 import { version } from '../../package.json'
 
 const ogUrl = 'https://unocss.dev/'
@@ -281,6 +282,9 @@ export default defineConfig({
         processHoverInfo: info => info.replace(/_unocss_core\./g, ''),
       }),
     ],
+    config(md) {
+      md.use(groupIconPlugin)
+    },
   },
 
   themeConfig: {

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import { h, watch } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import { GroupIconComponent } from 'vitepress-plugin-group-icons/client'
 import UnoCSSLayout from './UnoCSSLayout.vue'
 import RainbowAnimationSwitcher from './components/RainbowAnimationSwitcher.vue'
 
@@ -23,6 +24,7 @@ export default {
   enhanceApp({ app, router }) {
     app.component('RainbowAnimationSwitcher', RainbowAnimationSwitcher)
     app.use(TwoslashFloatingVue)
+    app.use(GroupIconComponent)
 
     if (typeof window === 'undefined')
       return

diff --git a/docs/package.json b/docs/package.json
@@ -17,6 +17,7 @@
     "@iconify-json/vscode-icons": "^1.1.37",
     "ofetch": "^1.3.4",
     "unocss": "workspace:*",
-    "vitepress": "^1.3.2"
+    "vitepress": "^1.3.2",
+    "vitepress-plugin-group-icons": "^0.0.9"
   }
 }