svgfusion 1.22.0 → 1.24.0

package/README.md

@@ -3,9 +3,9 @@
 
 # SVGFusion
 
-**Transform SVG files into production-ready React and Vue 3 components**
+**SVGs to React & Vue 3 Components**
 
-A powerful Node.js CLI tool and library that converts SVG files into optimized React and Vue components with native SVG props inheritance, TypeScript integration, and smart optimization for modern development workflows.
+Convert SVG files into blazing-fast React and Vue 3 components with automatic color extraction, full TypeScript support, and seamless integration into any modern workflow.
 
 [![npm version](https://img.shields.io/npm/v/svgfusion)](https://www.npmjs.com/package/svgfusion)
 [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
@@ -18,42 +18,22 @@ A powerful Node.js CLI tool and library that converts SVG files into optimized R
 
 ## Features
 
-**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
-**Batch Processing**: Convert entire directories of SVG files
-**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:
-
-- Path with only fill → gets `stroke="none"`
-- Path with only stroke → gets `fill="none"`
-- Path with both → keeps both as props
-- Path with neither → stays unchanged
+- **Advanced Transformations**: Comprehensive transformation options including color splitting, stroke width extraction, fixed stroke width, and fill/stroke normalization
+- **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
+- **Batch Processing**: Convert entire directories of SVG files
+- **Production Ready**: Optimized output, error handling, and accessibility
+- **Simple CLI**: Direct, intuitive command structure
 
 ## Try It Live
 
-**Experience SVGFusion instantly in your browser!**
-
-[**Launch Interactive Playground →**](https://svgfusion.dev/playground)
+**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!
 
@@ -68,7 +48,7 @@ npx svgfusion ./icons --output ./components
 # Add prefixes, suffixes, and generate index file
 npx svgfusion ./icons --prefix Icon --suffix Component --index
 
-# Advanced: Split colors for Tailwind CSS with fixed stroke width
+# Advanced: Split colors for Custom CSS Class with fixed stroke width
 npx svgfusion ./icons --split-colors --fixed-stroke-width --prefix Icon
 ```
 
@@ -203,7 +183,7 @@ npx svgfusion ./assets/icons --output ./src/components --recursive --index
 # Convert with custom naming
 npx svgfusion ./assets/icons --output ./src/components --prefix Icon --suffix Component --index
 
-# Advanced: Split colors for Tailwind CSS compatibility
+# Advanced: Split colors for Custom CSS Class compatibility
 npx svgfusion ./assets/icons --output ./src/components --split-colors --prefix Icon
 
 # Advanced: Fixed stroke width with split colors
@@ -409,9 +389,31 @@ const result = await convertToReact(svgContent, {
 - Empty attribute values (`fill=""`) are treated as non-existent
 ````
 
-### Fixed Stroke Width Support
+### Transformation Options
 
-The `isFixedStrokeWidth` option adds support for non-scaling stroke width:
+SVGFusion provides comprehensive transformation capabilities through the transformation options API:
+
+```typescript
+const result = await engine.convert(svgContent, {
+  framework: 'react',
+  transformation: {
+    splitColors: true, // Extract color props
+    splitStrokeWidths: true, // Extract stroke width props
+    fixedStrokeWidth: true, // Non-scaling stroke support
+    normalizeFillStroke: true, // Normalize fill/stroke attributes
+    accessibility: true, // Add accessibility features
+    optimize: true, // Apply SVG optimizations
+    removeComments: true, // Remove XML comments
+    removeDuplicates: true, // Remove duplicate elements
+    minifyPaths: false, // Minify path data
+  },
+  generator: { componentName: 'MyIcon', typescript: true },
+});
+```
+
+#### Fixed Stroke Width Support
+
+The `fixedStrokeWidth` transformation adds support for non-scaling stroke width:
 
 ```typescript
 const result = await convertToReact(svgContent, {
@@ -424,6 +426,14 @@ const result = await convertToReact(svgContent, {
 // - vector-effect="non-scaling-stroke" when prop is true
 ```
 
+#### Fill/Stroke Normalization
+
+The `normalizeFillStroke` transformation intelligently handles fill and stroke attributes:
+
+- Normalizes attribute values across all SVG elements
+- Ensures consistent color and stroke width application
+- Optimizes attribute inheritance and cascading
+
 ### Custom SVGO Configuration
 
 ```typescript
@@ -635,5 +645,6 @@ console.log(vueResult.code); // Generated Vue component code
 - Works in all modern browsers
 - **Interactive Playground** with Monaco Editor
 
-[Full Browser API Documentation](./docs/docs/browser-api.md)
-[Full Node API Documentation](./docs/docs/node-api.md)
+#### [Browser API Documentation](./docs/docs/browser-api.md)
+
+#### [Node API Documentation](./docs/docs/node-api.md)

package/dist/browser.d.mts

@@ -143,6 +143,7 @@ interface BrowserConversionOptions {
     splitColors?: boolean;
     splitStrokeWidths?: boolean;
     fixedStrokeWidth?: boolean;
+    normalizeFillStroke?: boolean;
     memo?: boolean;
     forwardRef?: boolean;
     sfc?: boolean;