代码组图标

提示

使用的是 @yuyinws/vitepress-plugin-group-icons

参照教程安装：https://vpgi.vercel.app/

安装插件

提示

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

pnpm

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

yarn

yarn add -D vitepress-plugin-group-icons

npm

npm install vitepress-plugin-group-icons

bun

bun add -D vitepress-plugin-group-icons

注册插件

• 在 Demo\docs-base\.vitepress\config.mts 中注册插件

注意

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

• 错误示例

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

• 正确示例

// 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 报错？ 请备份配置及文件后，参考下面解决方案

配置插件

• 最后还需要在 Demo\docs-base\.vitepress\theme\index.ts 中引入样式

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

使用图标

使用时，请确保代码后有对应的文字触发

::: code-group

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

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

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

:::

内置图标

• 已经内置的常用图标有

```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",
};
```

自定义图标

那么如何自定义呢，我们先在 iconify 中找到中意的图标

说明

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

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

图标名复制后，可以在 config.mts 中配置

// 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图标
        },
      }),
    ],
  },
});

图标效果

npm

npm install vitepress-plugin-group-icons

yarn

yarn add vitepress-plugin-group-icons

pnpm

pnpm add vitepress-plugin-group-icons

bun

bun add vitepress-plugin-group-icons