Favorites System
Mark important icons as favorites for quick access:Adding Favorites
There are two ways to mark an icon as a favorite:- Star Button: Hover over any icon card and click the star icon
- Context Menu: Right-click an icon and select “Add to Favorites”
- The star icon fills in and changes color
- The component is saved to the favorites cache
- It appears in the Favorites section (if enabled)
Removing Favorites
To remove a favorite:- Click the filled star icon on the component card
- The icon is immediately removed from favorites
- The star becomes an outline again
Favorites Storage
Favorites are persisted using theIconCacheController:
- Storage location:
favorites_cache.jsonin global storage - Per-workspace: Favorites are tracked separately for each workspace
- Timestamp tracking: Each favorite includes a
dateAddtimestamp - Unlimited storage: No limit on the number of favorites
Favorites are workspace-specific. Icons marked as favorites in one project won’t appear as favorites in other projects.
Recently Used Icons
The extension automatically tracks icons you interact with:Tracking Behavior
An icon is added to recent icons when you:- Click the icon card (copies name to clipboard)
- Open it in the Playground for customization
- Copy its code from the DevTools panel
Recent Icons Limit
You can configure how many recent icons to remember:- Default limit: 20 icons
- Oldest icons are automatically removed when the limit is reached
- Set to
0for unlimited recent icons
Storage and Caching
Recent icons are managed by the cache system:Recent Icons Implementation
Recent Icons Implementation
- Most recent first: New icons appear at the top of the list
- Duplicate prevention: Clicking the same icon moves it to the top instead of duplicating
- Automatic pruning: Oldest icons are removed when limit is exceeded
- Persistent storage: Saved to
recent_cache.jsonin global storage
Icon Card Actions
Each icon card provides several quick actions:Primary Click Action
When you click an icon card:- Copies the component name to your clipboard
- Opens the DevTools panel with the icon selected
- Adds to recent icons automatically
- Shows success notification confirming the copy
Context Menu Actions
Right-click any icon for additional options:- Copy Component Name - Copy just the name
- Copy Component Code - Copy the full component code
- Add/Remove Favorite - Toggle favorite status
- Download as SVG - Export to SVG file
- Download as PNG - Export to PNG image
- Open in Editor - Jump to source file location
Component Organization
Icons are automatically organized in the interface:Grouping Options
-
By File (Dashboard view)
- Icons grouped by their source file
- Shows file path and icon count
- Expandable/collapsible groups
-
By Type (Home view)
- Groups like Favorites, Recent, All Icons
- Organized by usage patterns
- Quick access to important collections
Accordion Interface
Component groups use an accordion layout:- Refresh - Re-scan the files in this group
- Go to File - Open the source file(s)
- Expand/Collapse - Toggle group visibility
Search and Filter
Quickly find icons in large collections:Search Bar
Available in the Dashboard view:- Real-time filtering as you type
- Searches component names across all groups
- Case-insensitive matching
- Highlights matching results
Filter Options
Filter components by:- Favorites only - Show only favorited icons
- Recent only - Show only recently used icons
- By file type - Filter by
.js,.jsx,.ts,.tsx - By animation - Show animated vs static icons
Search and filter features work together - you can combine text search with filters for precise results.
Bulk Operations
Perform actions on multiple icons:Selection
- Click + Ctrl/Cmd - Multi-select icons
- Shift + Click - Range selection
- Select All - Via keyboard shortcut or menu
Batch Actions
With multiple icons selected:- Add all to Favorites
- Remove all from Favorites
- Download all as ZIP
- Copy all names
Future Enhancements
Future Enhancements
Planned features for icon management:
- Custom collections/tags
- Color-coded categories
- Usage statistics
- Duplicate detection
- Icon comparison view
Cache Management
The extension manages several caches for icon data:Cache Types
-
Favorites Cache
- File:
favorites_cache.json - Type:
IconCacheControllerwithFAVORITEkind - Unlimited size
- File:
-
Recent Cache
- File:
recent_cache.json - Type:
IconCacheControllerwithRECENTkind - Limited by
recentIconsLimitsetting
- File:
-
Components Cache
- File:
components_cache.json - Stores all discovered components
- Invalidated when files are modified
- File:
Clearing Caches
To clear all caches:- Open Command Palette (
Ctrl+Shift+P) - Run “View Exports SVG: Clear Cache”
- All cached data is removed
- Next scan will rebuild the cache
Icon Metadata
Each icon stores comprehensive metadata:Temporary Files
Uploaded or dropped files are marked as temporary:location.file.isTemporary = true- Cannot be added to favorites
- Don’t support “Open in Editor”
- Removed when webview is closed
Temporary files have limited management features since they’re not part of your workspace. They’re useful for quick previews and testing.
Best Practices
Organizing Large Icon Libraries
- Use Favorites for your top 10-20 most-used icons
- Rely on Recent for context-specific work
- Use Search to find icons by name
- Keep files organized in logical folders in your codebase
Performance Tips
- Don’t mark too many icons as favorites (slows initial load)
- Adjust recent limit based on your workflow
- Clear cache periodically if working with large libraries
- Use search instead of scrolling through long lists
Workflow Integration
- Scan workspace when starting a project
- Favorite the icons you’ll use regularly
- Click icons to copy names for quick use
- Use Playground for customization before copying code
- Track Recent to maintain context during development