VSCode Extension
The SVGFusion VSCode extension brings the power of SVG-to-component conversion directly into your development workflow. Convert SVG files to React and Vue components without leaving your editor.
Installation
Install the extension from the Visual Studio Marketplace:
- Via VS Code Marketplace: Search for "SVGFusion" in the Extensions view (
Cmd+Shift+X
) - Via Command Line:
code --install-extension lolvoid.svgfusion-vscode
- Manual Install: Download the
.vsix
file and install viaExtensions: Install from VSIX...
Quick Start
- Open a project containing SVG files
- Right-click any SVG file in the Explorer
- Select "Convert to Component"
- Choose your options and generate your component!
Features
SVG to Component Conversion
Convert individual SVG files to React or Vue components with full customization options:
- Framework Selection: React or Vue (auto-detected from your project)
- Language Support: TypeScript and JavaScript
- Component Naming: Smart conversion from file names to component names
- Output Directory: Configurable output location
Batch Processing
Convert multiple SVG files at once:
- Open Command Palette (
Cmd+Shift+P
) - Run "SVGFusion: Batch Convert SVGs"
- Select multiple files and conversion options
- Track progress with detailed reporting
Interactive Playground
Test conversions in real-time:
- Open Command Palette (
Cmd+Shift+P
) - Run "SVGFusion: Open Playground"
- Paste SVG code and experiment with options
- Copy generated component code
SVG Preview
Preview SVG files with different configurations:
- Right-click an SVG file
- Select "Preview Component"
- View with different sizes and backgrounds
Smart Features
Framework Detection
Automatically detects your project framework by analyzing:
package.json
dependencies- Configuration files (
next.config.js
,vue.config.js
) - File extensions (
.jsx
,.tsx
,.vue
)
Hover Information
Hover over SVG files to see:
- File dimensions and size
- Quick conversion actions
- SVG structure overview
Tree View
Dedicated SVG explorer in the sidebar showing all SVG files in your workspace.
Configuration
Configure SVGFusion through VS Code settings (Cmd/Ctrl + ,
, search "SVGFusion"):
{
"svgfusion.framework": "auto",
"svgfusion.typescript": true,
"svgfusion.outputDirectory": "./src/components/icons",
"svgfusion.react.memo": false,
"svgfusion.react.forwardRef": false,
"svgfusion.vue.sfc": true,
"svgfusion.vue.scriptSetup": true,
"svgfusion.transformation.splitColors": true,
"svgfusion.transformation.splitStrokeWidths": false,
"svgfusion.transformation.optimize": true
}
Configuration Options
Setting | Type | Default | Description |
---|---|---|---|
framework | "react" | "vue" | "auto" | "auto" | Target framework for conversion |
typescript | boolean | true | Generate TypeScript components |
outputDirectory | string | "./src/components/icons" | Output directory for components |
react.memo | boolean | false | Wrap React components with React.memo |
react.forwardRef | boolean | false | Add forwardRef to React components |
vue.sfc | boolean | true | Generate Vue Single File Components |
vue.scriptSetup | boolean | true | Use <script setup> syntax |
transformation.splitColors | boolean | true | Extract colors as props |
transformation.splitStrokeWidths | boolean | false | Extract stroke widths as props |
transformation.optimize | boolean | true | Optimize SVG before conversion |
Commands
All commands are available through the Command Palette (Cmd+Shift+P
):
Command | Description | Keyboard Shortcut |
---|---|---|
SVGFusion: Convert to Component | Convert selected SVG file | Cmd+Shift+S (when SVG file is active) |
SVGFusion: Batch Convert SVGs | Convert multiple SVG files | - |
SVGFusion: Open Playground | Open interactive playground | Cmd+Shift+G |
SVGFusion: Preview Component | Preview SVG with different options | - |
Context Menus
Right-click any SVG file to access:
- Convert to Component - Quick conversion with options
- Preview Component - Preview with different configurations
Generated Components
React Example
import React from 'react';
interface StarIconProps {
color?: string;
size?: number;
className?: string;
}
const StarIcon: React.FC<StarIconProps> = ({
color = 'currentColor',
size = 24,
className,
}) => (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
className={className}
>
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
fill={color}
/>
</svg>
);
export default StarIcon;
Vue Example
<template>
<svg
:width="size"
:height="size"
viewBox="0 0 24 24"
fill="none"
:class="className"
>
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
:fill="color"
/>
</svg>
</template>
<script setup lang="ts">
interface Props {
color?: string;
size?: number;
className?: string;
}
withDefaults(defineProps<Props>(), {
color: 'currentColor',
size: 24,
});
</script>
Framework-Specific Features
React
- TypeScript Support: Full type definitions with prop interfaces
- React.memo: Optional performance optimization
- forwardRef: Add ref forwarding support
- JSX/TSX: Proper file extensions
Vue
- Single File Components: Generate
.vue
files - Script Setup: Modern
<script setup>
syntax support - TypeScript: Full type support with proper prop definitions
- Composition API: Modern Vue 3 patterns
Tips & Best Practices
Organizing SVG Files
src/
├── assets/
│ └── icons/ # Source SVG files
│ ├── arrow.svg
│ ├── user.svg
│ └── star.svg
└── components/
└── icons/ # Generated components
├── ArrowIcon.tsx
├── UserIcon.tsx
└── StarIcon.tsx
Naming Conventions
SVGFusion automatically converts file names to proper component names:
arrow-left.svg
→ArrowLeftIcon
user_profile.svg
→UserProfileIcon
star.svg
→StarIcon
Performance Optimization
- Enable React.memo for frequently re-rendered components
- Use color splitting to make icons themeable
- Keep SVGs optimized (the extension does this automatically)
Troubleshooting
Extension Not Working
- Check that SVG files have
.svg
extension - Ensure workspace contains a
package.json
file - Check Output panel for error messages
Framework Detection Issues
- Ensure
package.json
includes framework dependencies - Add configuration files (
next.config.js
,vue.config.js
) - Manually set framework in settings if auto-detection fails
Conversion Errors
- Validate SVG syntax
- Check Output panel for detailed error messages
- Try the playground to isolate issues
- Ensure output directory exists and is writable
Support
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Documentation: SVGFusion Docs
Related Tools
- SVGFusion CLI - Command-line interface
- Browser API - Client-side conversion
- Node.js API - Server-side conversion