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": [
"**/dist",
"**/node_modules"
]
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": {
"width": "28",
"height": "28",
"color": "#0a0a0a",
"stroke": "#0a0a0a",
"fill": "#0a0a0a",
"strokeWidth": "0.2"
}
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"
}
Group icons automatically based on file or folder patterns.
Example use cases:
- Flag icon sets
- Navigation vs action icons
- Design system categorization
Patterns follow glob syntax and are evaluated in order.
🕘 Recent Icons
Show Recent Icons
"JT-View-Exports-SVG.recentIcons.showIcons": true
Toggles the Recent Icons section in the panel.
Limit Recent Icons
"JT-View-Exports-SVG.recentIcons.limitShowIcons": 10
Controls how many recent icons are displayed (min: 1, max: 50).
💡 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"
}
}