View Exports SVG
The ultimate tool to discover, visualize, and manage your SVG component library directly within Visual Studio Code. Preview, customize, and export icons with an interactive playground and powerful DevTools panel.
Quick start
Get up and running with View Exports SVG in minutes
Install the extension
Open Visual Studio Code, navigate to the Extensions view (
Ctrl+Shift+X), search for View Exports SVG, and click Install.Alternatively, install from the VS Code Marketplace.Open your project
Open a workspace or folder containing JavaScript or TypeScript files with SVG component exports. The extension works with React, Preact, and other frameworks.
View your icons
Right-click on any
.js, .jsx, .ts, or .tsx file in the Explorer and select View Exports SVG 🔍, or run the command View Exports SVG: Start Scanning from the Command Palette (Ctrl+Shift+P).The extension automatically scans your workspace for SVG exports and displays them in an interactive panel.
Explore and customize
Click on any icon to preview it in the Interactive Playground. Adjust properties like size, color, stroke width, and more in real-time. Copy the component name, download as SVG/PNG, or open the source file directly.
Example: Customizing icon properties
Example: Customizing icon properties
In the Playground, you can modify properties such as:
- Size: Change width and height
- Color: Adjust fill and stroke colors
- Stroke: Modify stroke width
- Style: Add custom CSS or inline styles
Core features
Powerful tools to streamline your SVG workflow
Advanced DevTools Panel
A dockable, full-featured panel with component viewer, search, and management tools to organize your icon library.
Interactive Playground
Select any icon to preview it, edit properties in a real-time code editor, and see changes instantly.
Workspace Scanning
Automatically discover all SVG components across your entire project with intelligent scanning and caching.
Icon Management
Mark icons as favorites, view recently used components, and get quick access to what matters most.
Explore by topic
Learn how to use View Exports SVG effectively
Resources
Get help and connect with the community
Commands Reference
Explore all available commands and keyboard shortcuts
Troubleshooting
Solutions to common issues and error messages
GitHub Issues
Report bugs or request new features
Ready to streamline your SVG workflow?
Install View Exports SVG today and start managing your icon library with ease
Get Started Now