SVGFusion VSCode Extension
Convert SVG files to React and Vue components with ease, directly from your VSCode editor.
Features
SVG to Component Conversion
- Convert individual SVG files to React or Vue components
- Supports both TypeScript and JavaScript output
- Automatic framework detection from your project
Batch Processing
- Convert multiple SVG files at once
- Progress tracking with detailed error reporting
- Smart file selection with preview
🎮 Interactive Playground
- Built-in playground for testing conversions
- Real-time preview of generated components
- Experiment with different options
SVG Preview
- Preview SVG files with different sizes and backgrounds
- View source code and file information
- Quick access to conversion actions
Smart Configuration
- Auto-detects React/Vue projects
- Customizable output directories
- Framework-specific options (memo, forwardRef, SFC, script setup)
Quick Start
- Install the extension
- Open a project containing SVG files
- Right-click any SVG file and select "Convert to Component"
- Choose your options and let SVGFusion do the rest!
Usage
Convert Single SVG
- Right-click on an SVG file in the Explorer
- Select "Convert to Component"
- Choose framework, language, and component name
- The component will be created in your configured output directory
Batch Convert SVGs
- Open Command Palette (
Cmd+Shift+P
)
- Run "SVGFusion: Batch Convert SVGs"
- Select files to convert
- Choose conversion options
Interactive Playground
- Open Command Palette (
Cmd+Shift+P
)
- Run "SVGFusion: Open Playground"
- Paste your SVG code and experiment with options
Preview SVG
- Right-click on an SVG file
- Select "Preview Component"
- View with different sizes and backgrounds
Keyboard Shortcuts
Cmd+Shift+S
(Mac) / Ctrl+Shift+S
(Windows/Linux) - Convert SVG (when SVG file is active)
Cmd+Shift+P
(Mac) / Ctrl+Shift+P
(Windows/Linux) - Open Playground
Configuration
Configure SVGFusion through VSCode settings:
{
"svgfusion.framework": "auto", // "react" | "vue" | "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
}
Features in Detail
Automatic Framework Detection
SVGFusion automatically detects whether you're working on a React or Vue project by analyzing:
package.json
dependencies
- Configuration files (
next.config.js
, vue.config.js
, etc.)
- File extensions (
.jsx
, .tsx
, .vue
)
Smart Component Naming
- Converts kebab-case and snake_case to PascalCase
- Validates component names follow conventions
- Suggests appropriate names based on file names
- Split Colors: Extract colors as props for easy theming
- Split Stroke Widths: Extract stroke widths as props
- Optimization: Automatically optimize SVG before conversion
- TypeScript: Generate type-safe components
Framework-Specific Features
React
- React.memo: Wrap components for performance optimization
- forwardRef: Add ref forwarding support
- TypeScript: Full type support with proper prop interfaces
Vue
- Single File Components: Generate
.vue
files
- Script Setup: Use modern
<script setup>
syntax
- TypeScript: Full type support with proper prop definitions
Examples
Generated React Component
import React from 'react';
interface MyIconProps {
color?: string;
size?: number;
className?: string;
}
const MyIcon: React.FC<MyIconProps> = ({
color = 'currentColor',
size = 24,
className,
}) => (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
className={className}
>
<path d="..." fill={color} />
</svg>
);
export default MyIcon;
Generated Vue Component
<template>
<svg
:width="size"
:height="size"
viewBox="0 0 24 24"
fill="none"
:class="className"
>
<path d="..." :fill="color" />
</svg>
</template>
<script setup lang="ts">
interface Props {
color?: string;
size?: number;
className?: string;
}
withDefaults(defineProps<Props>(), {
color: 'currentColor',
size: 24,
});
</script>
Troubleshooting
Extension Not Working
- Check that you have SVG files in your workspace
- Ensure you're using supported file extensions (
.svg
)
- Check the Output panel for error messages
Framework Detection Issues
- Ensure your
package.json
includes framework dependencies
- Check that configuration files are present
- Manually set the framework in settings if auto-detection fails
Conversion Errors
- Validate that your SVG syntax is correct
- Check the Output panel for detailed error messages
- Try using the playground to isolate the issue
Contributing
Found a bug or have a feature request? Visit our GitHub repository to:
- Report issues
- Request features
- Contribute code
- Review documentation
Links
Enjoy using SVGFusion! 🎉