Troubleshooting - View Exports SVG

This guide helps you resolve common issues when using the View Exports SVG extension. Most problems can be solved by following the steps below.

Common Issues

Icons not showing in the viewer

Possible Causes

Missing xmlns attribute The SVG component must include the xmlns="http://www.w3.org/2000/svg" attribute:

// ❌ Won't work
export const Icon = () => (
  <svg viewBox="0 0 24 24">
    <path d="M..." />
  </svg>
)

// ✅ Works correctly
export const Icon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M..." />
  </svg>
)

Invalid file type Ensure your file has the correct extension:
- .js or .jsx for JavaScript
- .ts or .tsx for TypeScript
- Note: .d.ts definition files are excluded
Component not exported By default, only exported components are shown. Enable the setting to show non-exported components:
```
{
  "JT-View-Exports-SVG.showNotExportedIcons": true
}
```

Invalid SVG structure The root element must be a valid SVG tag, not a Fragment:

// ❌ Won't work
export const Icon = () => (
  <>
    <svg xmlns="http://www.w3.org/2000/svg">...</svg>
  </>
)

// ✅ Works correctly
export const Icon = () => (
  <svg xmlns="http://www.w3.org/2000/svg">...</svg>
)

Scanning not finding all icons

Check Asset Paths

Configure specific directories where your icons are located:

{
  "JT-View-Exports-SVG.assetsPath": [
    "src/components/icons",
    "src/assets/svg"
  ]
}

Review Ignored Directories

Make sure your icon directories aren’t being ignored:

{
  "JT-View-Exports-SVG.ignoreDirectories": [
    "**/node_modules",
    "**/dist",
    "**/.git"
  ]
}

The extension uses glob patterns for ignore rules. Be careful not to accidentally exclude your icon directories.

File Pattern Matching

The extension only scans files matching this pattern:

Language: javascript, typescript, javascriptreact, typescriptreact
Files: *.js, *.jsx, *.ts, *.tsx (excluding *.d.ts)

Force Re-scan

Clear the cache: Click the trash icon in the panel toolbar
Run the scan command: View Exports SVG: Start Scanning from the Command Palette

Performance issues with large projects

Optimize Asset Paths

Instead of scanning the entire workspace, specify only the directories containing SVG components:

{
  "JT-View-Exports-SVG.assetsPath": [
    "src/icons"
  ]
}

Exclude Large Directories

Add directories with many files to the ignore list:

{
  "JT-View-Exports-SVG.ignoreDirectories": [
    "**/node_modules",
    "**/dist",
    "**/build",
    "**/.next",
    "**/coverage"
  ]
}

Limit Recent Icons

Reduce the number of recent icons displayed:

{
  "JT-View-Exports-SVG.recentIcons.limitShowIcons": 5
}

For optimal performance in large projects, combine specific asset paths with comprehensive ignore patterns.

Panel not opening or showing errors

Reload the Window

Sometimes a simple reload fixes panel issues:

Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Run: Developer: Reload Window

Check Extension Activation

The extension activates when you:

Right-click a .js, .jsx, .ts, or .tsx file
Run View Exports SVG: Start Scanning from Command Palette

Verify File Context

The context menu only appears for files matching:

resourceLangId: javascript, typescript, javascriptreact, typescriptreact
resourceFilename: *.js, *.jsx, *.ts, *.tsx (not *.d.ts)

Check for Conflicting Extensions

Disable other SVG-related extensions temporarily to identify conflicts.

Icons not copying to clipboard

Clipboard Permissions

Ensure VS Code has clipboard access permissions on your operating system.

What Gets Copied

When you click an icon, only the component name is copied to the clipboard, not the SVG code itself.

// If you click on this icon:
export const HomeIcon = () => <svg>...</svg>

// This gets copied:
HomeIcon

Alternative: Use the Playground

To copy the full SVG code:

Click an icon to open it in the Playground
Copy the code from the code editor panel

Clearing cache doesn't solve the issue

Manual Cache Clear

The cache is stored in VS Code’s global storage. To completely reset:

Click the trash icon in the panel toolbar
Close and reopen VS Code
Re-run the scan command

What the Cache Stores

The cache contains:

Last scan date
Favorite icons
Recent icons
Workspace SVG component data

Clearing cache will remove your favorites and recent icons. They cannot be recovered.

Check Last Scan Date

You can verify when the last scan occurred:

{
  "JT-View-Exports-SVG.lastScanDate": "2024-03-15T10:30:00.000Z"
}

This is a read-only setting that updates automatically after each scan.

Theme not matching VS Code

Reload Theme

Click the sync icon in the panel toolbar to reload the current theme.

Theme Initialization

If the theme doesn’t load:

Close the View Exports SVG panel
Reload VS Code window
Reopen the panel

No Theme Found Error

This occurs when the extension cannot detect the workspace theme. Try:

Ensure you have an active workspace folder
Check VS Code theme settings are properly configured
Switch to a different VS Code theme and back

Playground not showing component preview

Component Validation

The playground requires valid SVG components. Check:

Root element is an SVG tag with xmlns attribute
No syntax errors in the JSX code
All JSX tags are properly closed

Error Messages

The extension provides detailed error messages:

“Invalid SVG tag” - Root element is not a valid SVG tag
“Invalid xmlns attribute” - Missing or incorrect namespace
“Empty opening element” - Malformed JSX structure

Playground Generation Errors

