SVGFusion Browser

🌐 Browser-optimized package for converting SVG files into React and Vue 3 components with TypeScript support and native SVG props inheritance.

Installation

``bash
npm install svgfusion-dom


or

`html

`

Quick Start

`javascript
import { convertToReact } from 'svgfusion-dom';

// Convert SVG to React component
const svgContent = ;
const reactComponent = await convertToReact(svgContent, {
typescript: true,
});

console.log(reactComponent.code); // Generated component code
`

TypeScript Usage

`typescript
import {
convertToReact,
convertToVue,
type BrowserConversionOptions,
type BrowserConversionResult,
} from 'svgfusion-dom';

// Type-safe React conversion
const reactOptions: BrowserConversionOptions = {
framework: 'react',
typescript: true,
componentName: 'MyIcon',
memo: true,
forwardRef: true,
};

const reactResult: BrowserConversionResult = await convertToReact(
svgContent,
reactOptions
);

// Type-safe Vue conversion
const vueResult: BrowserConversionResult = await convertToVue(svgContent, {
typescript: true,
sfc: true,
scriptSetup: true,
});
`

$3

`typescript
// Core types
type BrowserConversionOptions
type BrowserConversionResult
type SVGFusionOptions
type ConversionResult

// Framework-specific
type ReactGeneratorOptions
type VueGeneratorOptions

// Functions
convertToReact, convertToVue, convertBatch
extractColors, validateSvg
SVGFusionBrowser
`

Features

- Browser Native - Works directly in the browser without Node.js
- Lightweight - Optimized bundle size for web applications
- Framework Support - React and Vue 3 components
- TypeScript Ready - Generate components with full type support
- Real-time Conversion - Perfect for online editors and playgrounds
- Zero Dependencies - Standalone browser library
- Customizable - Extensive configuration options

Usage

$3

`javascript
import { convertToReact, convertToVue } from 'svgfusion-dom';

// React component
const reactResult = await convertToReact(svgContent, {
typescript: true,
componentName: 'MyIcon',
});

// Vue component
const vueResult = await convertToVue(svgContent, {
typescript: true,
componentName: 'MyIcon',
sfc: true,
scriptSetup: true,
//

const svgContent =



;
`

$3

`javascript
import { convertToReact } from 'svgfusion-dom';

const reactResult = await convertToReact(svgContent, {
typescript: true,
componentName: 'HomeIcon',
memo: true,
forwardRef: true,
});

console.log(reactResult.code); // Complete React component with TypeScript
`

$3

`javascript
import { convertToVue } from 'svgfusion-dom';

const vueResult = await convertToVue(svgContent, {
typescript: true,
componentName: 'HomeIcon',
sfc: true,
scriptSetup: true,
});

console.log(vueResult.code); // Complete Vue 3 component with Composition API
`

$3

`javascript
import { convertBatch } from 'svgfusion-dom';

const svgFiles = [
{ name: 'home', content: '' },
{ name: 'user', content: '' },
{ name: 'settings', content: '' },
];

const components = await convertBatch(svgFiles, {
framework: 'react',
typescript: true,
});

// Returns: Array of generated components
`

API Reference

$3

Converts SVG to React component.

Parameters:

- svgContent (string): The SVG content to convert
- options (BrowserConversionOptions): Conversion options

Returns: Promise

$3

Converts SVG to Vue component.

Parameters:

- svgContent (string): The SVG content to convert
- options (BrowserConversionOptions): Conversion options

Returns: Promise

$3

Converts multiple SVG files to components.

Parameters:

- svgContents (Array): Array of { content: string, name: string } objects
- options (BrowserConversionOptions): Conversion options

Returns: Promise

$3

Extracts unique colors from SVG content.

Returns: string[]

$3

Validates SVG content structure.

Returns: { valid: boolean, errors: string[] }

$3

`typescript
interface BrowserConversionOptions {
framework: 'react' | 'vue';
typescript?: boolean;
componentName?: string;
prefix?: string;
suffix?: string;
splitColors?: boolean;
splitStrokeWidths?: boolean;
fixedStrokeWidth?: boolean;
normalizeFillStroke?: boolean;
memo?: boolean; // React only
forwardRef?: boolean; // React only
sfc?: boolean; // Vue only
scriptSetup?: boolean; // Vue only
optimize?: boolean;
}
`

Browser Integration Examples

$3

`html







Convert to React





`

$3

`jsx
import { convertSvg } from 'svgfusion-dom';
import { useState } from 'react';

function SvgConverter() {
const [svgInput, setSvgInput] = useState('');
const [output, setOutput] = useState('');

const handleConvert = () => {
const result = convertSvg(svgInput, {
framework: 'react',
typescript: true,
componentName: 'GeneratedIcon',
});
setOutput(result);
};

return (


{output}

`vue