Using the Search Bar
The search bar is located at the top of the View Exports SVG panel and provides real-time filtering of your icon collection.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.
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.
View Results
Filtered results appear instantly below the search bar. Only icons matching your search criteria will be displayed.
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)
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:- File Path: Icons from the same source file appear together
- Alphabetical Order: Groups are sorted alphabetically by label
- 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.Configure Group Patterns
Configure Group Patterns
Add the following to your Pattern Syntax:
settings.json:- Use glob patterns to match file paths
**/icons/social/**matches any file in asocialsubdirectory**acts as a catch-all for unmatched icons- Patterns are evaluated in order - first match wins
- The value is the display name shown in the UI
- If empty, the pattern itself is used as the label
How Grouping Works
ThegroupIconsByPattern function processes groups as follows:
- Pattern Matching: Each icon’s source path is tested against defined patterns using minimatch
- Group Assignment: Icons matching a pattern are assigned to that group
- Aggregation: Multiple files can contribute to the same group
- 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:true: Shows all SVG components, including those not exported from the modulefalse(default): Only displays exported components
Recent Icons
Quickly access your most recently used icons:| Setting | Description |
|---|---|
showIcons | Enable/disable recent icons section |
limitShowIcons | Number of recent icons to display (1-50) |
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