If you see “Error generating SVG playground”:

Check the browser console for detailed error messages
Verify the component syntax is valid JSX
Ensure all dynamic props have default values

Search not returning expected results

Minimum Search Length

Search requires at least 3 characters:

"Ho" → Shows: "Please enter at least 3 characters to search..."
"Hom" → Shows results matching "Hom"

Search is Case-Insensitive

Search matches are not case-sensitive:

"home" will match:
- HomeIcon
- homeIcon  
- HOMEICON
- MyHomeComponent

Search Scope

Search only filters component names, not:

File paths
Props
SVG content
Tags

Search looks for partial matches anywhere in the component name, not just at the beginning.

DevTools panel not opening

Check Panel State

Look for the DevTools toggle button in the panel toolbar (wrench icon).

Configuration Setting

DevTools can be set to open automatically when clicking an icon:

{
  "JT-View-Exports-SVG.defaultClickToOpenDevTools": true
}

Manual Toggle

Use the toolbar button or run the command:

View Exports SVG: Open DevTools
View Exports SVG: Close DevTools

Error Messages Reference

Common error messages and their meanings:

Error Message	Cause	Solution
”Invalid SVG tag: Fragment”	Root element is a React Fragment	Use SVG element as root
”Invalid xmlns attribute”	Missing or wrong namespace	Add `xmlns="http://www.w3.org/2000/svg"`
”No SVG components found”	No exported SVG components in file	Check exports and SVG structure
”Please enter at least 3 characters”	Search query too short	Enter 3 or more characters
”No results found”	No components match search	Try different search terms
”Error extracting SVG component”	Parsing error in component	Check JSX syntax and structure

File Type Troubleshooting

The extension will not activate for:

TypeScript definition files (.d.ts)
Non-JSX JavaScript files without proper language ID
Files in node_modules or other ignored directories
Files without proper export statements

Verify File Language Mode

Check the language mode in VS Code’s status bar:

Open your SVG component file
Look at the bottom-right corner of VS Code
It should show: JavaScript React or TypeScript React

If it shows just JavaScript or TypeScript, change it to the React variant.

Getting More Help

Check Console Logs

For detailed debugging information:

Open VS Code Developer Tools: Help > Toggle Developer Tools
Check the Console tab for error messages
Look for messages prefixed with “View Exports SVG”

Report Issues

If you continue experiencing issues:

Visit the GitHub Issues page
Provide:
- VS Code version
- Extension version
- Sample code that reproduces the issue
- Error messages from the console
- Your configuration settings

Before reporting, try reproducing the issue with minimal configuration and in a fresh workspace.

Configuration Checklist

Use this checklist to verify your setup:

Files have correct extensions (.js, .jsx, .ts, .tsx)
SVG components include xmlns="http://www.w3.org/2000/svg"
Components are exported using ES6 syntax
Asset paths are configured correctly
Ignored directories don’t include icon folders
Cache is cleared if seeing stale data
VS Code is on a recent version
Extension is up to date

Performance Optimization

For the best experience:

{
  // Scan only icon directories
  "JT-View-Exports-SVG.assetsPath": ["src/icons"],
  
  // Exclude build artifacts
  "JT-View-Exports-SVG.ignoreDirectories": [
    "**/node_modules",
    "**/dist",
    "**/build"
  ],
  
  // Limit recent icons
  "JT-View-Exports-SVG.recentIcons.limitShowIcons": 10,
  
  // Hide non-exported components if not needed
  "JT-View-Exports-SVG.showNotExportedIcons": false
}

Commands

Advanced

​Common Issues

​Possible Causes

​Check Asset Paths

​Review Ignored Directories

​File Pattern Matching

​Force Re-scan

​Optimize Asset Paths

​Exclude Large Directories

​Limit Recent Icons

​Reload the Window

​Check Extension Activation

​Verify File Context

​Check for Conflicting Extensions

​Clipboard Permissions

​What Gets Copied

​Alternative: Use the Playground

​Manual Cache Clear

​What the Cache Stores

​Check Last Scan Date

​Reload Theme

​Theme Initialization

​No Theme Found Error

​Component Validation

​Error Messages

​Playground Generation Errors

​Minimum Search Length

​Search is Case-Insensitive

​Search Scope

​Check Panel State

​Configuration Setting

​Manual Toggle

​Error Messages Reference

​File Type Troubleshooting

​Verify File Language Mode

​Getting More Help

​Check Console Logs

​Report Issues

​Configuration Checklist

​Performance Optimization

Build docs developers (and LLMs) love

Common Issues

Possible Causes

Check Asset Paths

Review Ignored Directories

File Pattern Matching

Force Re-scan

Optimize Asset Paths

Exclude Large Directories

Limit Recent Icons

Reload the Window

Check Extension Activation

Verify File Context

Check for Conflicting Extensions

Clipboard Permissions

What Gets Copied

Alternative: Use the Playground

Manual Cache Clear

What the Cache Stores

Check Last Scan Date

Reload Theme

Theme Initialization

No Theme Found Error

Component Validation

Error Messages

Playground Generation Errors

Minimum Search Length

Search is Case-Insensitive

Search Scope

Check Panel State

Configuration Setting

Manual Toggle

Error Messages Reference

File Type Troubleshooting

Verify File Language Mode

Getting More Help

Check Console Logs

Report Issues

Configuration Checklist

Performance Optimization