SVG Manager

简体中文 | English

VS Code 强大的 SVG 资源管理插件，专为前端开发者设计。提供可视化管理、一键去色、智能压缩和安全备份功能。

✨ 核心特性

• 📂 可视化管理：扫描工作区或特定文件夹中的所有 SVG 文件，提供直观的列表视图和缩略图预览。
• 🎨 智能去色：
  • 一键将硬编码颜色（fill/stroke）替换为 currentColor，使图标能随 CSS 文本颜色变化。
  • 自动移除不必要的 fill-opacity 等属性。
  • 强制处理：即使是无色属性的 SVG，也会强制添加 fill="currentColor"，确保预览生效。
• 🗜️ 无损压缩：
  • 基于 SVGO 的智能压缩。
  • CSS 友好：自动保留 viewBox 并移除 width/height，确保图标完美响应 CSS font-size 缩放。
  • 显示压缩节省体积百分比。
• 👁️ 实时预览增强：
  • 在列表中直接预览 SVG 内容。
  • 自定义背景：可设置预览背景色（如深色模式），方便查看白色图标。
  • 模拟图标色：可设置预览图标颜色，快速校验 currentColor 是否生效。
• 🛡️ 安全备份：
  • 自动备份：修改前自动备份原文件到 .svg-backup 目录。
  • 一键恢复：随时从 UI 界面一键撤销更改，恢复原始文件。
  • 智能忽略：自动配置 .gitignore，防止备份文件被提交。

🚀 快速开始

1. 打开面板：

   • 使用命令面板 (Ctrl+Shift+P / Cmd+Shift+P) 输入 SVG Manager: Open。
   • 或在左侧资源管理器中，右键点击文件夹，选择 SVG Manager: Manage Folder（仅扫描该文件夹）。

2. 管理图标：

   • 勾选需要处理的图标（支持多选）。
   • 点击 Remove Colors 进行去色。
   • 点击 Compress 进行压缩。

3. 校验效果：

   • 在面板顶部，修改 "Icon Color"（例如改为红色）。
   • 如果图标随之变红，说明去色成功！

4. 恢复文件：

   • 如果对结果不满意，点击列表右侧的 Recall/Restore 按钮即可通过备份还原。

⚙️ 配置选项

您可以在 VS Code 设置中配置以下选项：