Skip to main content

Features

View Exports SVG provides a focused set of tools for discovering, previewing, and working with SVG components directly inside Visual Studio Code.

This page lists the core features available in the extension and how they are grouped by functionality.


🧭 Workspace Scanning

Automatically scans your workspace to detect all exported SVG components.

Full Project Detection

Detects exported icons across .tsx, .jsx, .js, and .ts files — no manual setup required.

Multi-file Analysis

Recursively scans all folders and submodules in your workspace, ensuring that every component is indexed.

Smart Caching

Multi-layer cache (files, themes, components, collections) skips already-scanned data. Concurrent file processing makes large workspace scans significantly faster.


⚙️ DevTools Panel

A fully dockable panel that acts as the central interface for exploring and interacting with SVG components.

Component Explorer

Displays all SVG components with thumbnails, names, and quick actions for copying or exporting.

Interactive Playground

Edit your SVG component props in real time and instantly see the rendered output.


🧠 Productivity Tools

Utilities designed to reduce repetitive tasks and speed up SVG-related workflows.

Quick Copy

Copy component names or SVG code directly to your clipboard with one click.

Export Options

Download any icon as .svg or .png instantly.

Context Menu Integration

Launch the viewer from the right-click menu in VS Code's Explorer.

Command Palette Support

Run "View Exports SVG: Start Scanning" from the Command Palette to trigger workspace scans.

Icon Collections

Dedicated Recent and Favorite collections with configurable per-collection limits. Clear each independently from the command palette.

Cache Management

Three clearing modes — clear file cache, clear collections, or clear everything — available from the Command Palette and editor/title action submenu.


🧩 Framework Compatibility

View Exports SVG analyzes exported components across common frontend stacks:

  • React
  • Preact
  • JavaScript & TypeScript

tip

Projects mixing .js, .jsx, .ts, and .tsx files are fully supported.


🎨 Theme Compatibility

The extension adapts its UI to match your current VS Code theme.

Light & Dark Modes

Automatically detects your current VS Code theme and adjusts its UI for consistent readability.

Popular Themes

Compatible with popular themes like Dracula, One Dark Pro,Night Owl, GitHub Dark, and more.

VS Code Web Compatible

Theme resources load dynamically — no local file cloning. Works in both desktop and VS Code Web environments.


🗂 Feature History

View Exports SVG is actively evolving, with features being refined and expanded over time.

If you're curious about when a feature was introduced, recent improvements, or breaking changes, you can explore the full release history in the Changelog.