Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Quattro SVG HelperNew to Visual Studio Code? Get it now.
Quattro SVG Helper

Quattro SVG Helper

Quattro

|
383 installs
| (0) | Free
项目SVG管理插件:支持查看项目中的所有SVG,支持配置展示node_modules下的SVG文件,支持压缩SVG,支持选中插入代码。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Quattro SVG Helper

项目SVG管理插件,SVG文件引入代码生成。

  • 支持配置当前工作区下指定目录下的SVG文件,支持多个配置,支持展示node_modules下的SVG文件。
  • 支持优化SVG,减小svg体积。支持去除svg原有颜色,也支持保留颜色。
  • 支持配置代码生成,选中SVG后插入的代码(Import的代码和光标所在区域的代码两部分)。

功能

优化svg

通过SVGO对svg进行优化,减小svg体积。

支持去除svg原有颜色,使用fill: currentColor。

使用方式

  • 在当前svg右键,调起优化。
  • 在文件树上右键svg文件,调起优化。
  • cmd + p 输入 SVG Optimize 来对当前SVG文件优化。

其他效果

优化后会弹出页面展示优化前后的对比。

diff

展示配置目录下的SVG

右键Quattro: 插入SVG可以启动面板。

diff

代码生成

  • 右上角配置生成代码的方法(根据文件名和路径生成代码)。
  • 选中一个或多个SVG即可完成代码插入。

快速插入

输入svg会提示相关的svg,可以实现快速插入一个 SVG。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft