Features

💡 Fill icons

Automatically fill the missing product icons for code groups.

Input

::: 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
```

:::

Output

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

🪧 Title bar

Add a title bar with icon and name for code blocks.

Input

```js [vite.config.js]
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})
```

Output

vite.config.js

import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

Includes Code Snippets

If you also want to add title bar for Code Snippets :

.vitepress/config.ts

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

Built-in icons

Package Managers

npm

yarn

pnpm

bun

deno

Frameworks

Vue

Svelte

Angular

React

Solid

Astro

Next

Nuxt

Qwik

Ember

Bundlers

Rollup

Webpack

Vite

esbuild

Configuration Files

package.json

tsconfig.json

eslint.config.js

.gitignore

.env

.vscode/settings.json

tailwind.config.js

uno.config.ts

.oxlintrc.json

Filename Extension

foo.ts

foo.js

foo.md

foo.py

foo.yml

foo.html

foo.css

foo.scss

foo.ico

foo.gjs

Icon mapping

builtin.ts

import type { Icon } from './types'

export const builtinIcons: Icon = {
  // package managers
  'pnpm': {
    dark: 'vscode-icons:file-type-pnpm',
    light: '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',
  'solid': 'logos:solidjs-icon',
  'marko': 'vscode-icons:file-type-marko',
  'next': {
    dark: 'vscode-icons:file-type-next',
    light: 'vscode-icons:file-type-light-next',
  },
  'nuxt': 'vscode-icons:file-type-nuxt',
  'astro': {
    dark: 'vscode-icons:file-type-astro',
    light: 'vscode-icons:file-type-light-astro',
  },
  'qwik': 'logos:qwik-icon',
  'ember': 'vscode-icons:file-type-ember',
  'vitest': {
    dark: 'vscode-icons:file-type-vitest',
    light: 'vscode-icons:file-type-light-vitest',
  },
  // bundlers
  'rollup': 'vscode-icons:file-type-rollup',
  'webpack': 'vscode-icons:file-type-webpack',
  'vite': {
    dark: 'vscode-icons:file-type-vite',
    light: 'vscode-icons:file-type-light-vite',
  },
  'esbuild': 'vscode-icons:file-type-esbuild',
  'rolldown': {
    dark: 'vscode-icons:file-type-rolldown',
    light: 'vscode-icons:file-type-light-rolldown',
  },
  // 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',
  'vue.config': 'vscode-icons:file-type-vueconfig',
  'prisma.config': {
    dark: 'vscode-icons:file-type-prisma',
    light: 'vscode-icons:file-type-light-prisma',
  },
  'build.gradle': {
    dark: 'vscode-icons:file-type-gradle',
    light: 'vscode-icons:file-type-light-gradle',
  },
  'settings.gradle': {
    dark: 'vscode-icons:file-type-gradle',
    light: 'vscode-icons:file-type-light-gradle',
  },
  // 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': {
    dark: 'vscode-icons:file-type-js',
    light: 'vscode-icons:file-type-light-js',
  },
  '.cjs': {
    dark: 'vscode-icons:file-type-js',
    light: 'vscode-icons:file-type-light-js',
  },
  '.json': {
    dark: 'vscode-icons:file-type-json',
    light: 'vscode-icons:file-type-light-json',
  },
  '.js': {
    dark: 'vscode-icons:file-type-js',
    light: 'vscode-icons:file-type-light-js',
  },
  '.jsx': {
    dark: 'vscode-icons:file-type-js',
    light: 'vscode-icons:file-type-light-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': {
    dark: 'vscode-icons:file-type-yaml-official',
    light: 'vscode-icons:file-type-light-yaml-official',
  },
  '.yaml': {
    dark: 'vscode-icons:file-type-yaml-official',
    light: 'vscode-icons:file-type-light-yaml-official',
  },
  '.php': 'vscode-icons:file-type-php3',
  '.gjs': 'vscode-icons:file-type-glimmer',
  '.gts': 'vscode-icons:file-type-glimmer',
  // misc
  'oxlint': {
    dark: 'vscode-icons:file-type-oxc',
    light: 'vscode-icons:file-type-light-oxc',
  },
  'oxc': {
    dark: 'vscode-icons:file-type-oxc',
    light: 'vscode-icons:file-type-light-oxc',
  },
  'oxfmt': {
    dark: 'vscode-icons:file-type-oxc',
    light: 'vscode-icons:file-type-light-oxc',
  },
}

export const builtinExtensionIcons: Icon = {
  '.sass': 'vscode-icons:file-type-sass',
  '.less': 'vscode-icons:file-type-less',
  '.prisma': {
    dark: 'vscode-icons:file-type-prisma',
    light: 'vscode-icons:file-type-light-prisma',
  },
  '.toml': {
    dark: 'vscode-icons:file-type-toml',
    light: 'vscode-icons:file-type-light-toml',
  },
  '.ini': {
    dark: 'vscode-icons:file-type-ini',
    light: 'vscode-icons:file-type-light-ini',
  },
  '.jsp': 'vscode-icons:file-type-jsp',
  '.wasm': 'vscode-icons:file-type-wasm',
  '.rs': {
    dark: 'vscode-icons:file-type-rust',
    light: 'vscode-icons:file-type-light-rust',
  },
  '.go': 'vscode-icons:file-type-go',
  '.java': 'vscode-icons:file-type-java',
  '.c': 'vscode-icons:file-type-c',
  '.cpp': 'vscode-icons:file-type-cpp',
  '.cs': 'vscode-icons:file-type-csharp',
  '.dart': 'vscode-icons:file-type-dartlang',
  '.sln': 'vscode-icons:file-type-sln',
  '.kt': 'vscode-icons:file-type-kotlin',
  '.groovy': 'vscode-icons:file-type-groovy',
  '.scala': 'vscode-icons:file-type-scala',
  '.swift': 'vscode-icons:file-type-swift',
  '.lua': 'vscode-icons:file-type-lua',
  '.r': 'vscode-icons:file-type-r',
  '.rb': 'vscode-icons:file-type-ruby',
}

Theme matched icons

Automatic matching of icons with two themes (switch theme to view effects ):

vite

rolldown

oxc

vitest

Custom icons

You can add any icons from iconify, local svg file or 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': {
            light: 'vscode-icons:file-type-light-mdx',
            dark: 'vscode-icons:file-type-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

Extension icons

You can add file extension icons by using the enableExtensionIcons option in VitePress config.

.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({
        enableExtensionIcons: true,
        customExtensionIcon: { /* ... */ }
      })
    ],
  }
})

Extension icons include icons for languages such as C, C++, C#, Rust, Java, Go, Kotlin, Swift, Scala, Groovy, VS solution, R, Ruby, Dart by default.

foo.c

foo.cpp

foo.cs

foo.rs

foo.java

foo.go

foo.kt

foo.swift

foo.scala

foo.groovy

foo.sln

foo.r

foo.rb

You can also customize other matching rules in customExtensionIcon. Rules in customExtensionIcon will only match file extensions.

Named icons

You can also use named icons by using the ~icon~ syntax.

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

Output

Docker

Docker

Default labels

Force specific icons to be loaded regardless of whether they appear in your documentation.

The defaultLabels option allows you to preload icons for specific labels, ensuring they're available in your CSS even if they don't appear in your current documentation pages.

.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({
        defaultLabels: [
          'npm',
          'yarn',
          'pnpm',
          'bun',
          'deno',
        ],
      })
    ],
  }
})