配置 vitepress-plugin-group-icons

分组代码块提供不同的图标样式

下载依赖

npm

$ npm i vitepress-plugin-group-icons

pnpm

$ pnpm i vitepress-plugin-group-icons

yarn

$ yarn 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

内置图标

1. Package Managers: [npm, yarn, pnpm, bun, deno ]
2. Frameworks: [Vue, Svelte, Angular, React, Solid, Astro, Next, Nuxt]
3. Bundlers: [Rollup, Webpack, Vite, esbuild]
4. Configuration Files: [package.json, tsconfig.json, eslint.config.js, .gitignore, .env, .vscode/settings.json, tailwind.config.js, uno.config.ts, .oxlintrc.json]
5. Filename Extension: [foo.ts, foo.js, foo.md, foo.py, foo.yml, foo.html, foo.css, foo.scss, foo.ico]

自定义图标

你可以从 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',
        },
      })
    ],
  }
})