SVG Auto Sprite

一个轻量、极速的 VS Code 插件，用于自动监听目录变动并实时生成 SVG Sprite (SVG 雪碧图)。

✨ 特性

• 实时监听: 毫秒级响应，只要源目录下的 .svg 文件发生增、删、改，立即更新 Sprite。
• 极致简洁: 零配置依赖，不递归子目录，保持生成的文件结构扁平清晰。
• 智能提取: 自动提取并保留原始 SVG 的 viewBox 属性，确保图标渲染比例正确。
• 基于 Bun: 利用现代运行时，构建和运行速度极快。

🚀 安装

您可以从 VS Code 扩展市场搜索 svg-auto-sprite 并在编辑器中直接安装。

或者手动安装 .vsix 文件：

1. 下载 .vsix 文件。
2. 在 VS Code 中，打开扩展面板，点击右上角 ...。
3. 选择 Install from VSIX...。

⚙️ 插件设置

插件安装后即可使用默认配置。如需自定义，请进入 Settings 搜索 SVG Auto Sprite：

📖 使用示例

1. 准备图标

在你的项目根目录下创建 icons 文件夹，并放入图标：

• icons/home.svg
• icons/user.svg

2. 自动生成

插件会自动生成 assets/icons.svg，内容如下：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="home" viewBox="0 0 24 24">...</symbol>
  <symbol id="user" viewBox="0 0 24 24">...</symbol>
</svg>

3. 在 HTML/框架中使用

<svg>
  <use xlink:href="assets/icons.svg#home"></use>
</svg>

🛠️ 开发与构建

如果你想基于本项目进行二次开发：

前置条件

• 已安装 Bun
• 已安装 VS Code

常用命令

# 安装依赖
bun install

# 实时热编译 (开发推荐)
bun run watch

# 生产环境编译
bun run build

# 打包 VSIX
vsce package --no-dependencies --allow-missing-repository

📝 许可证

MIT