代码分组图标

自动补全代码组缺失的产品图标，并为代码块添加带图标和名称的标题栏。

https://www.npmjs.com/package/vitepress-plugin-group-icons
https://github.com/yuyinws/vitepress-plugin-group-icons

安装

npm

npm install -D vitepress-plugin-group-icons

yarn

yarn add -D vitepress-plugin-group-icons

pnpm

pnpm add -D vitepress-plugin-group-icons

bun

bun add -D vitepress-plugin-group-icons

配置

App Config

// .vitepress/config.mts
import { defineConfig } from 'vitepress'; 
import { defineConfig, Plugin } from 'vitepress'; 

import { 
  groupIconMdPlugin, 
  groupIconVitePlugin, 
} from 'vitepress-plugin-group-icons'; 

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(groupIconMdPlugin); 
    },
  },
  vite: {
    plugins: [
      groupIconVitePlugin() as Plugin; 
    ],
  },
});

Theme Config

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';

import 'virtual:group-icons.css'; 

使用

::: code-group

```sh [npm]
npm install -D vitepress-plugin-group-icons
```

```sh [yarn]
yarn add -D vitepress-plugin-group-icons
```

```sh [pnpm]
pnpm add -D vitepress-plugin-group-icons
```

```sh [bun]
bun add -D vitepress-plugin-group-icons
```

:::

npm

npm install -D vitepress-plugin-group-icons

yarn

yarn add -D vitepress-plugin-group-icons

pnpm

pnpm add -D vitepress-plugin-group-icons

bun

bun add -D vitepress-plugin-group-icons