提示

• 推荐使用 pnpm 安装,我在子项目的，所以需要切换到子项目的 Demo\docs-base 目录下安装

pnpmyarnnpmbun

cd Demo\docs-base
pnpm add -D vitepress-plugin-group-icons

yarn add -D vitepress-plugin-group-icons

npm install vitepress-plugin-group-icons

bun add -D vitepress-plugin-group-icons

注意

groupIconMdPlugin不要在“export default defineConfig({})进行插件注册”，否则影响导航卡片样式不生效。详情查看TeeK 插件配置

ts

export default defineConfig({
  markdown: {
    config(md) {
      md.use(groupIconMdPlugin); // 代码组图标
    },
  },
})

ts

// Demo\docs-base\.vitepress\config.mts
import { defineConfig } from "vitepress";
import { groupIconMdPlugin, groupIconVitePlugin } from "vitepress-plugin-group-icons"; // 导入代码组图标插件

const tkConfig = tkThemeConfig({
  markdownPlugins: [
        (md: any) => md.use(groupIconMdPlugin), //代码组图标插件
  ],
});

export default defineConfig({
  vite: {
    plugins: [
      groupIconVitePlugin(), //代码组图标
    ],
  },
});

提示

groupIconMdPlugin 报错？ 请备份配置及文件后，参考下面解决方案

ts

import "virtual:group-icons.css"; //代码组图标样式

md

::: code-group

```sh [pnpm]
pnpm -v
```

```sh [yarn]
yarn -v
```

```sh [bun]
bun -v
```

:::

md

```ts
export const builtInIcons: Record<string, string> = {
  // package manager
  pnpm: "logos:pnpm",
  npm: "logos:npm-icon",
  yarn: "logos:yarn",
  bun: "logos:bun",
  // framework
  vue: "logos:vue",
  svelte: "logos:svelte-icon",
  angular: "logos:angular-icon",
  react: "logos:react",
  next: "logos:nextjs-icon",
  nuxt: "logos:nuxt-icon",
  solid: "logos:solidjs-icon",
  // bundler
  rollup: "logos:rollupjs",
  webpack: "logos:webpack",
  vite: "logos:vitejs",
  esbuild: "logos:esbuild",
};
```

说明

• 本地图标格式：只能使用相对路径

• 远程图标格式：必须是 logos:***

ts

// Demo\docs-base\.vitepress\config.mts
import { defineConfig } from "vitepress";
import { groupIconMdPlugin, groupIconVitePlugin, localIconLoader } from "vitepress-plugin-group-icons";  

export default defineConfig({
  markdown: {
    config(md) {
      md.use(groupIconMdPlugin); //代码组图标
    },
  },

  vite: {
    plugins: [
      groupIconVitePlugin({
        customIcon: {
          ts: localIconLoader(import.meta.url, "../public/svg/typescript.svg"), //本地ts图标导入
          js: "logos:javascript", //js图标
          md: "logos:markdown", //markdown图标
          css: "logos:css-3", //css图标
        },
      }),
    ],
  },
});

npmyarnpnpmbun

npm install vitepress-plugin-group-icons

yarn add vitepress-plugin-group-icons

pnpm add vitepress-plugin-group-icons

bun add vitepress-plugin-group-icons