SVGFusion

Convert SVG files into React and Vue 3 components

Documentation • CLI Reference • Interactive Playground

What's Included

This package includes everything you need for SVG to component conversion:

• CLI Tool - Convert SVG files from command line
• Node.js API - Programmatic conversion in Node.js
• Module API - Browser-compatible module for web apps
• React & Vue Support - Generate components for both frameworks
• TypeScript Ready - Full TypeScript support with proper types

Installation

npm install svgfusion

Quick Start

CLI Usage

# Clone the repository
git clone https://github.com/lolvOid/svgfusion
cd svgfusion
pnpm install

# Build first (required)
pnpm build

# Use the CLI
pnpm svgfusion icon.svg --framework react --output ./components
pnpm svgfusion ./icons --framework vue --typescript --output ./components

Module Usage (Browser/Web Apps)

import { convertToReact, convertToVue } from 'svgfusion/browser';

const svgCode = `<svg viewBox="0 0 24 24"><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"/></svg>`;

// React component
const reactResult = await convertToReact(svgCode, {
  componentName: 'StarIcon',
  typescript: true,
  splitColors: true,
});

// Vue component
const vueResult = await convertToVue(svgCode, {
  componentName: 'StarIcon',
  typescript: true,
  splitColors: true,
});

Node.js API

import { SVGFusion } from 'svgfusion';

const engine = new SVGFusion();
const result = await engine.convert(svgContent, {
  framework: 'react',
  transformation: { splitColors: true },
  generator: { typescript: true, componentName: 'MyIcon' },
});

Documentation

For complete guides, API reference, and examples visit svgfusion.netlify.app

License

MIT