Skip to main content
The Expand and Collapse commands allow you to quickly expand or collapse all SVG icon components in the viewer at once, making it easier to navigate large icon collections.

​
Commands

Expand All

Command ID: JT-View-Exports-SVG.expandAllTitle: Expand All IconsIcon: $(expand-all)

Collapse All

Command ID: JT-View-Exports-SVG.collapseAllTitle: Collapse All IconsIcon: $(collapse-all)

Category

View Exports SVG

​
Availability

These commands are contextually available based on the current expansion state.

​
Expand All Conditions

Available when all these conditions are met:
  • View Exports SVG panel is active (activeWebviewPanelId == 'JT-View-Exports-SVG')
  • Icons are currently collapsed (!JT-View-Exports-SVG.isExpanded)
  • Actions are enabled (JT-View-Exports-SVG.showActions)

​
Collapse All Conditions

Available when all these conditions are met:
  • View Exports SVG panel is active (activeWebviewPanelId == 'JT-View-Exports-SVG')
  • Icons are currently expanded (JT-View-Exports-SVG.isExpanded)
  • Actions are enabled (JT-View-Exports-SVG.showActions)

​
Usage

​
From the Editor Title Bar

When the View Exports SVG panel is active, you’ll see the appropriate expansion control in the editor title bar:
1

Expand All Icons

When icons are collapsed, click the expand-all icon to expand all icons at once
2

Collapse All Icons

When icons are expanded, click the collapse-all icon to collapse all icons at once
The button automatically switches between expand and collapse based on the current state.

​
From Command Palette

1

Open Command Palette

Press Ctrl/Cmd + Shift + P
2

Search for command

Type “View Exports SVG: Expand All Icons” or “View Exports SVG: Collapse All Icons”
3

Execute

Press Enter to change the expansion state

​
What Changes

When you expand or collapse icons:
  • All icon details become visible
  • SVG previews are displayed
  • Icon properties and attributes are shown
  • Export information is visible
  • More vertical space is used
  • Icons show only their names/titles
  • SVG previews are hidden
  • Properties are condensed
  • Less vertical space is used
  • Easier to scroll through large lists

​
Configuration

​
Default Expansion State

Set the default expansion state when opening the viewer:
settings.json
{
  "JT-View-Exports-SVG.defaultExpandAll": false
}

false (default)

Icons start collapsed for easier navigation

true

Icons start expanded to show all details immediately

​
Button Placement

The expand/collapse button appears in the editor title bar at:
  • Navigation group position 1 (navigation@1)
  • First button in the viewer’s title bar controls

​
Use Cases

​
When to Expand All

  • Comparing multiple icons visually
  • Reviewing icon properties across your collection
  • Taking screenshots or documentation
  • Inspecting export patterns

​
When to Collapse All

  • Searching for a specific icon by name
  • Working with large icon collections
  • Reducing visual clutter
  • Improving scrolling performance

Build docs developers (and LLMs) love

Get started for freeTalk to us