Skip to main content

Settings

View Exports SVG provides a flexible set of configuration options that allow you to tailor how the extension behaves, scans your workspace, and renders SVG components.

All settings are available under the JT-View-Exports-SVG namespace in Visual Studio Code.

⚙️ Where to Configure

You can configure the extension in two ways:

  • Settings UI Open VS Code Settings and search for “View Exports SVG”.

  • settings.json Ideal for advanced setups or sharing configuration across a team.

{
  "JT-View-Exports-SVG.defaultExpandAll": false
}

Some settings apply globally (application scope), while others are workspace-specific.

🧭 UI & Interaction Behavior

These options control how the extension behaves when you interact with icons.

Default Expand All Icons

"JT-View-Exports-SVG.defaultExpandAll": false

Expands all icon groups by default when the panel opens. Useful for small icon sets or quick browsing.

Click to Open DevTools

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

Automatically opens the DevTools panel when clicking an icon. Disable this if you prefer selecting icons without opening the playground.

Show Not Exported Icons

"JT-View-Exports-SVG.showNotExportedIcons": false

When enabled, icons that are defined but not exported will also appear.

Recommended only for debugging or refactoring icon libraries.

📁 Workspace Scanning & Performance

These settings control how files are discovered and processed.

Assets Path (Shortcuts)

"JT-View-Exports-SVG.assetsPath": []

Defines specific file paths that act as shortcuts inside the panel. This does not limit scanning — it improves navigation.

Ignore Directories

"JT-View-Exports-SVG.ignoreDirectories": []

Exclude folders from scanning to improve performance.

Ignored by default:

  • .git, .github, .vscode*
  • node_modules, dist, build, coverage, out
  • Others commonly generated by tooling

Last Scan Date (Read-only)

"JT-View-Exports-SVG.lastScanDate": ""

Stores the timestamp of the last successful scan. Used internally for caching and optimization.

🎨 Default SVG Icon Properties

Defines fallback props applied only when a component does not explicitly define them.

"JT-View-Exports-SVG.defaultIconProperties": {
  "className": "",
  "color": "#0a0a0a",
  "fill": "#0a0a0a",
  "height": "28",
  "size": "28",
  "state": "false",
  "stroke": "#0a0a0a",
  "strokeColor": "#0a0a0a",
  "strokeWidth": "0.2",
  "style": "{}",
  "sx": "{}",
  "width": "28"
}

When is this useful?

  • Standardizing icon size across teams
  • Previewing icons with consistent defaults
  • Avoiding invisible icons due to missing colors

These values affect preview and playground rendering, not your source code.

🗂️ Icon Organization & Grouping

Group Patterns

"JT-View-Exports-SVG.groupPatterns": {
  "**": "All Icons",
  "**/Flag*": "Flags",
  "**/Symbol*.{js,jsx}": "Symbols",
  "**/icons/navigation/**": "Navigation Icons",
  "**/icons/${0}/**": "Icons - ${0}",
  "**/packages/${0}/src/${1}/**": "${0} / ${1}"
}

Group icons automatically based on file or folder patterns. Patterns follow glob syntax and are evaluated in order.

Example use cases:

  • Flag icon sets
  • Navigation vs action icons
  • Design system categorization
  • Dynamic groups based on path segments

Capture Patterns

Use ${N} placeholders in the pattern key to capture a single path segment, then reference them in the label to generate dynamic group names.

PlaceholderMatchesNotes
${N}One path segment (no / )Zero-indexed; ${0} = first, ${1} = second, etc.

Example:

PathPatternLabel templateResult group
icons/flags/brazil.tsx**/icons/${0}/**Icons - ${0}Icons - flags
packages/webview/src/assets/ReactLogo.tsx**/packages/${0}/src/${1}/**${0} / ${1}webview / assets

Captures match exactly one path segment — they do not cross / boundaries. Unresolved ${N} indices produce an empty string.

📦 Icon Collections

Controls how many icons are stored in each collection.

"JT-View-Exports-SVG.iconCollection": {
  "recent": 10,
  "favorite": 10
}
FieldTypeDefaultRangeDescription
recentnumber100-100Max recent icons stored
favoritenumber100-100Max favorite icons stored

Both collections can be cleared independently from the Command Palette or the editor/title action menu.

This setting applies globally (application scope) — limits are shared across all workspaces.

Setting a value to 0 effectively disables that collection.

💡 Recommended Configurations

Large Icon Libraries

{
  "JT-View-Exports-SVG.defaultExpandAll": false,
  "JT-View-Exports-SVG.groupPatterns": {
    "**/icons/ui/**": "UI",
    "**/icons/flags/**": "Flags"
  }
}

Design System Workflow

{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "width": "24",
    "height": "24",
    "strokeWidth": "1.5"
  }
}

🧭 Next Steps

Usage Guide

Learn how to make the most of View Exports SVG features.

DevTools Panel

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

Features

Explore all the powerful features that View Exports SVG offers.

Troubleshooting

Find solutions to common issues and frequent questions.

On this page