Skip to main content

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:

  1. Via VS Code Marketplace: Search for "SVGFusion" in the Extensions view (Cmd+Shift+X)
  2. Via Command Line: code --install-extension lolvoid.svgfusion-vscode
  3. Manual Install: Download the .vsix file and install via Extensions: Install from VSIX...

Quick Start

  1. Open a project containing SVG files
  2. Right-click any SVG file in the Explorer
  3. Select "Convert to Component"
  4. 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:

  1. Open Command Palette (Cmd+Shift+P)
  2. Run "SVGFusion: Batch Convert SVGs"
  3. Select multiple files and conversion options
  4. Track progress with detailed reporting

Interactive Playground

Test conversions in real-time:

  1. Open Command Palette (Cmd+Shift+P)
  2. Run "SVGFusion: Open Playground"
  3. Paste SVG code and experiment with options
  4. Copy generated component code

SVG Preview

Preview SVG files with different configurations:

  1. Right-click an SVG file
  2. Select "Preview Component"
  3. 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

SettingTypeDefaultDescription
framework"react" | "vue" | "auto""auto"Target framework for conversion
typescriptbooleantrueGenerate TypeScript components
outputDirectorystring"./src/components/icons"Output directory for components
react.memobooleanfalseWrap React components with React.memo
react.forwardRefbooleanfalseAdd forwardRef to React components
vue.sfcbooleantrueGenerate Vue Single File Components
vue.scriptSetupbooleantrueUse <script setup> syntax
transformation.splitColorsbooleantrueExtract colors as props
transformation.splitStrokeWidthsbooleanfalseExtract stroke widths as props
transformation.optimizebooleantrueOptimize SVG before conversion

Commands

All commands are available through the Command Palette (Cmd+Shift+P):

CommandDescriptionKeyboard Shortcut
SVGFusion: Convert to ComponentConvert selected SVG fileCmd+Shift+S (when SVG file is active)
SVGFusion: Batch Convert SVGsConvert multiple SVG files-
SVGFusion: Open PlaygroundOpen interactive playgroundCmd+Shift+G
SVGFusion: Preview ComponentPreview 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.svgArrowLeftIcon
  • user_profile.svgUserProfileIcon
  • star.svgStarIcon

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

  1. Check that SVG files have .svg extension
  2. Ensure workspace contains a package.json file
  3. Check Output panel for error messages

Framework Detection Issues

  1. Ensure package.json includes framework dependencies
  2. Add configuration files (next.config.js, vue.config.js)
  3. Manually set framework in settings if auto-detection fails

Conversion Errors

  1. Validate SVG syntax
  2. Check Output panel for detailed error messages
  3. Try the playground to isolate issues
  4. Ensure output directory exists and is writable

Support