Skip to main content

Usage

Once View Exports SVG is installed and running, you can browse, preview, and manage SVG components directly inside Visual Studio Code.

This guide focuses on the day-to-day workflow: how to explore icons, interact with them, and use them efficiently in your project.

🔄 Core Workflow

The typical workflow with View Exports SVG looks like this:

  1. Open the extension (context menu or command palette)
  2. Browse detected SVG components in a grid
  3. Preview icons visually
  4. Copy, export, or edit them using built-in tools

The following sections explain each step in detail.

🧭 Opening the Extension

You can open View Exports SVG at any time using:

  • The context menu on files or folders
  • The Command Palette

If this is your first time, make sure you've completed the Getting Started guide.

⚙️ Browsing Icons

Once opened, the panel displays all detected SVG components in a grid layout.

Each item shows:

  • A live preview
  • The component name
  • Quick actions
The main UI of the View Exports SVG panel showing a grid of SVG icons.
The main UI of the View Exports SVG panel showing a grid of SVG icons.

🎯 Interacting with Icons

Click Actions

  • Copy component name to clipboard
  • Open the DevTools panel
  • Add to recent icons (configurable)

Favorites

  • Hover an icon
  • Click the ⭐ star to mark or unmark

Context Menu

Right-click an icon to:

  • Copy name or code snippet
  • Open in editor
  • Copy as PNG or SVG
  • Download as PNG or SVG

👁 Previewing and Editing Icons

Selecting an icon opens the DevTools panel, where you can:

  • Preview icons in real time
  • Edit props in the playground
  • Reset or export results

For advanced editing features, see: DevTools Panel →

🧩 Alternative Workflow: Drag & Drop

You can also drag and drop files directly into the extension start screen.

This workflow is useful when:

  • Exploring icons outside the workspace
  • Testing individual files quickly

Drag & Drop files into the View Exports SVG panel to preview their SVG components.

Security Limitation

Due to VS Code's WebView sandbox restrictions, direct access to file paths is blocked.
When you drag and drop files into the panel, the extension reads their contents and creates temporary in-memory versions for safe preview.

Read more →

🧭 Next Steps

DevTools Panel

Explore the full-featured panel for managing, previewing, and editing icons.

SVG Support

Understand which SVG patterns and component structures are supported.

Troubleshooting

Find solutions to common issues and frequent questions.

Settings

Customize the extension to fit your workflow.

On this page