svgfusion 1.6.0 → 1.8.0

package/README.md

@@ -5,7 +5,7 @@
 
 **Transform SVG files into production-ready React and Vue 3 components**
 
-A powerful Node.js CLI tool and library that converts SVG files into optimized React and Vue components with complex SVG support, TypeScript integration, and smart optimization for modern development workflows.
+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.
 
 [![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/)
@@ -16,12 +16,22 @@ A powerful Node.js CLI tool and library that converts SVG files into optimized R
 
 </div>
 
+## What's New in v2.0
+
+- **Custom SVGFusion Engine**: Complete rewrite with custom SVG parser replacing SVGR/SVGO
+- **Native SVG Props**: Full React.SVGProps and Vue SVGAttributes support
+- **Enhanced Type Safety**: Better TypeScript integration and type inference
+- **Improved Performance**: Faster processing with streamlined architecture
+- **Better Control**: Fine-grained control over SVG transformations and output
+
 ## Features
 
+- **Native SVG Props**: Generated components extend React.SVGProps<SVGSVGElement> and Vue SVGAttributes
 - **Dual Framework Support**: Generate both React and Vue 3 components from the same SVG
+- **Custom Engine**: Built-in SVGFusion engine for reliable SVG parsing and transformation
 - **Complex SVG Support**: Handles gradients, masks, filters, patterns, and Figma exports
 - **ID Collision Prevention**: Automatic unique ID generation for complex SVGs
-- **Optimized Output**: Built-in SVGO optimization with customizable settings
+- **Optimized Output**: Smart optimization with customizable settings
 - **Icon Builder Ready**: Perfect for design systems and icon libraries
 - **TypeScript Ready**: Full TypeScript support with proper type definitions
 - **Flexible API**: Both CLI and programmatic usage
@@ -30,6 +40,14 @@ A powerful Node.js CLI tool and library that converts SVG files into optimized R
 - **Zero Configuration**: Works out of the box with sensible defaults
 - **Simple CLI**: Direct, intuitive command structure without subcommands
 
+### Advanced Features
+
+- **Split Colors Mode**: Extract individual color props for maximum Tailwind CSS compatibility
+- **Fixed Stroke Width**: Add `vector-effect="non-scaling-stroke"` support for consistent strokes
+- **Duplicate Detection**: Automatic validation prevents component name conflicts
+- **Gradient Support**: Full support for linearGradient and radialGradient color extraction
+- **Smart Naming**: Intelligent component naming with conflict resolution suggestions
+
 ## Quick Start
 
 ### Simple as One Command
@@ -40,6 +58,9 @@ 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
+npx svgfusion ./icons --split-colors --fixed-stroke-width --prefix Icon
 ```
 
 ### Installation
@@ -61,7 +82,7 @@ pnpm add svgfusion
 
 ## CLI Options
 
-<img src="https://i.ibb.co/TD0QP5FC/cli.png" alt="SVGFusion CLI" width="512" >
+<img src="https://i.ibb.co/mfRb84x/cli.png" alt="SVGFusion CLI" width="512" >
 
 svgfusion ./icons --output ./components --prefix Icon --suffix Svg
 
@@ -129,6 +150,8 @@ Options:
   --no-optimize                Skip SVG optimization
   --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
 ```
 
@@ -151,6 +174,12 @@ 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
+npx svgfusion ./assets/icons --output ./src/components --split-colors --prefix Icon
+
+# Advanced: Fixed stroke width with split colors
+npx svgfusion ./assets/icons --output ./src/components --split-colors --fixed-stroke-width
 ```
 
 ### Programmatic Usage
@@ -158,138 +187,163 @@ npx svgfusion ./assets/icons --output ./src/components --prefix Icon --suffix Co
 #### Single File Conversion
 
 ```typescript
-import { convertToReact, convertToVue, readSvgFile } from 'svgfusion';
+import { SVGFusion, readFileSync } from 'svgfusion';
+
+// Create SVGFusion engine instance
+const engine = new SVGFusion();
 
 // Read SVG file
-const svgContent = await readSvgFile('./icons/star.svg');
+const svgContent = readFileSync('./icons/star.svg', 'utf8');
 
-// React conversion
-const reactResult = await convertToReact(svgContent, {
-  name: 'StarIcon',
+// React conversion with native SVG props
+const reactResult = engine.convert(svgContent, {
+  framework: 'react',
+  componentName: 'StarIcon',
   typescript: true,
-  memo: true,
-  ref: true,
+  features: {
+    colorSplitting: true,
+    strokeFixing: true,
+    accessibility: true,
+  },
 });
 
-// Vue conversion
-const vueResult = convertToVue(svgContent, {
-  name: 'StarIcon',
+// Vue conversion with native SVG attributes
+const vueResult = engine.convert(svgContent, {
+  framework: 'vue',
+  componentName: 'StarIcon',
   typescript: true,
-  scriptSetup: true,
+  features: {
+    colorSplitting: true,
+    strokeFixing: true,
+    accessibility: true,
+  },
 });
 
-console.log(reactResult.code); // Generated React component
-console.log(vueResult.code); // Generated Vue component
+console.log(reactResult.code); // Generated React component with React.SVGProps
+console.log(vueResult.code); // Generated Vue component with SVGAttributes
 ```
 
-#### Batch Processing
+#### Batch Processing with CLI
 
 ```typescript
-import { BatchConverter } from 'svgfusion';
-
-const batchConverter = new BatchConverter();
+import { processInput } from 'svgfusion/cli';
 
 // Convert entire directory
-const result = await batchConverter.convertBatch({
-  inputDir: './icons',
-  outputDir: './components',
+processInput('./icons', {
+  output: './components',
   framework: 'react',
   recursive: true,
-  generateIndex: true,
+  index: true,
   typescript: true,
   prefix: 'Icon',
   suffix: 'Component',
-  indexFormat: 'ts',
-  exportType: 'named',
+  splitColors: true,
+  fixedStrokeWidth: true,
 });
+```
 
-// Check results
-console.log(`Processed ${result.summary.total} files`);
-console.log(`Successful: ${result.summary.successful}`);
-console.log(`Failed: ${result.summary.failed}`);
+## API Reference
 
-// Get component names
-const componentNames = batchConverter.getComponentNames(result);
-console.log('Generated components:', componentNames);
+### `SVGFusion`
 
-// Generate summary report
-const report = batchConverter.generateSummaryReport(result);
-console.log(report);
-```
+The main engine class for converting SVG content to framework components.
 
-## API Reference
+```typescript
+import { SVGFusion } from 'svgfusion';
+
+const engine = new SVGFusion();
+```
 
-### `convertToReact(svgContent, options)`
+#### `convert(svgContent: string, options: SVGFusionOptions): ConversionResult`
 
-Convert SVG to React component.
+Convert SVG content to React or Vue component.
 
 **Options:**
 
-- `name?: string` - Component name (auto-generated from filename if not provided)
-- `prefix?: string` - Add prefix to component name
-- `suffix?: string` - Add suffix to component name
+- `framework: 'react' | 'vue'` - Target framework
+- `componentName?: string` - Component name (auto-generated from filename if not provided)
 - `typescript?: boolean` - Generate TypeScript component (default: `true`)
-- `memo?: boolean` - Wrap with React.memo (default: `true`)
-- `ref?: boolean` - Add forwardRef support (default: `true`)
-- `optimize?: boolean` - Apply SVGO optimization (default: `true`)
+- `features?: FeatureConfig` - Enable/disable transformation features
+  - `colorSplitting?: boolean` - Extract individual color props (default: `false`)
+  - `strokeFixing?: boolean` - Add fixed stroke width support (default: `false`)
+  - `accessibility?: boolean` - Add accessibility enhancements (default: `true`)
 
-### `convertToVue(svgContent, options)`
+**Returns:** `ConversionResult`
 
-Convert SVG to Vue 3 component. **Note: This is a synchronous function.**
+- `code: string` - Generated component code
+- `framework: string` - Target framework
+- `componentName: string` - Final component name
+- `warnings: string[]` - Any conversion warnings
 
-**Options:**
+### React Components
 
-- `name?: string` - Component name (auto-generated from filename if not provided)
-- `prefix?: string` - Add prefix to component name
-- `suffix?: string` - Add suffix to component name
-- `typescript?: boolean` - Generate TypeScript component (default: `true`)
-- `scriptSetup?: boolean` - Use script setup syntax (default: `true`)
-- `compositionApi?: boolean` - Use Composition API (default: `true`)
-- `optimize?: boolean` - Apply SVGO optimization (default: `true`)
+Generated React components automatically extend `React.SVGProps<SVGSVGElement>`, providing:
 
-### `BatchConverter`
+- All native SVG element props (onClick, onMouseOver, className, style, etc.)
+- Full TypeScript support with proper type inference
+- Native event handling and accessibility features
 
-Process multiple SVG files in batch operations.
+```tsx
+// Generated component signature
+interface StarIconProps extends React.SVGProps<SVGSVGElement> {
+  // Custom color props if colorSplitting is enabled
+  color1?: string;
+  color2?: string;
+}
 
-#### `convertBatch(options: BatchConversionOptions)`
+const StarIcon: React.FC<StarIconProps> = props => {
+  // Component implementation with native SVG props support
+};
+```
 
-Convert multiple SVG files to framework components.
+### Vue Components
 
-**Options:**
+Generated Vue components extend `SVGAttributes` with `v-bind="$attrs"`, providing:
 
-- `inputDir: string` - Input directory path
-- `outputDir: string` - Output directory path
-- `framework?: 'react' | 'vue'` - Target framework (default: 'react')
-- `recursive?: boolean` - Recursively scan directories (default: false)
-- `extensions?: string[]` - File extensions to process (default: ['.svg'])
-- `generateIndex?: boolean` - Generate index file (default: false)
-- `indexFormat?: 'ts' | 'js'` - Index file format (default: 'ts')
-- `exportType?: 'named' | 'default'` - Export type (default: 'named')
-- `prefix?: string` - Add prefix to component names
-- `suffix?: string` - Add suffix to component names
-- `typescript?: boolean` - Generate TypeScript components (default: true)
-- All other conversion options from `convertToReact`/`convertToVue`
+- All native SVG element attributes
+- Event handlers (onClick, onMouseover, etc.)
+- Full TypeScript support with proper attribute typing
 
-**Returns:** `Promise<BatchConversionResult>`
+```vue
+<script setup lang="ts">
+import type { SVGAttributes } from 'vue';
 
-#### `getComponentNames(results: BatchConversionResult)`
+interface StarIconProps extends SVGAttributes {
+  // Custom color props if colorSplitting is enabled
+  color1?: string;
+  color2?: string;
+}
 
-Get array of generated component names from batch results.
+defineOptions({ inheritAttrs: false });
+</script>
 
-#### `generateSummaryReport(results: BatchConversionResult)`
+<template>
+  <svg v-bind="$attrs" viewBox="0 0 24 24">
+    <!-- SVG content -->
+  </svg>
+</template>
+```
 
-Generate a detailed summary report of the conversion process.
+### CLI Integration
 
-### `optimizeSvg(svgContent, config?)`
+```typescript
+import { processInput } from 'svgfusion/cli';
 
-Optimize SVG content using SVGO. **Note: This is a synchronous function.**
+// Process single file or directory
+processInput(inputPath: string, options: CliOptions): void
+```
 
-### File Utilities
+**CLI Options:**
 
-- `readSvgFile(filePath)` - Read SVG file (async)
-- `writeSvgFile(filePath, content)` - Write SVG file (async)
-- `readSvgDirectory(dirPath, recursive?)` - Read SVG files from directory (async)
-- `writeComponentFile(filePath, content)` - Write component file (async)
+- `output?: string` - Output directory (default: './components')
+- `framework?: 'react' | 'vue'` - Target framework (default: 'react')
+- `typescript?: boolean` - Generate TypeScript files (default: true)
+- `recursive?: boolean` - Process directories recursively (default: false)
+- `index?: boolean` - Generate index file (default: false)
+- `prefix?: string` - Add prefix to component names
+- `suffix?: string` - Add suffix to component names
+- `splitColors?: boolean` - Enable color splitting feature
+- `fixedStrokeWidth?: boolean` - Enable stroke fixing feature
 
 ## Examples
 
@@ -305,29 +359,46 @@ Optimize SVG content using SVGO. **Note: This is a synchronous function.**
 ### Generated React Component
 
 ```tsx
-import { SVGProps } from 'react';
-import { memo } from 'react';
-import { forwardRef } from 'react';
-
-const StarIcon = memo(
-  forwardRef<SVGSVGElement, SVGProps<SVGSVGElement> & { className?: string }>(
-    props => {
-      return (
-        <svg viewBox="0 0 24 24" {...props}>
-          <path
-            d="m12 2 3.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.01z"
-            fill="currentColor"
-            className="star-fill"
-          />
-        </svg>
-      );
-    }
-  )
-);
-
-StarIcon.displayName = 'StarIcon';
-
-export default StarIcon;
+import type { SVGProps } from 'react';
+
+interface StarIconProps extends SVGProps<SVGSVGElement> {}
+
+const StarIcon = (props: StarIconProps) => {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <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="currentColor"
+        className="star-fill"
+      />
+    </svg>
+  );
+};
+
+export { StarIcon };
+```
+
+### Generated React Component with Color Splitting
+
+```tsx
+import type { SVGProps } from 'react';
+
+interface StarIconProps extends SVGProps<SVGSVGElement> {
+  fillColor?: string;
+}
+
+const StarIcon = ({ fillColor = 'currentColor', ...props }: StarIconProps) => {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <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={fillColor}
+        className="star-fill"
+      />
+    </svg>
+  );
+};
+
 export { StarIcon };
 ```
 
@@ -335,18 +406,52 @@ export { StarIcon };
 
 ```vue
 <script setup lang="ts">
-interface Props {
-  class?: string;
-  style?: string | Record<string, any>;
+import type { SVGAttributes } from 'vue';
+
+interface StarIconProps extends SVGAttributes {}
+
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <svg v-bind="$attrs" 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"
+      fill="currentColor"
+      class="star-fill"
+    />
+  </svg>
+</template>
+```
+
+### Generated Vue Component with Color Splitting
+
+```vue
+<script setup lang="ts">
+import type { SVGAttributes } from 'vue';
+
+interface StarIconProps extends SVGAttributes {
+  fillColor?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  style: undefined,
+const props = withDefaults(defineProps<StarIconProps>(), {
+  fillColor: 'currentColor',
 });
 
-// Component name for debugging
-const __name = 'StarIcon';
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <svg v-bind="$attrs" 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"
+      :fill="fillColor"
+      class="star-fill"
+    />
+  </svg>
+</template>
+```
+
 </script>
 
 <template>
@@ -362,10 +467,82 @@ const __name = 'StarIcon';
 <style scoped>
 /* Add component-specific styles here */
 </style>
-```
+
+````
 
 ## Advanced Configuration
 
+### Split Colors for Tailwind CSS
+
+The `splitColors` option extracts individual color properties from SVG elements, making them perfect for Tailwind CSS integration:
+
+```typescript
+// Input SVG with colors
+const svgContent = `
+  <svg viewBox="0 0 24 24">
+    <path fill="#FF0000" stroke="#00FF00" />
+    <circle fill="#0000FF" />
+    <linearGradient>
+      <stop stop-color="#FFFF00" />
+      <stop stop-color="#FF00FF" />
+    </linearGradient>
+  </svg>
+`;
+
+// Convert with split colors
+const result = await convertToReact(svgContent, {
+  name: 'MultiColorIcon',
+  splitColors: true,
+  typescript: true,
+});
+
+// Generated component props:
+// - fillColor1, fillColor2 (for fill colors)
+// - strokeColor1 (for stroke colors)
+// - gradientColor1, gradientColor2 (for gradient colors)
+// - fillColor1Class, strokeColor1Class, etc. (for CSS classes)
+````
+
+### Fixed Stroke Width Support
+
+The `isFixedStrokeWidth` option adds support for non-scaling stroke width:
+
+```typescript
+const result = await convertToReact(svgContent, {
+  name: 'StrokeIcon',
+  isFixedStrokeWidth: true,
+});
+
+// Generated component includes:
+// - isFixedStrokeWidth prop
+// - vector-effect="non-scaling-stroke" when prop is true
+```
+
+### Duplicate Name Detection
+
+The batch converter automatically detects and prevents duplicate component names:
+
+```typescript
+// These files would generate the same component name "Icon"
+const files = ['./icons/icon.svg', './assets/icon.svg', './ui/icon.svg'];
+
+// Batch processing will throw an error with conflict details
+try {
+  await batchConverter.convertBatch({
+    inputDir: './icons',
+    outputDir: './components',
+    // ... other options
+  });
+} catch (error) {
+  console.error(error.message);
+  // Error: Duplicate component names detected:
+  // Component name "Icon" conflicts:
+  //   - ./icons/icon.svg
+  //   - ./assets/icon.svg
+  //   - ./ui/icon.svg
+}
+```
+
 ### Custom SVGO Configuration
 
 ```typescript

package/dist/cli.d.ts

@@ -1,2 +1 @@
-
-export {  }
+#!/usr/bin/env node