Meta Sprites

VS Code 雪碧图生成器插件，将多张图片合并为雪碧图并自动生成对应的 CSS 代码。

功能

• 将文件夹中的 PNG/JPEG 图片合并为一张雪碧图
• 自动生成 CSS 类名和 background-position 样式
• 侧边栏配置面板（文件夹选择、间距、排列算法）
• 雪碧图预览面板（缩放、拖拽、点击定位子图）
• 点击源图片复制 <i> 标签到剪贴板
• 无效图片校验与提示
• 所有配置可通过 VS Code Settings 自定义

使用方式

1. 点击活动栏的雪碧图图标，打开侧边栏配置面板
2. 选择图片文件夹（默认 src/asset/image）
3. 设置间距和排列算法
4. 点击「🚀 生成雪碧图」
5. 生成成功后自动打开预览面板
6. 点击左侧源图片可复制 HTML 标签并定位到雪碧图对应位置

命令

配置项

在 VS Code 设置中搜索 metaSprites：

使用路径别名引用图集

metaSprites.outDir 始终是插件写入 PNG、SCSS 和元数据的真实工作区目录，不能填写 @/... 等构建工具别名。若项目已在 Vite、Webpack 等工具中将 @ 配置为路径别名，可在工作区 .vscode/settings.json 单独设置 SCSS 引用前缀：

{
  "metaSprites.outDir": "src/asset/css/sprite",
  "metaSprites.spriteUrlBase": "@/asset/css/sprite"
}

此配置会将生成 SCSS 的图片引用写为 url('@/asset/css/sprite/sprite.<hash>.png')；spriteUrlBase 留空时，仍使用 url('./sprite.<hash>.png')。该配置仅通过 VS Code Settings 读取，不显示在生成器侧边栏。

输出文件

生成成功后在输出目录中产生：

CSS 输出示例

/* Auto-generated Sprite CSS */
.sprite-icon {
  background-image: url("./sprite.png");
  background-repeat: no-repeat;
}

.sprite-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

.sprite-user {
  width: 32px;
  height: 32px;
  background-position: -36px 0;
}

HTML 使用

<i class="sprite-icon sprite-home"></i> <i class="sprite-icon sprite-user"></i>

预览面板交互

• 滚轮缩放 — 以鼠标位置为中心
• 拖拽平移 — 左键按住拖动
• 点击源图片 — 复制 HTML 标签 + 缩放定位 + 高亮边框
• 缩放控件 — 右上角 +/⟲/− 按钮
• 重置视图 — 恢复 100% 缩放

支持的图片格式

• PNG
• JPEG / JPG

注意：宽或高任一方向超过 500px（可通过 metaSprites.maxImageSize 配置）的图片会被自动跳过，不参与雪碧图生成。超大图片不适合做雪碧图，建议直接引用。

技术栈

• spritesmith — 雪碧图合并引擎
• pixelsmith — 图片处理引擎（纯 JS，无系统依赖）

开发

License

MIT