Skip to main content
This guide will help you start using View Exports SVG to discover and visualize your SVG components. You’ll go from installation to viewing your first icons in just a few steps.

​
Prerequisites

Before you begin, make sure you have:
  • Visual Studio Code version 1.109.0 or higher installed
  • View Exports SVG extension installed (see Installation)
  • A JavaScript or TypeScript project with SVG components exported from .js, .jsx, .ts, or .tsx files
View Exports SVG works with JavaScript and TypeScript files that export SVG components. The extension automatically detects exported SVG elements from React, Preact, and similar frameworks.

​
Open your first SVG icons

There are three ways to launch the View Exports SVG viewer. Choose the method that works best for your workflow.

​
Method 1: Scan entire workspace

The fastest way to discover all SVG icons in your project is to scan your entire workspace.
1

Open the Command Palette

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to open the Command Palette.
2

Run the scanning command

Type View Exports SVG: Start Scanning and press Enter.The extension will scan all JavaScript and TypeScript files in your workspace to find exported SVG components.
3

Wait for scanning to complete

You’ll see a progress notification while the extension scans your files.Once complete, the View Exports SVG panel will open with all discovered icons.

​
Method 2: Use the context menu

You can also launch the viewer from a specific file or folder using the context menu.
1

Locate your icon files

In the VS Code Explorer, navigate to a JavaScript or TypeScript file containing SVG exports.The file must have a .js, .jsx, .ts, or .tsx extension (excluding .d.ts files).
2

Right-click the file

Right-click on the file in the Explorer or in the editor.You can also select multiple files or an entire folder.
3

Select View Exports SVG

From the context menu, select View Exports SVG 🔍.The extension will scan the selected file(s) and display any SVG components found.

​
Method 3: Drag and drop files

Once the viewer is open, you can add more icons by dragging and dropping files.
1

Open the viewer

Use Method 1 or Method 2 to open the View Exports SVG panel.
2

Drag SVG files

From the VS Code Explorer, drag and drop JavaScript or TypeScript files containing SVG components onto the View Exports SVG panel.The extension will process the files and add any discovered icons to the viewer.

​
Explore the interface

Once the View Exports SVG panel opens, you’ll see an interactive interface with several key areas:
1

Icon grid

The main area displays all discovered SVG components in a grid layout.Each icon shows a preview of the SVG along with its component name.
2

Search and filter

Use the search box at the top to filter icons by name.Type at least 3 characters to start searching.
3

Recent and favorites

View your recently used icons and favorites in dedicated sections.Mark icons as favorites by clicking the star icon for quick access later.
4

DevTools panel

Click any icon to open the DevTools panel (or click the tools icon in the title bar).This panel provides an interactive playground for editing icon properties.
The View Exports SVG interface automatically adapts to your current VS Code theme, ensuring a seamless visual experience.

​
Interact with your icons

Now that you can see your icons, here’s what you can do with them:

​
Copy component name

1

Click an icon

Click on any icon in the grid.
2

Copy to clipboard

The component name is automatically copied to your clipboard.You’ll see a confirmation notification.
3

Paste in your code

Paste the component name in your code editor to use the icon in your project.

​
Use the interactive playground

The DevTools panel includes an interactive playground where you can experiment with icon properties.
1

Open DevTools

Click any icon to select it, which automatically opens the DevTools panel.Alternatively, click the tools icon in the title bar.
2

Edit properties

In the code editor within DevTools, modify properties like size, color, fill, stroke, width, and height.The preview updates in real-time as you type.
3

View the preview

See your changes immediately in the live preview area.The playground respects your default icon properties from settings.

​
Export icons

You can export icons in multiple formats for use outside of VS Code.
1

Select an icon

Click on an icon in the grid to select it and open DevTools.
2

Choose export format

In the DevTools panel, find the export options.You can export as SVG or PNG format.
3

Save the file

Click the download button to save the icon to your file system.You’ll be prompted to choose a save location.

​
Available commands

View Exports SVG provides several commands accessible from the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
  • View Exports SVG: Start Scanning - Scan workspace for all SVG components
  • View Exports SVG: Reload Theme - Reload the viewer theme to match your current VS Code theme
  • View Exports SVG: Clear Cache - Clear the cached icon data (useful if icons aren’t updating)
When the View Exports SVG panel is active, additional commands appear in the title bar:
  • Expand All / Collapse All - Expand or collapse all icon groups
  • Open DevTools / Close DevTools - Toggle the DevTools panel
  • Clear Cache - Clear cached data

​
Configure default settings

You can customize View Exports SVG behavior in VS Code settings.
1

Open settings

Go to File > Preferences > Settings (or Ctrl+, / Cmd+,).
2

Search for View Exports SVG

Type View Exports SVG in the settings search box.
3

Customize settings

Key settings you can configure:
  • Default Expand All: Expand all icon groups by default
  • Default Click To Open DevTools: Automatically open DevTools when clicking an icon
  • Assets Path: Specify custom directories to scan for icons
  • Ignore Directories: Exclude specific directories from scanning
  • Default Icon Properties: Set default values for icon properties in the playground
Changes to settings like Assets Path or Ignore Directories require rescanning your workspace to take effect.

​
Troubleshooting

If the extension doesn’t find any icons:
  • Ensure your files have .js, .jsx, .ts, or .tsx extensions
  • Verify that your components export SVG elements (not just import them)
  • Check that the files aren’t in ignored directories
  • Try clearing the cache with View Exports SVG: Clear Cache and rescanning
The extension caches scanned icons for performance. If you modify an icon component:
  • Run View Exports SVG: Clear Cache from the Command Palette
  • Rescan your workspace with View Exports SVG: Start Scanning
If clicking an icon doesn’t open DevTools:
  • Check the Default Click To Open DevTools setting
  • Manually open DevTools by clicking the tools icon in the title bar
  • Ensure the View Exports SVG panel is active
If icons display incorrectly:
  • Verify the SVG component exports valid JSX/TSX
  • Check for syntax errors in your icon files
  • Ensure all required props have default values or are optional
  • Try reloading the theme with View Exports SVG: Reload Theme

​
Next steps

Congratulations! You’ve successfully viewed your first SVG icons with View Exports SVG. Here are some next steps:

Configuration

Learn about advanced configuration options and customization

Features

Explore all features including grouping patterns, recent icons, and more

Tips & Tricks

Discover productivity tips and advanced workflows

Troubleshooting

Get help with common issues and error messages

Build docs developers (and LLMs) love

Get started for freeTalk to us