给你的 Vitepress 文档自动补充代码组图标 [vitepress-plugin-group-icons]

[lyc575757]

Vitepress 有一个代码组功能，可以允许用户对多个代码块进行分组并切换:

vitepress-plugin-group-icons 是一个插件，可以为代码组自动补充图标，增强文档的可读性。

内置图标

包含常见的前端包管理器，框架，配置文件等

自定义图标

你可以使用所有 iconify 或者本地的 svg 文件进行自定义图标展示。

案例展示

已经有许多开源项目的 Vitepress 文档在使用此插件:

• Hono

• UnoCSS

• Vue Macros

• Rolldown

• Unplugin

• Unplugin Turbo Console

• ...

开始使用

请访问文档地址查看详细的使用教程。

GitHub 仓库。

欢迎大家使用此插件并反馈🥳

[Ziuc]

赞👍🏻

[mydebug]

来得正好，之前一直搜代码组是怎么写的没搜到，在这碰见了

[dufu1991]

来得正好，之前我的项目中有这个需求，本来想着自己写一个，没时间，有你这个正好。

[dufu1991]

只支持 vitepress 吗？

[lyc575757]

@dufu1991 #4 目前是的 还有其他 SSG 框架有类似的需求吗

[dufu1991]

@lyc575757 我这个是 Vite 项目，使用 hljs 高亮代码，想实现你这个效果，看来得自己写了。

[lyc575757]

@dufu1991 #6 其实这个项目生成图标的大部分逻辑也是一个 Vite 插件，可以参考一下源代码里的 vite.ts 文件。

[dufu1991]

@lyc575757 #7 OK

[dufu1991]

看了一下，你这个逻辑我这边没法复用，我自己写了个基于 Tailwind 的纯 CSS 方案，实现这种代码组且带有 icon 的效果，已经完全满足我的需求，感谢。https://stdf.design/#/guide