Quick Copy Actions
The fastest way to use icons in your code is through the clipboard copy features.Copy Component Name
Copy just the component name to your clipboard:
This copies the raw component name (e.g.,
IconArrowRight) to your clipboard.
Copy Code Snippet
Copy a ready-to-use JSX/TSX code snippet:
This copies the component as JSX (e.g.,
<IconArrowRight />) directly to your clipboard.
After copying, you’ll see a success notification: “Copied [ComponentName] to clipboard”
Exporting SVG Files
Download your icons as standalone SVG files for use in design tools or other projects.Download as SVG
The SVG file downloads with the component name (e.g.,
IconArrowRight.svg).
Copy SVG Markup
Copy the raw SVG XML to your clipboard:- Right-click the icon in the playground
- Select “Copy as SVG”
- The complete SVG markup is copied, including your customizations
Example SVG Output
Example SVG Output
Exporting PNG Files
Convert SVG icons to raster PNG format for use in applications that don’t support vector graphics.Download as PNG
The extension:
- Serializes the current SVG
- Creates a blob URL
- Renders the SVG to an HTML image element
- Draws the image to a canvas
- Converts the canvas to PNG
- Triggers the download
PNG exports preserve all customizations made in the playground, including colors, size, stroke width, etc.
Copy as PNG
Copy a PNG image directly to your clipboard:- Select an icon in the playground
- Right-click and choose “Copy as PNG”
- The PNG image is copied to your system clipboard
- Paste directly into design tools, chat applications, or documents
Editor Integration
Jump directly to the source code of any icon component.Open Source File
This action:
- Opens the source file containing the component
- Positions the cursor at the component’s start location
- Focuses the editor on that file
The extension uses the component’s location data (
location.file and location.start) to navigate to the exact line where the component is defined.Available Actions Menu
All copy and export actions are available through the context menu:| Action | Shortcut | Description |
|---|---|---|
| Copy Name | - | Copies component name only |
| Copy Code Snippet | - | Copies JSX fragment <ComponentName /> |
| Copy as SVG | - | Copies raw SVG markup |
| Copy as PNG | - | Copies PNG image to clipboard |
| Download as SVG | - | Saves SVG file |
| Download as PNG | - | Saves PNG file |
| Open in Editor | - | Opens source file at component location |
Context Menu Structure
The context menu is organized into logical sections:Clipboard Integration
The extension uses the modern Clipboard API for all copy operations:Text Clipboard
For component names, snippets, and SVG markup:Image Clipboard
For PNG images:All clipboard operations include error handling and show success/error notifications in the VS Code UI.
Error Handling
The extension provides feedback for all operations:- Success: Green notification showing what was copied/downloaded
- Errors: Red notification with error details
- Console Logs: Detailed error information in the developer console
Performance Considerations
SVG Operations
- Instant - no conversion required
- Minimal memory usage
- Works offline
PNG Operations
- Requires canvas rendering
- Memory usage depends on icon size
- May take a moment for complex/large icons
Keyboard Shortcuts
While there are no built-in keyboard shortcuts for copy/export actions, you can:- Open VS Code keyboard shortcuts (
Ctrl+K Ctrl+S) - Search for “View Exports SVG”
- Assign custom keybindings to frequently used commands
Next Steps
Customize Properties
Learn how to adjust icon appearance
Configuration
Explore all extension settings