svgfusion 1.13.0 → 1.15.0

package/README.md

@@ -12,22 +12,17 @@ A powerful Node.js CLI tool and library that converts SVG files into optimized R
 [![React](https://img.shields.io/badge/React-20232A?style=flat&logo=react&logoColor=61DAFB)](https://reactjs.org/)
 [![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=flat&logo=vue.js&logoColor=4FC08D)](https://vuejs.org/)
 
-[📚 Documentation](https://svgfusion.netlify.app) • [⚡ CLI Reference](https://svgfusion.netlify.app/docs/cli-usage) • [📦 NPM](https://www.npmjs.com/package/svgfusion)
+[Documentation](https://svgfusion.netlify.app) • [CLI Reference](https://svgfusion.netlify.app/docs/cli-usage) • [NPM](https://www.npmjs.com/package/svgfusion) • **[Try Interactive Playground →](https://svgfusion.netlify.app/playground)**
 
 </div>
 
-## What's New in v1.12.0
-
-- **Enhanced Color Splitting**: Smart color extraction with intelligent fill/stroke="none" handling
-- **Improved CLI**: Streamlined command structure with better option handling
-- **Native SVG Props**: Full React.SVGProps and Vue SVGAttributes support
-- **Enhanced Type Safety**: Better TypeScript integration and type inference
-- **SVGFusion Engine**: Built-in SVG parser with reliable transformations
-- **Better Control**: Fine-grained control over SVG transformations and output
-
 ## Features
 
-**Native SVG Props**: Generated components extend React.SVGProps<SVGSVGElement> and Vue SVGAttributes
+**Stroke Width Splitting**: Extract and convert stroke widths to props for responsive design
+**Browser API**: Use SVGFusion directly in the browser with full feature support
+**Smart Component Naming**: Automatic prefix/suffix handling with proper PascalCase conversion
+**Advanced Color Splitting**: Intelligent color extraction with fill/stroke optimization
+**Native SVG Props**: Generated components extend React.SVGProps\<SVGSVGElement\> and Vue SVGAttributes
 **React & Vue Support**: Generate both React and Vue 3 components from the same SVG
 **Complex SVG Support**: Handles gradients, masks, filters, patterns, and Figma exports
 **TypeScript Ready**: Full TypeScript support with proper type definitions
@@ -35,6 +30,16 @@ A powerful Node.js CLI tool and library that converts SVG files into optimized R
 **Production Ready**: Optimized output, error handling, and accessibility
 **Simple CLI**: Direct, intuitive command structure
 
+### Stroke Width Splitting
+
+Extract stroke widths from SVG elements and convert them to component props for responsive designs:
+
+```jsx
+// Original SVG: <path stroke-width="2" d="..."/>
+// Generated React component:
+<MyIcon strokeWidth1={4} /> // Scales the stroke width
+```
+
 ### Color Splitting (splitColors)
 
 Extracts all unique fill, stroke, and gradient colors from your SVG and generates props for each color and color class. Automatically adds `fill="none"` or `stroke="none"` to prevent unwanted browser defaults:
@@ -44,6 +49,14 @@ Extracts all unique fill, stroke, and gradient colors from your SVG and generate
 - Path with both → keeps both as props
 - Path with neither → stays unchanged
 
+## Try It Live
+
+**Experience SVGFusion instantly in your browser!**
+
+[**Launch Interactive Playground →**](https://svgfusion.dev/playground)
+
+Upload your SVG files, experiment with different options, and see the generated React/Vue components in real-time. No installation required!
+
 ## Quick Start
 
 ### Simple as One Command
@@ -162,8 +175,8 @@ Options:
   -h, --help                   Show help
 ```
 
---prefix <prefix> Add prefix to component name (sanitized)
---suffix <suffix> Add suffix to component name (sanitized)
+--prefix `<prefix>` Add prefix to component name (sanitized)
+--suffix `<suffix>` Add suffix to component name (sanitized)
 --split-colors Extract individual color props for each SVG color
 --fixed-stroke-width Add support for non-scaling stroke width
 -h, --help Show help
@@ -580,3 +593,48 @@ Contributions are welcome! Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for
 ## Changelog
 
 See [CHANGELOG.md](./CHANGELOG.md) for details.
+
+### Browser Usage (New!)
+
+SVGFusion now supports browser environments! Convert SVG strings to component code without writing files.
+
+**Try the Interactive Playground**: [svgfusion.netlify.app/playground](https://svgfusion.netlify.app/playground)
+
+```javascript
+import { convertToReact, convertToVue } from 'svgfusion/browser';
+
+const svgContent = `<svg viewBox="0 0 24 24"><path fill="#3B82F6" d="..."/></svg>`;
+
+// Convert to React component string
+const reactResult = await convertToReact(svgContent, {
+  componentName: 'MyIcon',
+  typescript: true,
+  splitColors: true,
+});
+
+console.log(reactResult.code); // Generated React component code
+
+// Convert to Vue component string
+const vueResult = await convertToVue(svgContent, {
+  componentName: 'MyIcon',
+  typescript: true,
+  sfc: true,
+});
+
+console.log(vueResult.code); // Generated Vue component code
+```
+
+**Browser Features:**
+
+- All conversion features (color splitting, stroke fixing, etc.)
+- React and Vue component generation
+- TypeScript support
+- Batch conversion
+- Color extraction and validation
+- Index file generation
+- Works in all modern browsers
+- **Interactive Playground** with Monaco Editor
+
+[Complete Browser API Documentation](./docs/browser-api.md)
+
+### Node.js Usage

package/dist/browser.d.mts

@@ -0,0 +1,223 @@
+/**
+ * Core transformation engine for SVG processing
+ * Handles optimization, color manipulation, and feature application
+ */
+
+interface TransformationOptions {
+    optimize?: boolean;
+    splitColors?: boolean;
+    splitStrokeWidths?: boolean;
+    fixedStrokeWidth?: boolean;
+    accessibility?: boolean;
+    removeComments?: boolean;
+    removeDuplicates?: boolean;
+    minifyPaths?: boolean;
+}
+
+/**
+ * Abstract component generator base class
+ * Provides common functionality for all component generators
+ */
+
+interface GeneratorOptions {
+    typescript?: boolean;
+    memo?: boolean;
+    forwardRef?: boolean;
+    exportDefault?: boolean;
+    componentName?: string;
+    prefix?: string;
+    suffix?: string;
+    includeTypes?: boolean;
+}
+
+/**
+ * React component generator
+ * Generates production-ready React components with TypeScript support
+ */
+
+interface ReactGeneratorOptions extends GeneratorOptions {
+    memo?: boolean;
+    forwardRef?: boolean;
+    propTypes?: boolean;
+    defaultProps?: boolean;
+    namedExport?: boolean;
+}
+
+/**
+ * Vue component generator
+ * Generates production-ready Vue 3 components with TypeScript support
+ */
+
+interface VueGeneratorOptions extends GeneratorOptions {
+    composition?: boolean;
+    scriptSetup?: boolean;
+    sfc?: boolean;
+    defineComponent?: boolean;
+}
+
+/**
+ * Main SVGFusion engine
+ * Orchestrates parsing, transformation, and code generation
+ */
+
+interface SVGFusionOptions {
+    framework: 'react' | 'vue';
+    transformation?: TransformationOptions;
+    generator?: ReactGeneratorOptions | VueGeneratorOptions;
+}
+interface ConversionResult {
+    code: string;
+    filename: string;
+    componentName: string;
+    dependencies: string[];
+    metadata: {
+        originalColors: string[];
+        originalStrokeWidths: string[];
+        optimizationApplied: boolean;
+        features: string[];
+    };
+}
+/**
+ * Main SVGFusion engine
+ */
+declare class SVGFusion {
+    private parser;
+    private transformer;
+    constructor();
+    /**
+     * Convert SVG content to component code
+     */
+    convert(svgContent: string, options: SVGFusionOptions): Promise<ConversionResult>;
+    /**
+     * Extract colors from SVG for preview/analysis
+     */
+    extractColors(svgContent: string): string[];
+    /**
+     * Validate SVG content
+     */
+    validate(svgContent: string): {
+        valid: boolean;
+        errors: string[];
+    };
+}
+
+declare const pascalCase: (str: string) => string;
+
+/**
+ * Convert SVG filename to a valid React component name
+ * @param filename - The SVG filename
+ * @returns PascalCase component name
+ */
+declare function svgToComponentName(filename: string, prefix?: string, suffix?: string): string;
+declare function svgToComponentName(filename: string): string;
+/**
+ * Sanitize component name to ensure it's valid
+ * @param name - The component name to sanitize
+ * @param type - The type of component part: 'main', 'prefix', or 'suffix'
+ * @returns Sanitized component name
+ */
+declare function sanitizeComponentName(name: string, type?: 'main' | 'prefix' | 'suffix'): string;
+
+/**
+ * Add prefix/suffix to component name with automatic hyphen separators
+ * @param name - Base component name
+ * @param prefix - Optional prefix (hyphen will be added after)
+ * @param suffix - Optional suffix (hyphen will be added before)
+ * @returns Component name with prefix/suffix in proper PascalCase
+ */
+declare function formatComponentName(name: string, prefix?: string, suffix?: string): string;
+
+/**
+ * Browser-compatible SVGFusion API
+ * Returns converted component strings instead of writing to files
+ */
+
+interface BrowserConversionOptions {
+    framework: 'react' | 'vue';
+    typescript?: boolean;
+    componentName?: string;
+    prefix?: string;
+    suffix?: string;
+    splitColors?: boolean;
+    splitStrokeWidths?: boolean;
+    fixedStrokeWidth?: boolean;
+    memo?: boolean;
+    forwardRef?: boolean;
+    sfc?: boolean;
+    scriptSetup?: boolean;
+    optimize?: boolean;
+}
+interface BrowserConversionResult {
+    code: string;
+    componentName: string;
+    filename: string;
+    framework: 'react' | 'vue';
+    typescript: boolean;
+    metadata: {
+        originalColors: string[];
+        optimizationApplied: boolean;
+        features: string[];
+    };
+    dependencies: string[];
+}
+/**
+ * Browser-compatible SVGFusion class
+ */
+declare class SVGFusionBrowser {
+    private engine;
+    constructor();
+    /**
+     * Convert SVG content to component string (browser-compatible)
+     */
+    convert(svgContent: string, options: BrowserConversionOptions): Promise<BrowserConversionResult>;
+    /**
+     * Extract colors from SVG (browser-compatible)
+     */
+    extractColors(svgContent: string): string[];
+    /**
+     * Validate SVG content - focused on XML structure validation only
+     */
+    validate(svgContent: string): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Basic XML structure validation for critical malformed cases
+     */
+    private validateXMLStructure;
+    /**
+     * Fallback validation using regex patterns (for Node.js environment)
+     */
+    private validateWithRegex;
+    /**
+     * Convert multiple SVG contents to components (browser-compatible)
+     */
+    convertBatch(svgContents: Array<{
+        content: string;
+        name: string;
+    }>, options: BrowserConversionOptions): Promise<BrowserConversionResult[]>;
+    /**
+     * Generate index file content for multiple components (browser-compatible)
+     */
+    generateIndexFile(results: BrowserConversionResult[], options?: {
+        exportType?: 'named' | 'default';
+        typescript?: boolean;
+    }): string;
+    /**
+     * Get import path from filename
+     */
+    private getImportPath;
+}
+declare function convertToReact(svgContent: string, options?: Omit<BrowserConversionOptions, 'framework'>): Promise<BrowserConversionResult>;
+declare function convertToVue(svgContent: string, options?: Omit<BrowserConversionOptions, 'framework'>): Promise<BrowserConversionResult>;
+declare function convertBatch(svgContents: Array<{
+    content: string;
+    name: string;
+}>, options: BrowserConversionOptions): Promise<BrowserConversionResult[]>;
+declare function extractColors(svgContent: string): string[];
+declare function validateSvg(svgContent: string): {
+    valid: boolean;
+    errors: string[];
+};
+
+export { type BrowserConversionOptions, type BrowserConversionResult, type ConversionResult, type ReactGeneratorOptions, SVGFusion, SVGFusionBrowser, type SVGFusionOptions, type VueGeneratorOptions, convertBatch, convertToReact, convertToVue, extractColors, formatComponentName, pascalCase, sanitizeComponentName, svgToComponentName, validateSvg };