代码组图标

1cd demo/docs-base/
2pnpm add -D vitepress-plugin-group-icons

 1// Demo\docs-base\.vitepress\config.mts
 2import { defineConfig } from "vitepress";
 3import { groupIconMdPlugin, groupIconVitePlugin } from "vitepress-plugin-group-icons"; // 导入代码组图标插件
 4
 5const tkConfig = tkThemeConfig({
 6  markdownPlugins: [
 7        (md: any) => md.use(groupIconMdPlugin), //代码组图标插件
 8  ],
 9});
10
11export default defineConfig({
12  vite: {
13    plugins: [
14      groupIconVitePlugin() //代码组图标
15    ],
16  },
17});

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

1

  

    npm
    
    pnpm
    
    yarn
    
    bun
    
  

    













1npm -v
1pnpm -v
1yarn -v
1bun -v

1pnpm i
2pnpm to:theme stub
3pnpm demo:base dev

 1```ts
 2export const builtInIcons: Record<string, string> = {
 3  // package manager
 4  pnpm: "logos:pnpm",
 5  npm: "logos:npm-icon",
 6  yarn: "logos:yarn",
 7  bun: "logos:bun",
 8  // framework
 9  vue: "logos:vue",
10  svelte: "logos:svelte-icon",
11  angular: "logos:angular-icon",
12  react: "logos:react",
13  next: "logos:nextjs-icon",
14  nuxt: "logos:nuxt-icon",
15  solid: "logos:solidjs-icon",
16  // bundler
17  rollup: "logos:rollupjs",
18  webpack: "logos:webpack",
19  vite: "logos:vitejs",
20  esbuild: "logos:esbuild",
21};
22```

 1// Demo\docs-base\.vitepress\config.mts
 2import { defineConfig } from "vitepress";
 3import { groupIconMdPlugin, groupIconVitePlugin, localIconLoader } from "vitepress-plugin-group-icons";  
 4
 5export default defineConfig({
 6  markdown: {
 7    config(md) {
 8      md.use(groupIconMdPlugin); //代码组图标
 9    },
10  },
11
12  vite: {
13    plugins: [
14      groupIconVitePlugin({
15        customIcon: {
16          ts: localIconLoader(import.meta.url, "../public/svg/typescript.svg"), //本地ts图标导入
17          js: "logos:javascript", //js图标
18          md: "logos:markdown", //markdown图标
19          css: "logos:css-3", //css图标
20        },
21      }),
22    ],
23  },
24});