VitePress 代码块图标插件

vitepress-plugin-group-icons 插件用于增强 VitePress 的代码块功能。可以自动填充代码块缺少的产品图标。

入门

安装

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

配置

.vitepress/config.ts

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

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

.vitepress/theme/index.ts

import Theme from 'vitepress/theme'
import 'virtual:group-icons.css'

export default Theme

用法

填充图标

自动填充代码块缺少的产品图标。

• 输入：

  ::: code-group
  
  ```sh [npm]
  npm install vitepress-plugin-group-icons
  ```
  
  ```sh [yarn]
  yarn add vitepress-plugin-group-icons
  ```
  
  ```sh [pnpm]
  pnpm add vitepress-plugin-group-icons
  ```
  
  ```sh [bun]
  bun add vitepress-plugin-group-icons
  ```
  
  :::

• 输出：

  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

标题栏

为代码块添加带有图标和名称的标题栏。

• 输入

  ```js [vite.config.js]
  import legacy from '@vitejs/plugin-legacy'
  import { defineConfig } from 'vite'
  
  export default defineConfig({
    plugins: [
      legacy({
        targets: ['defaults', 'not IE 11']
      })
    ]
  })
  ```

• 输出

  vite.config.js

  import legacy from '@vitejs/plugin-legacy'
  import { defineConfig } from 'vite'
  
  export default defineConfig({
    plugins: [
      legacy({
        targets: ['defaults', 'not IE 11']
      })
    ]
  })

包含代码段

如果你还想为代码段添加标题栏：

.vitepress/config.ts

export default defineConfig({
  markdown: {
    config(md) {
      md.use(groupIconMdPlugin, {
        titleBar: { includeSnippet: true }
      })
    }
  }
})

内置图标

包管理器

npm

yarn

pnpm

bun

deno

框架

Vue

React

Angular

Nuxt

Next

Svelte

Solid

Astro

打包器

Rollup

Webpack

Vite

esbuild

配置文件

package.json

tsconfig.json

eslint.config.json

.gitignore

.env

.vscode/settings.json

tailwind.config.json

unocss.config.json

.oxlintrc.json

文件扩展名

foo.js

foo.ts

foo.md

foo.py

foo.yml

foo.html

foo.css

foo.scss

foo.ico

图标映射

builtin.ts

export const builtinIcons = {
  // package managers
  pnpm: 'vscode-icons:file-type-light-pnpm',
  npm: 'vscode-icons:file-type-npm',
  yarn: 'vscode-icons:file-type-yarn',
  bun: 'vscode-icons:file-type-bun',
  deno: 'vscode-icons:file-type-deno',
  // frameworks
  vue: 'vscode-icons:file-type-vue',
  svelte: 'vscode-icons:file-type-svelte',
  angular: 'vscode-icons:file-type-angular',
  react: 'vscode-icons:file-type-reactjs',
  next: 'vscode-icons:file-type-light-next',
  nuxt: 'vscode-icons:file-type-nuxt',
  solid: 'logos:solidjs-icon',
  astro: 'vscode-icons:file-type-light-astro',
  // bundlers
  rollup: 'vscode-icons:file-type-rollup',
  webpack: 'vscode-icons:file-type-webpack',
  vite: 'vscode-icons:file-type-vite',
  esbuild: 'vscode-icons:file-type-esbuild',
  // configuration files
  'package.json': 'vscode-icons:file-type-node',
  'tsconfig.json': 'vscode-icons:file-type-tsconfig',
  '.npmrc': 'vscode-icons:file-type-npm',
  '.editorconfig': 'vscode-icons:file-type-editorconfig',
  '.eslintrc': 'vscode-icons:file-type-eslint',
  '.eslintignore': 'vscode-icons:file-type-eslint',
  'eslint.config': 'vscode-icons:file-type-eslint',
  '.gitignore': 'vscode-icons:file-type-git',
  '.gitattributes': 'vscode-icons:file-type-git',
  '.env': 'vscode-icons:file-type-dotenv',
  '.env.example': 'vscode-icons:file-type-dotenv',
  '.vscode': 'vscode-icons:file-type-vscode',
  'tailwind.config': 'vscode-icons:file-type-tailwind',
  'uno.config': 'vscode-icons:file-type-unocss',
  'unocss.config': 'vscode-icons:file-type-unocss',
  '.oxlintrc': 'vscode-icons:file-type-oxlint',
  'vue.config': 'vscode-icons:file-type-vueconfig',
  // filename extensions
  '.mts': 'vscode-icons:file-type-typescript',
  '.cts': 'vscode-icons:file-type-typescript',
  '.ts': 'vscode-icons:file-type-typescript',
  '.tsx': 'vscode-icons:file-type-typescript',
  '.mjs': 'vscode-icons:file-type-js',
  '.cjs': 'vscode-icons:file-type-js',
  '.json': 'vscode-icons:file-type-json',
  '.js': 'vscode-icons:file-type-js',
  '.jsx': 'vscode-icons:file-type-js',
  '.md': 'vscode-icons:file-type-markdown',
  '.py': 'vscode-icons:file-type-python',
  '.ico': 'vscode-icons:file-type-favicon',
  '.html': 'vscode-icons:file-type-html',
  '.css': 'vscode-icons:file-type-css',
  '.scss': 'vscode-icons:file-type-scss',
  '.yml': 'vscode-icons:file-type-light-yaml',
  '.yaml': 'vscode-icons:file-type-light-yaml',
  '.php': 'vscode-icons:file-type-php'
}

自定义图标

你可以从 iconify、本地 svg 文件或 url 添加任何图标。

.vitepress/config.ts

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: {
          '.mdx': 'vscode-icons:file-type-light-mdx',
          babel: 'vscode-icons:file-type-babel',
          vitepress: localIconLoader(
            import.meta.url,
            '../assets/vitepress.svg'
          ),
          unplugin: 'https://unplugin.unjs.io/logo_light.svg'
        }
      })
    ]
  }
})

foo.mdx

Babel

VitePress

Unplugin

命名图标

你还可以通过使用 ~icon~ 语法来使用命名图标。

• 输入

  ```[Docker ~vscode-icons:file-type-docker2~]
  Docker
  ```

• 输出

  Docker

  Docker

默认标签

defaultLabels 选项允许你预加载特定标签的图标，确保它们在你的 CSS 中可用，即使它们没有出现在你当前的文档页面中。

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

export default defineConfig({
  markdown: {
    config(md) {
      md.use(groupIconMdPlugin)
    }
  },
  vite: {
    plugins: [
      groupIconVitePlugin({
        defaultLabels: ['npm', 'yarn', 'pnpm', 'bun', 'deno']
      })
    ]
  }
})