Skip to main content
View Exports SVG includes robust search and filtering capabilities to help you quickly locate specific icons in large component libraries. This guide covers how to use the search bar, understand filtering behavior, and organize icons with custom grouping patterns. The search bar is located at the top of the View Exports SVG panel and provides real-time filtering of your icon collection.
1

Access the Search Bar

The search bar appears automatically when you open the viewer. It’s always visible at the top of the dashboard for quick access.
2

Enter Search Terms

Type any text into the search field. The extension will filter icons based on:
  • Component names
  • File paths
  • Export names
Search is case-insensitive and uses debounced input (500ms delay) to improve performance with large icon sets.
3

View Results

Filtered results appear instantly below the search bar. Only icons matching your search criteria will be displayed.
4

Clear Search

Click the clear button (×) on the right side of the search field to remove your search query and show all icons again.

How Search Works

The search functionality operates with the following behavior:

Real-Time Filtering

  • Debounced Input: Search queries are processed 500ms after you stop typing to prevent excessive filtering
  • Trim Whitespace: Leading and trailing spaces are automatically removed from search terms
  • Component Filtering: The extension sends your query to the VS Code backend, which filters the complete component list
  • Instant Updates: Results appear in real-time as you type

Search Scope

The search covers:
  • Component Names: All exported SVG component names
  • File Paths: Source file locations
  • Group Labels: Custom group names (if configured)
For large projects with hundreds of icons, use specific search terms to narrow results quickly. For example, search “arrow” to find all arrow-related icons.

Grouping Icons

View Exports SVG automatically groups icons by their source file, but you can customize this behavior with grouping patterns.

Default Grouping

By default, icons are grouped by:
  1. File Path: Icons from the same source file appear together
  2. Alphabetical Order: Groups are sorted alphabetically by label
  3. Component Name: Within each group, components are sorted by name

Custom Group Patterns

You can define custom grouping patterns in your VS Code settings to organize icons by specific criteria.
Add the following to your settings.json:
{
  "JT-View-Exports-SVG.groupPatterns": {
    "**/icons/social/**": "Social Media Icons",
    "**/icons/navigation/**": "Navigation Icons",
    "**/icons/ui/**": "UI Elements",
    "**": "Other Icons"
  }
}
Pattern Syntax:
  • Use glob patterns to match file paths
  • **/icons/social/** matches any file in a social subdirectory
  • ** acts as a catch-all for unmatched icons
  • Patterns are evaluated in order - first match wins
Group Labels:
  • The value is the display name shown in the UI
  • If empty, the pattern itself is used as the label

How Grouping Works

The groupIconsByPattern function processes groups as follows:
  1. Pattern Matching: Each icon’s source path is tested against defined patterns using minimatch
  2. Group Assignment: Icons matching a pattern are assigned to that group
  3. Aggregation: Multiple files can contribute to the same group
  4. Sorting: Groups are sorted alphabetically, then components within groups are sorted

Expand and Collapse Groups

Manage group visibility to focus on specific icon sets:

Individual Groups

  • Click the group header to expand or collapse it
  • Expanded groups show all contained icons
  • Collapsed groups display only the header and icon count

Bulk Actions

Use the toolbar buttons to control all groups at once:
  • Expand All: Opens all groups simultaneously (icon: expand-all)
  • Collapse All: Closes all groups simultaneously (icon: collapse-all)
The expand/collapse state is preserved during your session but resets when you close and reopen the viewer.

Filtering by Export Status

Control whether non-exported icons appear in the viewer:
{
  "JT-View-Exports-SVG.showNotExportedIcons": false
}
  • true: Shows all SVG components, including those not exported from the module
  • false (default): Only displays exported components
Enable showNotExportedIcons when developing new components that aren’t exported yet, or when auditing your icon library for unused assets.

Recent Icons

Quickly access your most recently used icons:
{
  "JT-View-Exports-SVG.recentIcons.showIcons": true,
  "JT-View-Exports-SVG.recentIcons.limitShowIcons": 10
}
SettingDescription
showIconsEnable/disable recent icons section
limitShowIconsNumber of recent icons to display (1-50)
Recent icons appear at the top of the viewer for quick access to frequently used components.

Performance Tips

For large icon libraries:

Use Specific Searches

Type specific terms rather than browsing all icons

Configure Ignore Directories

Exclude unnecessary folders from scans

Use Group Patterns

Organize icons into logical categories

Collapse Unused Groups

Hide groups you’re not currently working with

Next Steps

Copy & Export

Learn how to export icons and copy code

Customize Properties

Adjust icon appearance in the playground

Build docs developers (and LLMs) love