Skip to main content
The JT-View-Exports-SVG.showMenu command opens the View Exports SVG viewer panel, allowing you to explore, search, and interact with SVG icon components exported from your JavaScript/TypeScript files.

Command Details

Command ID

JT-View-Exports-SVG.showMenu

Display Title

View Exports SVG 🔍

Availability

This command is available in the following contexts:
  • Explorer Context Menu: Right-click on supported files in the file explorer
  • Editor Context Menu: Right-click within a supported file in the editor

Supported File Types

The command is only available for files that meet these criteria:
The file must be a JavaScript or TypeScript file (.js, .jsx, .ts, .tsx) but not a TypeScript declaration file (.d.ts).
Specific when clause conditions:
  • resourceLangId must match: javascript, typescript, javascriptreact, or typescriptreact
  • resourceFilename must match the pattern: ^(?!.*\.d\.ts$).*\.(ts|tsx|js|jsx)$

Usage

From Explorer or Editor Context Menu

  1. Right-click on a supported JavaScript/TypeScript file
  2. Select View Exports SVG 🔍 from the context menu
  3. The viewer panel opens, displaying all SVG icon components found in the file

Selecting Multiple Files

You can select multiple files in the explorer and run the command to process them all at once:
  1. Select multiple supported files in the explorer (Ctrl/Cmd + click)
  2. Right-click on the selection
  3. Choose View Exports SVG 🔍
  4. The viewer will process and display icons from all selected files

Behavior

  • Creates a new webview panel
  • Initializes the viewer interface
  • Processes the selected file(s) for SVG exports
  • Displays the extracted SVG components
  • Reuses the existing webview panel
  • Updates the content with the newly selected file(s)
  • Maintains your current viewer state and preferences
  • Opens an empty viewer panel
  • Ready to accept file selections or workspace scanning

What Gets Extracted

The command processes files and extracts:
  • SVG components exported from the file
  • Component names and export information
  • SVG element properties and attributes
  • Component source locations
For best results, ensure your SVG components follow React/JSX patterns with proper exports.

Build docs developers (and LLMs) love