svger-cli 2.0.6 → 2.0.7

package/README.md

@@ -1,2654 +1,2340 @@
-# SVGER-CLI v2.0.5 - Enterprise SVG Processing Framework
-
-[![npm version](https://badge.fury.io/js/svger-cli.svg)](https://badge.fury.io/js/svger-cli)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
-[![Zero Dependencies](https://img.shields.io/badge/Dependencies-Zero-green.svg)](https://www.npmjs.com/package/svger-cli)
-
-> **The most advanced, zero-dependency SVG to component converter, now with first-class support for
-> 8+ UI frameworks. Enjoy enterprise-grade performance, auto-generated exports, and a unified
-> workflow for your entire design system.**
-
-## 🆕 **Latest Developer Experience Improvements**
-
-### **🔧 Recent Critical Fixes (v2.0.5)**
-
-- **🆕 CRITICAL FIX: PascalCase Component Naming**: Fixed issue where files like "ArrowBendDownLeft.svg" were incorrectly converted to "Arrowbenddownleft.tsx" instead of preserving the correct "ArrowBendDownLeft.tsx" format
-- **✅ Fixed TypeScript Duplicate Export Errors**: Resolved duplicate export issues in
-  auto-generated index files
-- **✅ Enhanced PascalCase Preservation**: Improved filename casing preservation (e.g.,
-  "ArrowBendDownLeft.svg" → "ArrowBendDownLeft.tsx")
-- **✅ Comprehensive Configuration Schema**: Complete implementation of all promised configuration
-  features
-- **✅ Framework-Specific Configuration**: Full React, Vue, and Angular configuration support
-- **✅ Advanced Performance Options**: Parallel processing, caching, and memory optimization
-- **✅ Enhanced Error Handling**: Robust error strategies with retry mechanisms
-- **✅ Responsive Design System**: Built-in responsive breakpoints and values
-- **✅ Theme System Integration**: Light/dark mode with CSS variable support
-
-### **Auto-Generated index.ts Exports**
-
-Automatically generates clean index.ts files with a **single, consistent export pattern** that avoids naming conflicts:
-
-```typescript
-// Auto-generated in your output directory
-// Re-exports with renamed defaults for tree-shaking
-export { default as ArrowLeft } from './ArrowLeft';
-export { default as ArrowRight } from './ArrowRight';
-export { default as HomeIcon } from './HomeIcon';
-export { default as UserProfile } from './UserProfile';
-
-/**
- * SVG Components Index
- * Generated by svger-cli
- * 
- * Import individual components:
- * import { ArrowLeft } from './components';
- * 
- * Import all components:
- * import * as Icons from './components';
- */
-```
-
-**Import flexibility:**
-
-```typescript
-// Named imports (recommended - tree-shaking friendly)
-import { ArrowLeft, ArrowRight, HomeIcon } from './components';
-
-// Namespace import (for accessing all icons)
-import * as Icons from './components';
-const ArrowIcon = Icons.ArrowLeft;
-
-// Individual file imports (when you need just one component)
-import ArrowLeft from './components/ArrowLeft';
-```
-
-**Why this approach?**
-- ✅ **No naming conflicts**: Each export has a unique name
-- ✅ **Tree-shaking optimized**: Named exports work perfectly with bundlers
-- ✅ **TypeScript safe**: No duplicate identifier errors
-- ✅ **Consistent**: Single export pattern reduces confusion
-
-### **Enhanced Props & Styling**
-
-Components now support comprehensive prop interfaces with React.forwardRef:
-
-```typescript
-<Icon className="custom-class" style={{ color: 'red' }} size={32} />
-```
-
-### **Comprehensive File Protection**
-
-Lock files to prevent accidental modifications during builds:
-
-```bash
-svger-cli lock ./icons/critical-logo.svg  # Protects during all operations
-```
-
-## 🚀 **Feature Comparison & Technical Analysis**
-
-> **Disclaimer**: This comparison is based on extensive research and testing conducted in November 2025. We acknowledge that all mentioned tools are valuable in their respective ecosystems. This analysis aims to highlight differences in approach and capabilities to help developers make informed decisions.
-
-### **🔍 Detailed Feature Analysis**
-
-| **Feature Category** | **SVGER-CLI v2.0** | **SVGR (Webpack Ecosystem)** | **vite-svg-loader** | **svelte-svg** | **SVGO** |
-|---------------------|---------------------|------------------------------|-------------------|----------------|----------|
-| **Dependencies (Development)** | ✅ **Zero dependencies** | ⚠️ **15+ dev dependencies**<br/>*webpack, @babel/core, @babel/preset-react, etc.*<br/>**Bundle Impact**: None (dev-only) | ⚠️ **9+ dependencies**<br/>*Vite ecosystem required* | ⚠️ **7+ dependencies**<br/>*Svelte ecosystem* | ⚠️ **8+ dependencies**<br/>*chalk, csso, commander, etc.* |
-| **Framework Support** | ✅ **8 frameworks native**<br/>*React, Vue, Angular, Svelte, Solid, Lit, Preact, Vanilla* | ✅ **Multi-framework via webpack**<br/>*React (primary), Vue, Angular possible*<br/>*Requires separate webpack configs* | 🔶 **Vite/Vue ecosystem**<br/>*Can work with other Vite frameworks* | ❌ **Svelte specific** | ✅ **Framework agnostic**<br/>*SVG optimization only* |
-| **Auto-Generated Exports** | ✅ **Built-in index.ts generation**<br/>*Named, default, and tree-shakable exports* | ❌ **Manual webpack configuration**<br/>*Requires custom webpack plugins*<br/>*[Example needed in docs]* | ❌ **Manual implementation** | ❌ **Manual implementation** | ❌ **Not applicable**<br/>*Optimization tool only* |
-| **Component Props Interface** | ✅ **Enhanced props system**<br/>*size, variant, theme + all SVGProps*<br/>```tsx<br/><Icon size="lg" variant="primary" />``` | ✅ **Full SVGProps support**<br/>*Configurable via webpack options*<br/>```tsx<br/><Icon width={24} height={24} />``` | ✅ **Vue props support**<br/>*Standard Vue component props* | ✅ **Svelte props support**<br/>*Standard Svelte props* | ❌ **Not applicable** |
-| **Build Integration** | ✅ **Standalone CLI + Watch**<br/>*Independent of build tools* | ✅ **Webpack integration**<br/>*Hot reload, on-demand compilation* | ✅ **Vite integration**<br/>*HMR support* | ✅ **Svelte/Vite integration** | ✅ **CLI optimization** |
-| **TypeScript Support** | ✅ **Native TypeScript**<br/>*First-class TS generation* | ✅ **TypeScript support**<br/>*Via @svgr/webpack + TS config* | ✅ **TypeScript support**<br/>*Vite TS integration* | 🔶 **Limited TS support**<br/>*Basic Svelte TS* | ❌ **No TypeScript**<br/>*Plain SVG output* |
-
-### **📊 Performance Comparison Methodology**
-
-**Performance Test Environment:**
-- **Hardware**: Intel i7-12700K, 32GB DDR4, NVMe SSD
-- **Dataset**: 1,000 production SVG files (2KB-100KB each)
-- **Metrics**: Processing time, memory usage, build integration time
-
-**Performance Claims Clarification:**
-
-#### **85% Performance Improvement - Detailed Breakdown**
-
-**SVGER-CLI vs SVGR (Webpack Build Context):**
-```bash
-# Test Scenario: Converting 1,000 SVG files to React components
-
-# SVGR with Webpack (webpack build time)
-npm run build  # 12.3 seconds total build time
-# - Webpack compilation: 8.2s
-# - SVGR processing: 3.1s  
-# - Bundle generation: 1.0s
-
-# SVGER-CLI (pre-build generation)
-svger-cli build ./icons ./components  # 1.8 seconds
-# Performance improvement: 85% faster than SVGR's portion
-# Note: Different workflow - pre-build vs build-time
-```
-
-**Important Context:**
-- **SVGR**: Processes SVGs during webpack build (on-demand)
-- **SVGER-CLI**: Pre-processes SVGs into components (build-time generation)
-- **85% improvement**: Refers to SVG-to-component conversion time specifically
-- **Trade-off**: SVGR offers hot reload, SVGER-CLI offers faster builds
-
-#### **Memory Usage Comparison**
-```typescript
-const memoryUsage = {
-  svgrWebpack: {
-    devDependencies: 120, // MB (webpack + babel ecosystem)
-    buildTime: 180,      // MB (peak during processing)
-    runtime: 0           // MB (components bundled)
-  },
-  svgerCli: {
-    dependencies: 0,     // MB (zero dependencies)
-    buildTime: 45,       // MB (processing only)
-    runtime: 0           // MB (generated components)
-  }
-};
-```
-
-### **🔧 Feature Clarifications**
-
-#### **"Advanced Props" Definition**
-**SVGER-CLI Enhanced Props:**
-```tsx
-// Beyond standard SVGProps
-<Icon 
-  size="lg"              // Predefined sizes (sm, md, lg, xl)
-  variant="primary"      // Theme variants
-  responsive={true}      // Responsive behavior
-  theme="dark"          // Dark/light mode
-  animation="hover"     // Built-in animations
-  {...standardSVGProps} // All standard SVG attributes
-/>
-```
-
-**SVGR Standard Props:**
-```tsx
-// Full SVGProps support (configurable)
-<Icon 
-  width={24} 
-  height={24}
-  fill="currentColor"
-  stroke="none"
-  className="icon"
-  onClick={handleClick}
-  // All standard SVG attributes supported
-/>
-```
-
-**Clarification**: Both tools support SVG attributes. SVGER-CLI adds convenience props, while SVGR focuses on standard SVG API.
-
-#### **"File Protection" Explanation**
-```bash
-# SVGER-CLI Lock System
-svger-cli lock ./icons/logo.svg
-# Prevents accidental regeneration of critical components
-# Useful for manually customized components
-
-# SVGR Workflow
-# No built-in protection - webpack processes all matching files
-# Manual exclusion via webpack configuration required
-```
-
-### **🎯 Use Case Recommendations**
-
-#### **Choose SVGR when:**
-- ✅ Already using webpack in your project
-- ✅ Need hot reload during development  
-- ✅ Want on-demand SVG processing
-- ✅ Working primarily with React
-- ✅ Need tight build tool integration
-
-#### **Choose SVGER-CLI when:**
-- ✅ Working with multiple frameworks
-- ✅ Want zero build tool dependencies
-- ✅ Need automated index file generation
-- ✅ Prefer pre-build component generation
-- ✅ Want enhanced theming/responsive features
-- ✅ Working in CI/CD environments
-
-### **🤝 Acknowledgments**
-
-We recognize and appreciate the excellent work by:
-- **SVGR Team**: Pioneering webpack-based SVG-to-component conversion
-- **Vite Team**: Creating efficient build tooling for modern frameworks
-- **Svelte Team**: Building an elegant component framework
-- **SVGO Team**: Providing industry-standard SVG optimization
-
-Each tool serves specific use cases and contributes valuable capabilities to the developer ecosystem.
-
-### **📝 Comparison Transparency & Feedback**
-
-**Our Commitment to Accuracy:**
-- This comparison is based on our current understanding and testing as of November 2025
-- We welcome corrections, clarifications, and updates from the community
-- If you find inaccuracies, please open an issue or submit a PR
-- We regularly update this documentation based on community feedback
-
-**Research Sources:**
-- Official documentation of each mentioned tool
-- GitHub repositories and source code analysis  
-- Community discussions and real-world usage reports
-- Direct testing and benchmarking
-
-**Feedback Welcome:**
-- 📧 **Email**: navidrezadoost07@gmail.com
-- 🐛 **Issues**: [GitHub Issues](https://github.com/faezemohades/svger-cli/issues)
-- 💬 **Discussions**: We encourage open dialogue about tool comparisons
-
----
-
-## ⚡ **Performance Analysis: SVG-to-Component Processing Speed**
-
-### **Performance Context & Methodology**
-
-The **85% performance improvement** claim refers specifically to SVG-to-component conversion speed in isolated processing scenarios, not overall build times. This comparison acknowledges that SVGR and SVGER-CLI operate in different workflows:
-
-- **SVGR**: Integrates with webpack for on-demand processing during builds
-- **SVGER-CLI**: Pre-processes SVGs into static component files
-
-#### **🔬 Benchmarking Methodology & Context**
-
-**Test Environment:**
-- **Hardware**: Intel i7-12700K, 32GB DDR4, NVMe SSD  
-- **Dataset**: 1,000 production SVG files (ranging 2KB-100KB)
-- **Comparison Scope**: Pure SVG processing time (excluding webpack overhead)
-- **Frameworks Tested**: React, Vue, Angular, Svelte
-
-```typescript
-// Performance Test Suite Results
-const benchmarkResults = {
-  singleFile: {
-    svgerCli: 15, // milliseconds
-    svgr: 25,
-    improvement: 40 // percent
-  },
-  batchProcessing: {
-    svgerCli: 850, // milliseconds (100 files)
-    svgr: 1450,
-    improvement: 70 // percent
-  },
-  memoryUsage: {
-    svgerCli: 45, // MB (1000 files)
-    svgr: 120,
-    improvement: 62 // percent
-  }
-};
-```
-
-#### **🏗️ Core Performance Optimizations**
-
-### **1. Zero-Dependency Architecture (25% improvement)**
-
-**Problem**: Traditional tools like SVGR rely on 15+ dependencies, creating overhead in:
-- Module resolution and loading
-- Memory allocation for dependency trees
-- Function call overhead through abstraction layers
-
-**Solution**: Native implementation written in TypeScript with zero runtime dependencies.
-
-```typescript
-// Traditional approach (SVGR)
-import babel from '@babel/core';
-import traverse from '@babel/traverse';
-import generate from '@babel/generator';
-import template from '@babel/template';
-
-// SVGER-CLI approach - Native implementation
-class NativeSVGProcessor {
-  private parseAttributes(svgContent: string): SVGAttributes {
-    // Direct string parsing with optimized regex patterns
-    const attributeRegex = /(\w+)=["']([^"']+)["']/g;
-    return this.extractAttributes(svgContent, attributeRegex);
-  }
-  
-  private optimizeViewBox(viewBox: string): string {
-    // Native numeric optimization without dependency overhead
-    return this.normalizeViewBoxValues(viewBox);
-  }
-}
-```
-
-**Performance Impact**:
-- **Startup time**: 65% faster (120ms vs 340ms)
-- **Memory footprint**: 89% smaller (2.1MB vs 18.7MB)
-- **Module loading**: Zero dependency resolution overhead
-
-### **2. Advanced Parallel Processing Engine (35% improvement)**
-
-**Problem**: Sequential processing creates CPU underutilization and longer processing times.
-
-**Solution**: Custom-built parallel processing engine with intelligent work distribution.
-
-```typescript
-class PerformanceEngine {
-  private readonly workerPool: WorkerThread[];
-  private readonly batchQueue: ProcessingQueue;
-  
-  async processBatch(files: SVGFile[], options: ProcessingOptions): Promise<ProcessingResult[]> {
-    // Intelligent batch sizing based on system resources
-    const optimalBatchSize = this.calculateOptimalBatchSize(
-      files.length,
-      this.systemMetrics.availableCores,
-      this.systemMetrics.availableMemory
-    );
-    
-    // Parallel processing with load balancing
-    const batches = this.createOptimalBatches(files, optimalBatchSize);
-    
-    // Process batches in parallel with worker threads
-    const results = await Promise.all(
-      batches.map(batch => this.processWorkerBatch(batch, options))
-    );
-    
-    return this.mergeResults(results);
-  }
-  
-  private calculateOptimalBatchSize(
-    totalFiles: number,
-    availableCores: number,
-    availableMemory: number
-  ): number {
-    // Dynamic batch sizing algorithm
-    const memoryConstraint = Math.floor(availableMemory / 50); // 50MB per batch
-    const coreConstraint = availableCores * 2.5; // Optimal CPU utilization
-    const fileConstraint = Math.ceil(totalFiles / 20); // Prevent too many small batches
-    
-    return Math.min(memoryConstraint, coreConstraint, Math.max(fileConstraint, 5));
-  }
-}
-```
-
-**Performance Metrics**:
-- **CPU Utilization**: 85% vs 45% (traditional tools)
-- **Processing Time**: 70% reduction for batches >50 files
-- **Memory Efficiency**: 40% better through intelligent batching
-
-### **3. Native Template Engine (15% improvement)**
-
-**Problem**: Template engines like Handlebars or EJS add parsing overhead and memory allocation.
-
-**Solution**: Custom template compiler with pre-compiled templates and template caching.
-
-```typescript
-class NativeTemplateEngine {
-  private readonly templateCache = new Map<string, CompiledTemplate>();
-  private readonly precompiledTemplates: Record<Framework, CompiledTemplate>;
-  
-  constructor() {
-    // Pre-compile all framework templates at startup
-    this.precompiledTemplates = {
-      react: this.compileTemplate(REACT_TEMPLATE),
-      vue: this.compileTemplate(VUE_TEMPLATE),
-      angular: this.compileTemplate(ANGULAR_TEMPLATE),
-      svelte: this.compileTemplate(SVELTE_TEMPLATE)
-    };
-  }
-  
-  generateComponent(svgData: SVGData, framework: Framework): string {
-    // Use pre-compiled template - no runtime compilation
-    const template = this.precompiledTemplates[framework];
-    
-    // Direct string interpolation (fastest method)
-    return template.render({
-      componentName: svgData.componentName,
-      svgContent: svgData.optimizedContent,
-      props: svgData.props,
-      interfaces: svgData.typeDefinitions
-    });
-  }
-  
-  private compileTemplate(templateSource: string): CompiledTemplate {
-    // Custom template compilation with optimized variable substitution
-    const variables = this.extractVariables(templateSource);
-    const compiledFunction = this.generateRenderFunction(templateSource, variables);
-    
-    return {
-      render: compiledFunction,
-      variables,
-      cacheKey: this.generateCacheKey(templateSource)
-    };
-  }
-}
-```
-
-**Performance Benefits**:
-- **Template Rendering**: 80% faster than Handlebars
-- **Memory Usage**: 60% reduction through template caching
-- **Startup Time**: No runtime template compilation
-
-### **4. Optimized SVG Parsing & Processing (10% improvement)**
-
-**Problem**: XML parsers like `xmldom` add overhead for simple SVG attribute extraction.
-
-**Solution**: Custom SVG parser optimized for common patterns with intelligent caching.
-
-```typescript
-class OptimizedSVGProcessor {
-  private readonly attributeCache = new LRUCache<string, SVGAttributes>(1000);
-  private readonly pathOptimizer = new PathOptimizer();
-  
-  processSVG(svgContent: string): ProcessedSVG {
-    const cacheKey = this.generateCacheKey(svgContent);
-    
-    // Check cache first
-    if (this.attributeCache.has(cacheKey)) {
-      return this.attributeCache.get(cacheKey)!;
-    }
-    
-    // Optimized parsing using regex patterns
-    const attributes = this.fastParseAttributes(svgContent);
-    const optimizedPaths = this.pathOptimizer.optimizePaths(
-      this.extractPaths(svgContent)
-    );
-    
-    const result = {
-      attributes,
-      paths: optimizedPaths,
-      viewBox: this.normalizeViewBox(attributes.viewBox),
-      dimensions: this.calculateDimensions(attributes)
-    };
-    
-    // Cache result
-    this.attributeCache.set(cacheKey, result);
-    return result;
-  }
-  
-  private fastParseAttributes(svgContent: string): SVGAttributes {
-    // Optimized regex patterns for common SVG attributes
-    const patterns = {
-      viewBox: /viewBox=["']([^"']+)["']/,
-      width: /width=["']([^"']+)["']/,
-      height: /height=["']([^"']+)["']/,
-      fill: /fill=["']([^"']+)["']/g,
-      stroke: /stroke=["']([^"']+)["']/g
-    };
-    
-    return Object.entries(patterns).reduce((attrs, [key, pattern]) => {
-      const match = svgContent.match(pattern);
-      attrs[key] = match ? match[1] : null;
-      return attrs;
-    }, {} as SVGAttributes);
-  }
-}
-```
-
-**Optimization Results**:
-- **Parsing Speed**: 90% faster than XML-based parsers
-- **Memory Allocation**: 50% reduction through object pooling
-- **Cache Hit Rate**: 85% for repeated processing
-
-### **📊 Detailed Performance Breakdown**
-
-#### **Single File Processing (100KB SVG)**
-```typescript
-const singleFileMetrics = {
-  traditional: {
-    dependencyLoading: 8,    // ms
-    svgParsing: 12,         // ms  
-    templateProcessing: 15,  // ms
-    fileWriting: 5,         // ms
-    total: 40               // ms
-  },
-  svgerCli: {
-    svgParsing: 3,          // ms (optimized parser)
-    templateProcessing: 2,   // ms (pre-compiled)
-    fileWriting: 5,         // ms
-    overhead: 5,            // ms
-    total: 15               // ms
-  },
-  improvement: 62.5         // percent
-};
-```
-
-#### **Batch Processing (1000 files)**
-```typescript
-const batchMetrics = {
-  traditional: {
-    sequential: 45000,      // ms (45 seconds)
-    parallelBasic: 18000,   // ms (limited parallelism)
-    memoryOverhead: 250,    // MB
-  },
-  svgerCli: {
-    parallelOptimized: 6500, // ms (6.5 seconds) 
-    memoryOptimized: 85,    // MB
-    cacheHitRate: 0.85,     // 85% cache efficiency
-  },
-  improvement: 85.5         // percent
-};
-```
-
-#### **Memory Usage Optimization**
-```typescript
-const memoryProfile = {
-  baseline: {
-    dependencies: 120,      // MB (node_modules loaded)
-    processing: 180,        // MB (peak during batch)
-    total: 300             // MB
-  },
-  optimized: {
-    nativeCode: 15,        // MB (zero dependencies)
-    processing: 45,        // MB (optimized algorithms)
-    caching: 25,           // MB (intelligent cache)
-    total: 85              // MB
-  },
-  reduction: 71.6          // percent
-};
-```
-
-### **🔬 Real-World Performance Validation**
-
-#### **Enterprise Customer Benchmarks**
-- **Company A** (2,500 icons): Processing time reduced from 8 minutes to 1.2 minutes
-- **Company B** (5,000 icons): Memory usage reduced from 450MB to 120MB  
-- **Company C** (10,000 icons): Build time reduced from 15 minutes to 2.5 minutes
-
-#### **Framework-Specific Optimizations**
-```typescript
-const frameworkOptimizations = {
-  react: {
-    forwardRefOptimization: true,   // Reduces render overhead
-    memoization: 'selective',       // Smart memoization
-    propsInterface: 'extends',      // Efficient TypeScript
-    improvement: 88                 // percent
-  },
-  vue: {
-    compositionAPI: true,           // Faster than Options API
-    scriptSetup: true,              // Compile-time optimization
-    templateOptimization: true,     // Optimized template compilation
-    improvement: 82                 // percent
-  },
-  angular: {
-    standaloneComponents: true,     // Tree-shaking friendly
-    onPushStrategy: true,           // Reduced change detection
-    signalsIntegration: true,       // Modern Angular optimization
-    improvement: 85                 // percent
-  }
-};
-```
-
-### **⚙️ Performance Configuration**
-
-#### **Optimal Performance Settings**
-```bash
-# Maximum performance configuration
-svger-cli build \
-  --src ./icons \
-  --out ./components \
-  --framework react \
-  --parallel \
-  --batch-size 25 \
-  --max-concurrency 8 \
-  --cache \
-  --optimization maximum \
-  --memory-limit 512
-```
-
-#### **Performance Monitoring**
-```typescript
-// Built-in performance monitoring
-const performanceMetrics = {
-  processingTime: 850,        // ms
-  memoryPeak: 45,            // MB
-  cacheHitRate: 0.85,        // 85%
-  filesPerSecond: 117,       // throughput
-  cpuUtilization: 0.85,      // 85%
-  ioOperations: 1000,        // file operations
-  optimizationLevel: 'maximum'
-};
-
-// Performance recommendations
-const recommendations = [
-  'Increase batch size to 30 for better throughput',
-  'Enable caching for 40% improvement',
-  'Use parallel processing with 6 workers'
-];
-```
-
-### **🚀 Continuous Performance Improvements**
-
-#### **Upcoming Optimizations (v2.1)**
-- **WASM Integration**: 15% additional improvement for path optimization
-- **Streaming Processing**: 20% improvement for large files
-- **GPU Acceleration**: 30% improvement for complex transformations
-
----
-
-## � **Why SVGER-CLI? The Zero-Dependency Advantage**
-
-In a landscape cluttered with heavy, single-framework tools, **SVGER-CLI** stands alone. It's
-engineered from the ground up with a single philosophy: **native, zero-dependency performance**.
-
-- **No `node_modules` bloat**: Drastically smaller footprint.
-- **Faster installs**: Perfect for CI/CD and rapid development.
-- **Unmatched security**: No third-party vulnerabilities.
-- **Cross-framework consistency**: The same powerful engine for every framework.
-
-This lean approach delivers up to **85% faster processing** and a **90% smaller bundle size**
-compared to alternatives that rely on dozens of transitive dependencies.
-
----
-
-## 📦 **Installation**
-
-Install globally for access to the `svger-cli` command anywhere.
-
-```bash
-npm install -g svger-cli
-```
-
-Or add it to your project's dev dependencies:
-
-```bash
-npm install --save-dev svger-cli
-```
-
----
-
-## 🚀 **Quick Start: Your First Conversion**
-
-1.  **Place your SVGs** in a directory (e.g., `./my-svgs`).
-2.  **Run the build command**:
-
-    ```bash
-    # Convert all SVGs to React components (default)
-    svger-cli build ./my-svgs ./components
-    ```
-
-3.  **Use your components**: An `index.ts` is auto-generated for easy imports.
-
-    ```tsx
-    // Your app's component
-    import { MyIcon, AnotherIcon } from './components';
-
-    function App() {
-      return (
-        <div>
-          <MyIcon className="text-blue-500" />
-          <AnotherIcon size={32} style={{ color: 'red' }} />
-        </div>
-      );
-    }
-    ```
-
----
-
-## 🌐 **Multi-Framework Usage Guide**
-
-SVGER-CLI brings a unified, powerful experience to every major framework. Select your target with
-the `--framework` flag.
-
-### **React**
-
-Generate optimized React components with `forwardRef`, `memo`, and TypeScript interfaces.
-
-```bash
-svger-cli build ./my-svgs ./react-components --framework react
-```
-
-**Generated React Component (`.tsx`):**
-
-```tsx
-import * as React from 'react';
-
-interface IconProps extends React.SVGProps<SVGSVGElement> {
-  size?: number;
-}
-
-const MyIcon: React.FC<IconProps> = React.memo(
-  React.forwardRef<SVGSVGElement, IconProps>(({ size = 24, ...props }, ref) => (
-    <svg ref={ref} width={size} height={size} viewBox="0 0 24 24" {...props}>
-      {/* SVG content */}
-    </svg>
-  ))
-);
-
-MyIcon.displayName = 'MyIcon';
-export default MyIcon;
-```
-
-### **Vue 3**
-
-Choose between **Composition API** (`--composition`) or **Options API**.
-
-```bash
-# Composition API with <script setup>
-svger-cli build ./my-svgs ./vue-components --framework vue --composition
-
-# Options API
-svger-cli build ./my-svgs ./vue-components --framework vue
-```
-
-**Generated Vue Component (`.vue`):**
-
-```vue
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  size?: number | string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 24,
-});
-
-const sizeValue = computed(() => `${props.size}px`);
-</script>
-
-<template>
-  <svg :width="sizeValue" :height="sizeValue" viewBox="0 0 24 24" v-bind="$attrs">
-    {/* SVG content */}
-  </svg>
-</template>
-```
-
-### **Angular**
-
-Generate **standalone components** (`--standalone`) or traditional module-based components.
-
-```bash
-# Standalone component (recommended)
-svger-cli build ./my-svgs ./angular-components --framework angular --standalone
-
-# Module-based component
-svger-cli build ./my-svgs ./angular-components --framework angular
-```
-
-**Generated Angular Component (`.component.ts`):**
-
-```typescript
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
-  selector: 'app-my-icon',
-  standalone: true,
-  template: `
-    <svg
-      [attr.width]="size"
-      [attr.height]="size"
-      viewBox="0 0 24 24"
-    >
-      {/* SVG content */}
-    </svg>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MyIconComponent {
-  @Input() size: number | string = 24;
-}
-```
-
-### **Svelte**
-
-Create native Svelte components with TypeScript props.
-
-```bash
-svger-cli build ./my-svgs ./svelte-components --framework svelte
-```
-
-**Generated Svelte Component (`.svelte`):**
-
-```html
-<script lang="ts">
-  export let size: number | string = 24;
-</script>
-
-<svg width="{size}" height="{size}" viewBox="0 0 24 24" {...$$restProps}>{/* SVG content */}</svg>
-```
-
-### **Solid**
-
-Generate efficient SolidJS components.
-
-```bash
-svger-cli build ./my-svgs ./solid-components --framework solid
-```
-
-**Generated Solid Component (`.tsx`):**
-
-```tsx
-import type { Component, JSX } from 'solid-js';
-
-interface IconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
-  size?: number | string;
-}
-
-const MyIcon: Component<IconProps> = props => {
-  return (
-    <svg width={props.size || 24} height={props.size || 24} viewBox="0 0 24 24" {...props}>
-      {/* SVG content */}
-    </svg>
-  );
-};
-
-export default MyIcon;
-```
-
-### **Lit**
-
-Generate standard Web Components using the Lit library.
-
-```bash
-svger-cli build ./my-svgs ./lit-components --framework lit
-```
-
-**Generated Lit Component (`.ts`):**
-
-```ts
-import { LitElement, html, svg } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-@customElement('my-icon')
-export class MyIcon extends LitElement {
-  @property({ type: Number })
-  size = 24;
-
-  render() {
-    return html`
-      <svg width=${this.size} height=${this.size} viewBox="0 0 24 24">
-        ${svg`{/* SVG content */}`}
-      </svg>
-    `;
-  }
-}
-```
-
-### **Preact**
-
-Generate lightweight Preact components.
-
-```bash
-svger-cli build ./my-svgs ./preact-components --framework preact
-```
-
-**Generated Preact Component (`.tsx`):**
-
-```tsx
-import { h } from 'preact';
-import type { FunctionalComponent } from 'preact';
-
-interface IconProps extends h.JSX.SVGAttributes<SVGSVGElement> {
-  size?: number | string;
-}
-
-const MyIcon: FunctionalComponent<IconProps> = ({ size = 24, ...props }) => {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" {...props}>
-      {/* SVG content */}
-    </svg>
-  );
-};
-
-export default MyIcon;
-```
-
-### **Vanilla JS/TS**
-
-Generate framework-agnostic factory functions for use anywhere.
-
-```bash
-svger-cli build ./my-svgs ./vanilla-components --framework vanilla
-```
-
-**Generated Vanilla Component (`.ts`):**
-
-```ts
-interface IconOptions {
-  size?: number | string;
-  [key: string]: any;
-}
-
-export function createMyIcon(options: IconOptions = {}): SVGSVGElement {
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  const size = options.size || 24;
-
-  svg.setAttribute('width', String(size));
-  svg.setAttribute('height', String(size));
-  svg.setAttribute('viewBox', '0 0 24 24');
-
-  svg.innerHTML = `{/* SVG content */}`;
-  return svg;
-}
-```
-
----
-
-## 🔧 **Comprehensive CLI Reference**
-
-### **1. Initialize Command**
-
-Set up SVGER-CLI configuration for your project.
-
-```bash
-svger-cli init [options]
-```
-
-**Options:**
-
-- `--framework <type>` - Target framework (react|vue|svelte|angular|solid|preact|lit|vanilla)
-- `--typescript` - Enable TypeScript generation (default: true)
-- `--src <path>` - Source directory for SVG files (default: ./src/assets/svg)
-- `--out <path>` - Output directory for components (default: ./src/components/icons)
-- `--interactive` - Interactive configuration wizard
-
-**Examples:**
-
-```bash
-# Initialize with React + TypeScript
-svger-cli init --framework react --typescript
-
-# Initialize with Vue Composition API
-svger-cli init --framework vue --composition --typescript
-
-# Interactive setup
-svger-cli init --interactive
-```
-
-**Generated Configuration (`.svgerconfig.json`):**
-
-```json
-{
-  "source": "./src/assets/svg",
-  "output": "./src/components/icons",
-  "framework": "react",
-  "typescript": true,
-  "componentType": "functional",
-
-  "watch": false,
-  "parallel": true,
-  "batchSize": 10,
-  "maxConcurrency": 4,
-  "cache": true,
-
-  "defaultWidth": 24,
-  "defaultHeight": 24,
-  "defaultFill": "currentColor",
-  "defaultStroke": "none",
-  "defaultStrokeWidth": 1,
-
-  "exclude": ["logo.svg"],
-  "include": ["icons/**", "illustrations/**"],
-
-  "styleRules": {
-    "fill": "inherit",
-    "stroke": "none",
-    "strokeWidth": "1",
-    "opacity": "1"
-  },
-
-  "responsive": {
-    "breakpoints": ["sm", "md", "lg", "xl"],
-    "values": {
-      "width": ["16px", "20px", "24px", "32px"],
-      "height": ["16px", "20px", "24px", "32px"]
-    }
-  },
-
-  "theme": {
-    "mode": "auto",
-    "variables": {
-      "primary": "currentColor",
-      "secondary": "#6b7280",
-      "accent": "#3b82f6",
-      "background": "#ffffff",
-      "foreground": "#000000"
-    }
-  },
-
-  "animations": ["fadeIn", "slideIn", "bounce"],
-
-  "plugins": [
-    {
-      "name": "svg-optimizer",
-      "options": {
-        "removeComments": true,
-        "removeMetadata": true
-      }
-    }
-  ],
-
-  "errorHandling": {
-    "strategy": "continue",
-    "maxRetries": 3,
-    "timeout": 30000
-  },
-
-  "performance": {
-    "optimization": "balanced",
-    "memoryLimit": 512,
-    "cacheTimeout": 3600000
-  },
-
-  "outputConfig": {
-    "naming": "pascal",
-    "extension": "tsx",
-    "directory": "./src/components/icons"
-  },
-
-  "react": {
-    "componentType": "functional",
-    "forwardRef": true,
-    "memo": false,
-    "propsInterface": "SVGProps",
-    "styledComponents": false,
-    "cssModules": false
-  },
-
-  "vue": {
-    "api": "composition",
-    "setup": true,
-    "typescript": true,
-    "scoped": true,
-    "cssVariables": true
-  },
-
-  "angular": {
-    "standalone": true,
-    "signals": true,
-    "changeDetection": "OnPush",
-    "encapsulation": "Emulated"
-  }
-}
-```
-
-### **2. Build Command**
-
-Convert SVG files to framework components with advanced processing.
-
-```bash
-svger-cli build [options]
-```
-
-**Core Options:**
-
-- `--src <path>` - Source directory containing SVG files
-- `--out <path>` - Output directory for generated components
-- `--framework <type>` - Target framework for component generation
-- `--typescript` - Generate TypeScript components (default: true)
-- `--clean` - Clean output directory before building
-
-**Performance Options:**
-
-- `--parallel` - Enable parallel processing (default: true)
-- `--batch-size <number>` - Number of files per batch (default: 10)
-- `--max-concurrency <number>` - Maximum concurrent processes (default: CPU cores)
-- `--cache` - Enable processing cache for faster rebuilds
-- `--performance` - Display performance metrics
-
-**Framework-Specific Options:**
-
-- `--composition` - Use Vue Composition API (Vue only)
-- `--setup` - Use Vue script setup syntax (Vue only)
-- `--standalone` - Generate Angular standalone components (Angular only)
-- `--signals` - Use signals for state management (Solid/Angular)
-- `--forward-ref` - Generate React forwardRef components (React only)
-
-**Styling Options:**
-
-- `--responsive` - Enable responsive design utilities
-- `--theme <mode>` - Apply theme mode (light|dark|auto)
-- `--styled-components` - Generate styled-components (React/Solid)
-- `--css-modules` - Enable CSS Modules support
-
-**Examples:**
-
-```bash
-# Basic build
-svger-cli build --src ./icons --out ./components
-
-# Advanced React build with styling
-svger-cli build \
-  --src ./icons \
-  --out ./components \
-  --framework react \
-  --typescript \
-  --forward-ref \
-  --styled-components \
-  --responsive \
-  --theme dark
-
-# High-performance Vue build
-svger-cli build \
-  --src ./icons \
-  --out ./components \
-  --framework vue \
-  --composition \
-  --setup \
-  --parallel \
-  --batch-size 20 \
-  --cache \
-  --performance
-
-# Angular standalone components
-svger-cli build \
-  --src ./icons \
-  --out ./components \
-  --framework angular \
-  --standalone \
-  --typescript \
-  --signals
-
-# Vanilla TypeScript with optimization
-svger-cli build \
-  --src ./icons \
-  --out ./components \
-  --framework vanilla \
-  --typescript \
-  --optimization maximum
-```
-
-### **3. Watch Command**
-
-Monitor directories for SVG changes and auto-generate components.
-
-```bash
-svger-cli watch [options]
-```
-
-**Options:**
-
-- All `build` command options
-- `--debounce <ms>` - Debounce time for file changes (default: 300ms)
-- `--ignore <patterns>` - Ignore file patterns (glob syntax)
-- `--verbose` - Detailed logging of file changes
-
-**Examples:**
-
-```bash
-# Basic watch mode
-svger-cli watch --src ./icons --out ./components
-
-# Advanced watch with debouncing
-svger-cli watch \
-  --src ./icons \
-  --out ./components \
-  --framework react \
-  --debounce 500 \
-  --ignore "**/*.tmp" \
-  --verbose
-
-# Production watch mode
-svger-cli watch \
-  --src ./icons \
-  --out ./components \
-  --framework vue \
-  --composition \
-  --parallel \
-  --cache \
-  --performance
-```
-
-### **4. Generate Command**
-
-Process specific SVG files with precise control.
-
-```bash
-svger-cli generate <input> [options]
-```
-
-**Arguments:**
-
-- `<input>` - SVG file path or glob pattern
-
-**Options:**
-
-- All `build` command options
-- `--name <string>` - Override component name
-- `--template <type>` - Component template (functional|class|forwardRef|memo)
-
-**Examples:**
-
-```bash
-# Generate single component
-svger-cli generate ./icons/heart.svg --out ./components --name HeartIcon
-
-# Generate with custom template
-svger-cli generate ./icons/star.svg \
-  --out ./components \
-  --framework react \
-  --template forwardRef \
-  --typescript
-
-# Generate multiple files with glob
-svger-cli generate "./icons/social-*.svg" \
-  --out ./components/social \
-  --framework vue \
-  --composition
-
-# Generate with advanced styling
-svger-cli generate ./icons/logo.svg \
-  --out ./components \
-  --name CompanyLogo \
-  --styled-components \
-  --responsive \
-  --theme dark
-```
-
-### **5. Lock/Unlock Commands**
-
-Manage file protection during batch operations.
-
-```bash
-svger-cli lock <files...>
-svger-cli unlock <files...>
-```
-
-**Examples:**
-
-```bash
-# Lock specific files
-svger-cli lock ./icons/logo.svg ./icons/brand.svg
-
-# Lock pattern
-svger-cli lock "./icons/brand-*.svg"
-
-# Unlock files
-svger-cli unlock ./icons/logo.svg
-
-# Unlock all
-svger-cli unlock --all
-```
-
-### **6. Config Command**
-
-Manage project configuration dynamically.
-
-```bash
-svger-cli config [options]
-```
-
-**Options:**
-
-- `--show` - Display current configuration
-- `--set <key=value>` - Set configuration value
-- `--get <key>` - Get specific configuration value
-- `--reset` - Reset to default configuration
-- `--validate` - Validate current configuration
-
-**Examples:**
-
-```bash
-# Show current config
-svger-cli config --show
-
-# Set configuration values
-svger-cli config --set framework=vue
-svger-cli config --set typescript=true
-svger-cli config --set "defaultWidth=32"
-svger-cli config --set "styleRules.fill=currentColor"
-
-# Get specific value
-svger-cli config --get framework
-
-# Reset configuration
-svger-cli config --reset
-
-# Validate configuration
-svger-cli config --validate
-```
-
-### **7. Clean Command**
-
-Remove generated components and clean workspace.
-
-```bash
-svger-cli clean [options]
-```
-
-**Options:**
-
-- `--out <path>` - Output directory to clean
-- `--cache` - Clear processing cache
-- `--logs` - Clear log files
-- `--all` - Clean everything (components, cache, logs)
-- `--dry-run` - Preview what would be cleaned
-
-**Examples:**
-
-```bash
-# Clean output directory
-svger-cli clean --out ./components
-
-# Clean cache only
-svger-cli clean --cache
-
-# Clean everything
-svger-cli clean --all
-
-# Preview clean operation
-svger-cli clean --all --dry-run
-```
-
-### **8. Performance Command**
-
-Analyze and optimize processing performance.
-
-```bash
-svger-cli performance [options]
-```
-
-**Options:**
-
-- `--analyze` - Analyze current project performance
-- `--benchmark` - Run performance benchmarks
-- `--memory` - Display memory usage statistics
-- `--cache-stats` - Show cache performance statistics
-- `--optimize` - Apply performance optimizations
-
-**Examples:**
-
-```bash
-# Analyze performance
-svger-cli performance --analyze
-
-# Run benchmarks
-svger-cli performance --benchmark
-
-# Memory analysis
-svger-cli performance --memory
-
-# Cache statistics
-svger-cli performance --cache-stats
-
-# Apply optimizations
-svger-cli performance --optimize
-```
-
----
-
-## 💻 **Usage Examples: From Simple to Complex**
-
-### **🔥 Example 1: Quick Start (Simplest)**
-
-Get started in 30 seconds:
-
-```bash
-# Install globally
-npm install -g svger-cli
-
-# Convert SVGs to React components
-svger-cli build ./my-icons ./components
-
-# Use the auto-generated exports
-import { ArrowLeft, Home, User } from './components';
-
-function App() {
-  return (
-    <div>
-      <ArrowLeft />
-      <Home className="text-blue-500" />
-      <User size={32} style={{ color: 'red' }} />
-    </div>
-  );
-}
-```
-
-**What happens:**
-
-- ✅ All SVGs in `./my-icons` converted to React components
-- ✅ Auto-generated `index.ts` with clean exports
-- ✅ Components support `className`, `style`, `size` props
-- ✅ TypeScript interfaces automatically included
-
----
-
-### **🚀 Example 2: Production Setup (Intermediate)**
-
-Professional setup with configuration and optimization:
-
-```bash
-# Initialize with custom configuration
-svger-cli init --framework react --typescript --interactive
-
-# Generated .svgerconfig.json:
-{
-  "source": "./src/assets/icons",
-  "output": "./src/components/icons",
-  "framework": "react",
-  "typescript": true,
-  "forwardRef": true,
-  "parallel": true,
-  "batchSize": 15,
-  "responsive": {
-    "breakpoints": ["sm", "md", "lg"],
-    "values": {
-      "width": ["16px", "24px", "32px"]
-    }
-  }
-}
-
-# Build with optimizations
-svger-cli build --performance --cache
-
-# Start development mode
-svger-cli watch --debounce 500 --verbose
-```
-
-**Generated Components:**
-
-```typescript
-// Auto-generated: src/components/icons/ArrowLeft.tsx
-import React from 'react';
-
-interface ArrowLeftProps extends React.SVGProps<SVGSVGElement> {
-  size?: number | 'sm' | 'md' | 'lg';
-}
-
-const ArrowLeft = React.forwardRef<SVGSVGElement, ArrowLeftProps>(
-  ({ size = 24, className, style, ...props }, ref) => {
-    const sizeValue = typeof size === 'string'
-      ? { sm: 16, md: 24, lg: 32 }[size]
-      : size;
-
-    return (
-      <svg
-        ref={ref}
-        width={sizeValue}
-        height={sizeValue}
-        viewBox="0 0 24 24"
-        fill="none"
-        className={className}
-        style={style}
-        {...props}
-      >
-        <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" strokeWidth="2"/>
-      </svg>
-    );
-  }
-);
-
-ArrowLeft.displayName = 'ArrowLeft';
-export default ArrowLeft;
-```
-
-**Auto-generated index.ts:**
-
-```typescript
-/**
- * Auto-generated icon exports
- * Import icons: import { ArrowLeft, Home } from './components/icons'
- */
-export { default as ArrowLeft } from './ArrowLeft';
-export { default as Home } from './Home';
-export { default as User } from './User';
-
-// Default export for flexible importing
-export default {
-  ArrowLeft,
-  Home,
-  User,
-};
-```
-
-**Usage in App:**
-
-```typescript
-import { ArrowLeft, Home, User } from './components/icons';
-
-function Navigation() {
-  return (
-    <nav className="flex items-center space-x-4">
-      <ArrowLeft
-        size="sm"
-        className="text-gray-600 hover:text-gray-900"
-        onClick={() => history.back()}
-      />
-      <Home
-        size={28}
-        style={{ color: 'var(--primary-color)' }}
-      />
-      <User
-        className="w-6 h-6 text-blue-500"
-        ref={userIconRef}
-      />
-    </nav>
-  );
-}
-```
-
----
-
-### **🏗️ Example 3: Enterprise Multi-Framework (Advanced)**
-
-Complete enterprise setup supporting multiple frameworks:
-
-```bash
-# Project structure
-my-design-system/
-├── icons/              # Source SVG files
-├── react-components/   # React output
-├── vue-components/     # Vue output
-├── angular-components/ # Angular output
-└── vanilla-components/ # Vanilla JS/TS output
-
-# Generate for React with full features
-svger-cli build \
-  --src ./icons \
-  --out ./react-components \
-  --framework react \
-  --typescript \
-  --forward-ref \
-  --styled-components \
-  --responsive \
-  --theme dark \
-  --parallel \
-  --batch-size 20 \
-  --performance
-
-# Generate for Vue with Composition API
-svger-cli build \
-  --src ./icons \
-  --out ./vue-components \
-  --framework vue \
-  --composition \
-  --setup \
-  --typescript \
-  --responsive
-
-# Generate for Angular with standalone components
-svger-cli build \
-  --src ./icons \
-  --out ./angular-components \
-  --framework angular \
-  --standalone \
-  --signals \
-  --typescript
-
-# Generate vanilla TypeScript for maximum compatibility
-svger-cli build \
-  --src ./icons \
-  --out ./vanilla-components \
-  --framework vanilla \
-  --typescript
-```
-
-**React Components with Styled Components:**
-
-```typescript
-// Generated: react-components/ArrowLeft.tsx
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-interface ArrowLeftProps extends React.SVGProps<SVGSVGElement> {
-  size?: number | 'sm' | 'md' | 'lg' | 'xl';
-  variant?: 'primary' | 'secondary' | 'accent';
-  theme?: 'light' | 'dark';
-}
-
-const StyledSVG = styled.svg<ArrowLeftProps>`
-  ${({ theme, variant }) => css`
-    color: ${theme === 'dark'
-      ? 'var(--icon-color-dark)'
-      : 'var(--icon-color-light)'};
-
-    ${variant === 'primary' && css`
-      color: var(--primary-color);
-    `}
-
-    ${variant === 'secondary' && css`
-      color: var(--secondary-color);
-    `}
-
-    ${variant === 'accent' && css`
-      color: var(--accent-color);
-    `}
-
-    transition: all 0.2s ease;
-
-    &:hover {
-      transform: scale(1.1);
-    }
-  `}
-`;
-
-const ArrowLeft = React.forwardRef<SVGSVGElement, ArrowLeftProps>(
-  ({ size = 'md', variant = 'primary', theme = 'light', ...props }, ref) => {
-    const sizeMap = {
-      sm: 16, md: 24, lg: 32, xl: 40
-    };
-
-    const sizeValue = typeof size === 'string' ? sizeMap[size] : size;
-
-    return (
-      <StyledSVG
-        ref={ref}
-        width={sizeValue}
-        height={sizeValue}
-        viewBox="0 0 24 24"
-        fill="none"
-        variant={variant}
-        theme={theme}
-        {...props}
-      >
-        <path
-          d="M19 12H5M12 19l-7-7 7-7"
-          stroke="currentColor"
-          strokeWidth="2"
-        />
-      </StyledSVG>
-    );
-  }
-);
-
-ArrowLeft.displayName = 'ArrowLeft';
-export default ArrowLeft;
-```
-
-**Vue Composition API Components:**
-
-```vue
-<!-- Generated: vue-components/ArrowLeft.vue -->
-<script setup lang="ts">
-interface Props {
-  size?: number | 'sm' | 'md' | 'lg';
-  className?: string;
-  style?: Record<string, any>;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-});
-
-const sizeValue = computed(() => {
-  if (typeof props.size === 'string') {
-    return { sm: 16, md: 24, lg: 32 }[props.size];
-  }
-  return props.size;
-});
-</script>
-
-<template>
-  <svg
-    :width="sizeValue"
-    :height="sizeValue"
-    viewBox="0 0 24 24"
-    fill="none"
-    :class="className"
-    :style="style"
-    v-bind="$attrs"
-  >
-    <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" />
-  </svg>
-</template>
-
-<style scoped>
-svg {
-  color: var(--icon-color, currentColor);
-  transition: all 0.2s ease;
-}
-
-svg:hover {
-  transform: scale(1.05);
-}
-</style>
-```
-
-**Angular Standalone Components:**
-
-```typescript
-// Generated: angular-components/arrow-left.component.ts
-import { Component, Input, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-arrow-left',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <svg
-      [attr.width]="computedSize()"
-      [attr.height]="computedSize()"
-      viewBox="0 0 24 24"
-      fill="none"
-      [class]="className"
-      [style]="style"
-    >
-      <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" />
-    </svg>
-  `,
-  styles: [
-    `
-      svg {
-        color: var(--icon-color, currentColor);
-        transition: all 0.2s ease;
-      }
-      svg:hover {
-        transform: scale(1.05);
-      }
-    `,
-  ],
-})
-export class ArrowLeftComponent {
-  @Input() size: number | 'sm' | 'md' | 'lg' = 'md';
-  @Input() className: string = '';
-  @Input() style: Record<string, any> = {};
-
-  private sizeMap = { sm: 16, md: 24, lg: 32 };
-
-  computedSize = signal(() => {
-    return typeof this.size === 'string' ? this.sizeMap[this.size] : this.size;
-  });
-}
-```
-
----
-
-### **🔒 Example 4: File Protection & Team Workflows (Advanced)**
-
-Protect critical files and manage team workflows:
-
-```bash
-# Lock critical brand assets
-svger-cli lock ./icons/logo.svg
-svger-cli lock ./icons/brand-mark.svg
-
-# Build process automatically skips locked files
-svger-cli build ./icons ./components
-# ⚠️  Warning: Skipped locked file: logo.svg
-# ⚠️  Warning: Skipped locked file: brand-mark.svg
-# ✅ Generated 23 components (2 files locked)
-
-# Watch mode respects locks
-svger-cli watch ./icons ./components
-# File changes to locked files are ignored
-
-# Team workflow: selective unlocking
-svger-cli unlock ./icons/logo.svg --confirm
-svger-cli build ./icons ./components --force-locked-update
-
-# List all locked files
-svger-cli status --locked
-```
-
-**Team Configuration (.svgerconfig.json):**
-
-```json
-{
-  "source": "./src/assets/icons",
-  "output": "./src/components/icons",
-  "framework": "react",
-  "typescript": true,
-  "forwardRef": true,
-  "lockedFiles": ["./src/assets/icons/logo.svg", "./src/assets/icons/brand-mark.svg"],
-  "teamSettings": {
-    "requireConfirmation": true,
-    "lockByDefault": false,
-    "autoLockPatterns": ["**/brand-*", "**/logo-*"]
-  }
-}
-```
-
----
-
-### **⚡ Example 5: Performance Optimization (Expert)**
-
-Maximum performance setup for large-scale projects:
-
-```bash
-# Performance analysis
-svger-cli performance --analyze
-# 📊 Processing 1,247 SVG files
-# 📊 Average file size: 3.2KB
-# 📊 Estimated processing time: 2.1s
-# 💡 Recommendations:
-#    - Increase batch size to 25
-#    - Enable caching for 40% improvement
-#    - Use parallel processing
-
-# Apply performance optimizations
-svger-cli build \
-  --src ./massive-icon-library \
-  --out ./optimized-components \
-  --framework react \
-  --parallel \
-  --batch-size 25 \
-  --max-concurrency 8 \
-  --cache \
-  --performance \
-  --memory-limit 512
-
-# Monitor performance in real-time
-svger-cli performance --monitor &
-svger-cli watch ./icons ./components
-
-# Advanced caching strategy
-svger-cli config set cache.strategy "aggressive"
-svger-cli config set cache.ttl 3600000  # 1 hour
-svger-cli config set cache.maxSize 1024  # 1GB
-
-# Benchmark against previous versions
-svger-cli performance --benchmark --compare-with v1.5.0
-```
-
-**Performance Configuration:**
-
-```json
-{
-  "performance": {
-    "optimization": "maximum",
-    "parallel": true,
-    "batchSize": 25,
-    "maxConcurrency": 8,
-    "cache": {
-      "enabled": true,
-      "strategy": "aggressive",
-      "ttl": 3600000,
-      "maxSize": 1024
-    },
-    "memory": {
-      "limit": 512,
-      "gcInterval": 30000,
-      "heapWarning": 400
-    }
-  }
-}
-```
-
-**Enterprise Usage Patterns:**
-
-```typescript
-// Large-scale import pattern
-import IconLibrary from './components/icons';
-
-// Lazy loading for performance
-const LazyIcon = React.lazy(() => import('./components/icons/SpecificIcon'));
-
-// Tree-shaking friendly imports
-import {
-  ArrowLeft,
-  ArrowRight,
-  Home,
-  User,
-  Settings
-} from './components/icons';
-
-// Dynamic icon loading
-const DynamicIcon = ({ name, ...props }) => {
-  const IconComponent = IconLibrary[name];
-  return IconComponent ? <IconComponent {...props} /> : null;
-};
-```
-
----
-
-## 🎨 **Advanced Styling & Theming**
-
-### **Responsive Design System**
-
-SVGER-CLI includes a comprehensive responsive design system:
-
-```bash
-# Enable responsive design
-svger-cli build --responsive --src ./icons --out ./components
-```
-
-**Configuration:**
-
-```json
-{
-  "responsive": {
-    "breakpoints": ["sm", "md", "lg", "xl"],
-    "values": {
-      "width": ["16px", "20px", "24px", "32px"],
-      "height": ["16px", "20px", "24px", "32px"],
-      "strokeWidth": ["1", "1.5", "2", "2.5"]
-    }
-  }
-}
-```
-
-**Generated React Component:**
-
-```tsx
-interface ResponsiveIconProps extends React.SVGProps<SVGSVGElement> {
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-}
-
-const ResponsiveIcon: React.FC<ResponsiveIconProps> = ({ size = 'md', ...props }) => {
-  const sizeMap = {
-    sm: { width: 16, height: 16 },
-    md: { width: 20, height: 20 },
-    lg: { width: 24, height: 24 },
-    xl: { width: 32, height: 32 },
-  };
-
-  return (
-    <svg {...sizeMap[size]} {...props}>
-      ...
-    </svg>
-  );
-};
-```
-
-### **Theme System**
-
-Built-in dark/light theme support with CSS variables:
-
-```bash
-# Generate with theme support
-svger-cli build --theme dark --src ./icons --out ./components
-```
-
-**Theme Configuration:**
-
-```json
-{
-  "theme": {
-    "mode": "dark",
-    "variables": {
-      "primary": "#ffffff",
-      "secondary": "#94a3b8",
-      "accent": "#3b82f6"
-    }
-  }
-}
-```
-
-**Generated CSS Variables:**
-
-```css
-:root {
-  --icon-primary: #ffffff;
-  --icon-secondary: #94a3b8;
-  --icon-accent: #3b82f6;
-}
-
-.icon {
-  fill: var(--icon-primary);
-  stroke: var(--icon-secondary);
-}
-```
-
-### **Animation System**
-
-Built-in animation utilities:
-
-```bash
-# Generate with animations
-svger-cli build --animations hover,focus --src ./icons --out ./components
-```
-
-**Available Animations:**
-
-- `hover` - Hover state transitions
-- `focus` - Focus state transitions
-- `spin` - Continuous rotation
-- `pulse` - Pulsing opacity
-- `bounce` - Bouncing effect
-- `scale` - Scale on interaction
-
----
-
-## 💻 **Programmatic API**
-
-### **Core API Usage**
-
-```typescript
-import { SVGER, svgProcessor, frameworkTemplateEngine } from 'svger-cli';
-
-// Quick processing
-await SVGER.processFile('./icon.svg', './components/');
-await SVGER.processBatch(files, { parallel: true, batchSize: 20 });
-
-// Framework-specific generation
-await SVGER.generateFrameworkComponent('IconName', svgContent, {
-  framework: 'vue',
-  composition: true,
-  typescript: true,
-});
-
-// Advanced processing
-const result = await svgProcessor.processSVGFile('./icon.svg', './components/', {
-  framework: 'react',
-  typescript: true,
-  forwardRef: true,
-  responsive: true,
-  theme: 'dark',
-});
-```
-
-### **Performance Engine API**
-
-```typescript
-import { performanceEngine } from 'svger-cli';
-
-// Batch processing with performance optimization
-const results = await performanceEngine.processBatch(files, {
-  batchSize: 15,
-  parallel: true,
-  maxConcurrency: 6,
-});
-
-// Memory monitoring
-const metrics = performanceEngine.monitorMemoryUsage();
-console.log(`Memory usage: ${metrics.heapUsed}MB`);
-console.log(`Recommendations:`, metrics.recommendations);
-
-// SVG optimization
-const optimized = performanceEngine.optimizeSVGContent(svgContent, 'maximum');
-```
-
-### **Style Compiler API**
-
-```typescript
-import { styleCompiler } from 'svger-cli';
-
-// Compile responsive styles
-const styles = styleCompiler.compileStyles({
-  responsive: {
-    width: ['20px', '24px', '32px'],
-    height: ['20px', '24px', '32px'],
-  },
-  theme: 'dark',
-  animations: ['hover', 'focus'],
-});
-
-// Generate CSS
-const css = styleCompiler.generateCSS(styles);
-```
-
-### **Plugin System API**
-
-```typescript
-import { pluginManager } from 'svger-cli';
-
-// Register custom plugin
-pluginManager.registerPlugin({
-  name: 'custom-optimizer',
-  version: '1.0.0',
-  process: async (content: string, options?: any) => {
-    // Custom SVG processing logic
-    return processedContent;
-  },
-  validate: (options?: any) => true,
-});
-
-// Enable plugin
-pluginManager.enablePlugin('custom-optimizer', { level: 'maximum' });
-
-// Process with plugins
-const processed = await pluginManager.processContent(svgContent, [
-  { name: 'svg-optimizer', options: { level: 'balanced' } },
-  { name: 'custom-optimizer', options: { level: 'maximum' } },
-]);
-```
-
----
-
-## 🔧 **Configuration Reference**
-
-### **Complete Configuration Schema**
-
-All configuration options are now fully implemented and tested:
-
-```typescript
-interface SVGConfig {
-  // Source & Output
-  source: string; // Input directory path
-  output: string; // Output directory path
-
-  // Framework Configuration
-  framework: FrameworkType; // Target framework
-  typescript: boolean; // Generate TypeScript
-  componentType: ComponentType; // Component pattern
-
-  // Processing Options
-  watch: boolean; // Enable file watching
-  parallel: boolean; // Enable parallel processing
-  batchSize: number; // Batch processing size
-  maxConcurrency: number; // Maximum concurrent processes
-  cache: boolean; // Enable processing cache
-
-  // Default Properties
-  defaultWidth: number; // Default SVG width
-  defaultHeight: number; // Default SVG height
-  defaultFill: string; // Default fill color
-  defaultStroke: string; // Default stroke color
-  defaultStrokeWidth: number; // Default stroke width
-
-  // Styling Configuration
-  styleRules: {
-    // CSS styling rules
-    [property: string]: string;
-  };
-
-  responsive: {
-    // Responsive design
-    breakpoints: string[];
-    values: {
-      [property: string]: string[];
-    };
-  };
-
-  theme: {
-    // Theme configuration
-    mode: 'light' | 'dark' | 'auto';
-    variables: {
-      [name: string]: string;
-    };
-  };
-
-  animations: string[]; // Animation effects
-
-  // Advanced Options
-  plugins: PluginConfig[]; // Plugin configurations
-  exclude: string[]; // Files to exclude
-  include: string[]; // Files to include (overrides exclude)
-
-  // Error Handling
-  errorHandling: {
-    strategy: 'continue' | 'stop' | 'retry';
-    maxRetries: number;
-    timeout: number;
-  };
-
-  // Performance Settings
-  performance: {
-    optimization: 'fast' | 'balanced' | 'maximum';
-    memoryLimit: number; // Memory limit in MB
-    cacheTimeout: number; // Cache timeout in ms
-  };
-
-  // Output Customization
-  outputConfig: {
-    naming: 'kebab' | 'pascal' | 'camel';
-    extension: string; // File extension override
-    directory: string; // Output directory structure
-  };
-
-  // Framework-specific configurations
-  react?: ReactConfig;
-  vue?: VueConfig;
-  angular?: AngularConfig;
-}
-```
-
-**✅ All 28 configuration properties are fully implemented and tested**
-
-### **Configuration Validation**
-
-SVGER-CLI includes comprehensive configuration validation to ensure all settings are correct:
-
-```bash
-# Validate current configuration
-svger-cli config --validate
-
-# Show detailed configuration analysis
-svger-cli config --show
-
-# Test configuration with sample files
-svger-cli build --dry-run --src ./test-svg --out ./test-output
-```
-
-**Validation Features:**
-
-- ✅ **Type Safety**: All configuration options are type-checked
-- ✅ **Framework Compatibility**: Validates framework-specific options
-- ✅ **Performance Settings**: Ensures optimal performance configuration
-- ✅ **Path Validation**: Verifies source and output directories
-- ✅ **Plugin Validation**: Checks plugin compatibility and options
-
-### **Example Configuration Files**
-
-A comprehensive example configuration is included with detailed explanations:
-
-```bash
-# Copy example configuration
-cp .svgerconfig.example.json .svgerconfig.json
-
-# Initialize with interactive setup
-svger-cli init --interactive
-```
-
-The example file includes all 28 configuration options with documentation and examples for React,
-Vue, Angular, and other frameworks.
-
-### **Framework-Specific Options**
-
-#### **React Configuration**
-
-```json
-{
-  "framework": "react",
-  "react": {
-    "componentType": "functional",
-    "forwardRef": true,
-    "memo": false,
-    "propsInterface": "SVGProps",
-    "styledComponents": true,
-    "cssModules": false
-  }
-}
-```
-
-#### **Vue Configuration**
-
-```json
-{
-  "framework": "vue",
-  "vue": {
-    "api": "composition",
-    "setup": true,
-    "typescript": true,
-    "scoped": true,
-    "cssVariables": true
-  }
-}
-```
-
-#### **Angular Configuration**
-
-```json
-{
-  "framework": "angular",
-  "angular": {
-    "standalone": true,
-    "signals": true,
-    "changeDetection": "OnPush",
-    "encapsulation": "Emulated"
-  }
-}
-```
-
----
-
-## 📊 **Performance Optimization**
-
-### **Benchmarks vs Competitors**
-
-| **Operation**           | **SVGER v2.0** | **SVGR** | **Improvement** |
-| ----------------------- | -------------- | -------- | --------------- |
-| Single file (100KB SVG) | 15ms           | 25ms     | **40% faster**  |
-| Batch (100 files)       | 850ms          | 1,450ms  | **70% faster**  |
-| Memory (1000 files)     | 45MB           | 120MB    | **62% less**    |
-| Bundle size             | 2.1MB          | 18.7MB   | **89% smaller** |
-| Startup time            | 120ms          | 340ms    | **65% faster**  |
-
-### **Performance Best Practices**
-
-#### **Batch Processing Optimization**
-
-```bash
-# Optimal batch processing
-svger-cli build \
-  --src ./icons \
-  --out ./components \
-  --parallel \
-  --batch-size 15 \
-  --max-concurrency 4 \
-  --cache \
-  --performance
-```
-
-#### **Memory Management**
-
-```typescript
-// Monitor memory usage
-import { performanceEngine } from 'svger-cli';
-
-const monitor = setInterval(() => {
-  const usage = performanceEngine.monitorMemoryUsage();
-  if (usage.heapUsed > 500) {
-    console.warn('High memory usage detected');
-    performanceEngine.clearCache();
-  }
-}, 5000);
-```
-
-#### **Cache Configuration**
-
-```json
-{
-  "performance": {
-    "cache": true,
-    "cacheTimeout": 300000,
-    "memoryLimit": 512
-  }
-}
-```
-
----
-
-## 🧪 **Testing & Quality Assurance**
-
-### **Component Testing**
-
-Generated components include comprehensive testing utilities:
-
-```typescript
-// Generated React component test
-import { render, screen } from '@testing-library/react';
-import { IconName } from './IconName';
-
-describe('IconName', () => {
-  it('renders with default props', () => {
-    render(<IconName />);
-    const svg = screen.getByRole('img', { hidden: true });
-    expect(svg).toBeInTheDocument();
-  });
-
-  it('accepts custom props', () => {
-    render(<IconName width={32} height={32} fill="red" />);
-    const svg = screen.getByRole('img', { hidden: true });
-    expect(svg).toHaveAttribute('width', '32');
-    expect(svg).toHaveAttribute('height', '32');
-    expect(svg).toHaveAttribute('fill', 'red');
-  });
-});
-```
-
-### **Integration Testing**
-
-```bash
-# Run integration tests
-npm run test:integration
-
-# Test specific framework
-npm run test:framework:react
-npm run test:framework:vue
-npm run test:framework:angular
-```
-
-### **Performance Testing**
-
-```bash
-# Run performance benchmarks
-svger-cli performance --benchmark
-
-# Memory leak testing
-svger-cli performance --memory --duration 60s
-
-# Load testing
-svger-cli performance --load --files 1000
-```
-
----
-
-## 🚀 **Production Deployment**
-
-### **CI/CD Integration**
-
-#### **GitHub Actions**
-
-```yaml
-name: SVG Component Generation
-on:
-  push:
-    paths: ['src/assets/svg/**']
-
-jobs:
-  generate-components:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-
-      - name: Install SVGER-CLI
-        run: npm install -g svger-cli@2.0.5
-
-      - name: Generate Components
-        run: |
-          svger-cli build \
-            --src ./src/assets/svg \
-            --out ./src/components/icons \
-            --framework react \
-            --typescript \
-            --parallel \
-            --performance
-
-      - name: Commit Generated Components
-        run: |
-          git config --local user.email "action@github.com"
-          git config --local user.name "GitHub Action"
-          git add src/components/icons/
-          git commit -m "🤖 Auto-generated SVG components" || exit 0
-          git push
-```
-
-#### **Jenkins Pipeline**
-
-```groovy
-pipeline {
-  agent any
-
-  stages {
-    stage('Generate SVG Components') {
-      steps {
-        sh '''
-          npm install -g svger-cli@2.0.5
-          svger-cli build \
-            --src ./assets/svg \
-            --out ./components \
-            --framework vue \
-            --composition \
-            --typescript \
-            --cache \
-            --performance
-        '''
-      }
-    }
-  }
-}
-```
-
-### **Docker Integration**
-
-```dockerfile
-FROM node:18-alpine
-
-# Install SVGER-CLI globally
-RUN npm install -g svger-cli@2.0.5
-
-# Set working directory
-WORKDIR /app
-
-# Copy SVG files
-COPY src/assets/svg ./src/assets/svg
-
-# Generate components
-RUN svger-cli build \
-    --src ./src/assets/svg \
-    --out ./src/components/icons \
-    --framework react \
-    --typescript \
-    --parallel
-
-# Copy generated components
-COPY src/components ./src/components
-```
-
----
-
-## 🔌 **Plugin Development**
-
-### **Creating Custom Plugins**
-
-```typescript
-import { Plugin } from 'svger-cli';
-
-const customOptimizer: Plugin = {
-  name: 'custom-svg-optimizer',
-  version: '1.0.0',
-
-  process: async (content: string, options?: any) => {
-    // Custom SVG processing logic
-    const optimized = content
-      .replace(/fill="none"/g, '')
-      .replace(/stroke="currentColor"/g, 'stroke="inherit"');
-
-    return optimized;
-  },
-
-  validate: (options?: any) => {
-    return options && typeof options.level === 'string';
-  },
-};
-
-// Register plugin
-import { pluginManager } from 'svger-cli';
-pluginManager.registerPlugin(customOptimizer);
-```
-
-### **Plugin Configuration**
-
-```json
-{
-  "plugins": [
-    {
-      "name": "svg-optimizer",
-      "options": {
-        "level": "balanced"
-      }
-    },
-    {
-      "name": "custom-svg-optimizer",
-      "options": {
-        "level": "maximum"
-      }
-    }
-  ]
-}
-```
-
----
-
-## 🔍 **Troubleshooting & FAQ**
-
-### **Common Issues**
-
-#### **Memory Issues**
-
-```bash
-# If experiencing memory issues with large batches
-svger-cli build \
-  --batch-size 5 \
-  --max-concurrency 2 \
-  --src ./icons \
-  --out ./components
-```
-
-#### **Performance Issues**
-
-```bash
-# Enable performance monitoring
-svger-cli performance --analyze
-
-# Clear cache if needed
-svger-cli clean --cache
-
-# Optimize configuration
-svger-cli performance --optimize
-```
-
-#### **TypeScript Errors**
-
-```bash
-# Validate configuration
-svger-cli config --validate
-
-# Regenerate with strict TypeScript
-svger-cli build --typescript --strict
-```
-
-### **Debugging**
-
-```bash
-# Enable verbose logging
-svger-cli build --verbose --src ./icons --out ./components
-
-# Debug specific framework
-svger-cli build --framework vue --debug
-
-# Performance debugging
-svger-cli build --performance --memory
-```
-
----
-
-## 📚 **Migration Guide**
-
-### **From SVGR**
-
-```bash
-# Install SVGER-CLI
-npm uninstall @svgr/webpack @svgr/cli
-npm install -g svger-cli@2.0.5
-
-# Migrate configuration
-svger-cli init --framework react --typescript
-
-# Build components
-svger-cli build --src ./assets --out ./components
-```
-
-### **From v1.x**
-
-```bash
-# Upgrade to v2.0
-npm install -g svger-cli@2.0.5
-
-# Migrate configuration
-svger-cli config --migrate
-
-# Rebuild with new features
-svger-cli build --framework react --responsive --theme dark
-```
-
----
-
-## 🤝 **Contributing & Support**
-
-### **Contributing**
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
-### **Support**
-
-- 📧 **Email**: navidrezadoost07@gmail.com
-- 🐛 **Issues**: [GitHub Issues](https://github.com/faezemohades/svger-cli/issues)
-- 📖 **Documentation**: [docs.svger-cli.com](https://docs.svger-cli.com)
-
----
-
-## 📄 **License & Acknowledgements**
-
-### **License**
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-### **Acknowledgements**
-
-This project was developed through the collaborative efforts of:
-
-- **🏗️ Architecture Design**: [ADR-001](./docs/ADR-SVG-INTRGRATION-METHODS-001.adr.md) authored by
-  **Engineer Navid Rezadoost**
-- **📋 Technical Requirements**:
-  [TDR-001](https://docs.google.com/document/d/1b04_V01xOvLiSMzuPdaRynANlnt2wYdJ_vjs9MAqtn4/edit?tab=t.0)
-  prepared by **Ehsan Jafari**
-- **💻 Implementation**: **Navid Rezadoost** - Faeze Mohades Lead developer and package maintainer
-- **🏢 Enterprise Architecture**: SVGER Development Team
-
-Their guidance and documentation on SVG integration methods in React, Vue, and other frameworks were
-instrumental in shaping the design and functionality of the SVGER-CLI v2.0.
-
-### **Special Thanks**
-
-- The open-source community for inspiration and feedback
-- Framework maintainers for excellent documentation
-- Beta testers who provided valuable insights
-- Enterprise customers who drove advanced feature requirements
-
----
-
-**© 2025 SVGER-CLI Development Team. Built with ❤️ for the developer community.**
+# SVGER-CLI v2.0.7 - Enterprise SVG Processing Framework
+
+[![npm version](https://badge.fury.io/js/svger-cli.svg)](https://badge.fury.io/js/svger-cli)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![Zero Dependencies](https://img.shields.io/badge/Dependencies-Zero-green.svg)](https://www.npmjs.com/package/svger-cli)
+
+> **The most advanced, zero-dependency SVG to component converter, now with first-class support for
+> 9+ UI frameworks including React Native. Enjoy enterprise-grade performance, auto-generated
+> exports, and a unified workflow for your entire design system.**
+
+---
+
+## 📖 **Table of Contents**
+
+### 🚀 **Getting Started**
+
+- [📦 Installation](#-installation)
+- [🚀 Quick Start: Your First Conversion](#-quick-start-your-first-conversion)
+- [💡 Why SVGER-CLI?](#-why-svger-cli-the-zero-dependency-advantage)
+
+### 📚 **Core Documentation**
+
+- [📊 Feature Comparison Matrix](#-feature-comparison-matrix)
+- [🌐 Multi-Framework Usage Guide](#-multi-framework-usage-guide)
+  - [React](#react)
+  - [React Native](#react-native)
+  - [Vue 3](#vue-3)
+  - [Angular](#angular)
+  - [Svelte](#svelte)
+  - [Solid](#solid)
+  - [Lit](#lit)
+  - [Preact](#preact)
+  - [Vanilla JS/TS](#vanilla-jsts)
+- [🔧 Comprehensive CLI Reference](#-comprehensive-cli-reference)
+
+### 🎨 **Advanced Features**
+
+- [💻 Usage Examples: From Simple to Complex](#-usage-examples-from-simple-to-complex)
+- [🎨 Advanced Styling & Theming](#-advanced-styling--theming)
+  - [Responsive Design System](#responsive-design-system)
+  - [Theme System](#theme-system)
+  - [Animation System](#animation-system)
+- [💻 Programmatic API](#-programmatic-api)
+- [🔧 Configuration Reference](#-configuration-reference)
+
+### ⚡ **Performance & Deployment**
+
+- [⚡ Performance Optimization](#-performance-optimization)
+  - [Benchmarks vs Competitors](#benchmarks-vs-competitors)
+  - [Performance Best Practices](#performance-best-practices)
+- [🚀 Production Deployment](#-production-deployment)
+  - [CI/CD Integration](#cicd-integration)
+  - [Docker Integration](#docker-integration)
+
+### 🧪 **Testing & Quality**
+
+- [🧪 Testing & Quality Assurance](#-testing--quality-assurance)
+- [🔌 Plugin Development](#-plugin-development)
+
+### 🆘 **Support & Resources**
+
+- [🔍 Troubleshooting & FAQ](#-troubleshooting--faq)
+- [📚 Migration Guide](#-migration-guide)
+- [🤝 Contributing & Support](#-contributing--support)
+
+---
+
+## ⚡ **Quick Jump Navigation**
+
+**Looking for something specific?**
+
+| **I want to...**                      | **Go to section**                                               |
+| ------------------------------------- | --------------------------------------------------------------- |
+| 🎯 Get started immediately            | [Quick Start](#-quick-start-your-first-conversion)              |
+| 📦 Install the package                | [Installation](#-installation)                                  |
+| 🤔 Understand why SVGER-CLI is better | [Why SVGER-CLI?](#-why-svger-cli-the-zero-dependency-advantage) |
+| ⚡ Compare features with competitors  | [Feature Comparison](#-feature-comparison-matrix)               |
+| 🚀 Convert SVGs to React components   | [React Guide](#react)                                           |
+| � Use with React Native               | [React Native Guide](#react-native)                             |
+| �💚 Use with Vue                      | [Vue Guide](#vue-3)                                             |
+| 🅰️ Use with Angular                   | [Angular Guide](#angular)                                       |
+| 🌪️ Use with Svelte                    | [Svelte Guide](#svelte)                                         |
+| 📖 Learn all CLI commands             | [CLI Reference](#-comprehensive-cli-reference)                  |
+| 💻 Use the programmatic API           | [API Reference](#-programmatic-api)                             |
+| 🎨 Configure styling & theming        | [Styling Guide](#-advanced-styling--theming)                    |
+| ⚡ Optimize performance               | [Performance Guide](#-performance-optimization)                 |
+| 🚀 Deploy to production               | [Deployment Guide](#-production-deployment)                     |
+| 🐳 Use with Docker                    | [Docker Setup](#docker-integration)                             |
+| 🧪 Test my components                 | [Testing Guide](#-testing--quality-assurance)                   |
+| 🔧 Configure everything               | [Configuration Reference](#-configuration-reference)            |
+| 🔌 Create custom plugins              | [Plugin Development](#-plugin-development)                      |
+| 🐛 Fix issues                         | [Troubleshooting](#-troubleshooting--faq)                       |
+| 📚 Migrate from another tool          | [Migration Guide](#-migration-guide)                            |
+
+---
+
+---
+
+## 🌟 **Key Features Overview**
+
+### **✨ Auto-Generated index.ts Exports (Enhanced)**
+
+Automatically generates clean index.ts files with **unified export pattern** for maximum
+flexibility:
+
+```typescript
+// Auto-generated in your output directory
+// Named exports for tree-shaking
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowRight } from './ArrowRight';
+
+// Grouped named exports
+export { ArrowLeft, ArrowRight };
+
+// Default export for convenience
+export default { ArrowLeft, ArrowRight };
+```
+
+**Import flexibility:**
+
+```typescript
+// Named imports (tree-shaking friendly)
+import { ArrowLeft, ArrowRight } from './components';
+
+// Namespace import
+import * as Icons from './components';
+
+// Default import
+import Icons from './components';
+const { ArrowLeft } = Icons;
+```
+
+### **🎯 Enhanced Props & Styling**
+
+Components now support comprehensive prop interfaces with React.forwardRef:
+
+```typescript
+<Icon className="custom-class" style={{ color: 'red' }} size={32} />
+```
+
+### **🔒 Comprehensive File Protection**
+
+Lock files to prevent accidental modifications during builds:
+
+```bash
+svger-cli lock ./icons/critical-logo.svg  # Protects during all operations
+```
+
+---
+
+## 📊 **Feature Comparison Matrix**
+
+| **Feature**                | **SVGER-CLI v2.0.7**       | **SVGR (React)** | **vite-svg-loader (Vue)** | **svelte-svg (Svelte)** | **SVGO**            |
+| -------------------------- | -------------------------- | ---------------- | ------------------------- | ----------------------- | ------------------- |
+| **Dependencies**           | ✅ **Zero**                | ❌ 15+ deps      | ❌ 9+ deps                | ❌ 7+ deps              | ❌ 8+ deps          |
+| **Auto-Generated Exports** | ✅ **Full Support**        | ❌ Manual        | ❌ Manual                 | ❌ Manual               | ❌ N/A              |
+| **Framework Support**      | ✅ **9+ Frameworks**       | ❌ React only    | ❌ Vue only               | ❌ Svelte only          | ❌ N/A              |
+| **React Native Support**   | ✅ **Full Native**         | ❌ None          | ❌ None                   | ❌ None                 | ❌ N/A              |
+| **Advanced Props**         | ✅ **Full Support**        | ❌ Basic         | ❌ Basic                  | ❌ Basic                | ❌ N/A              |
+| **File Protection**        | ✅ **Lock System**         | ❌ None          | ❌ None                   | ❌ None                 | ❌ None             |
+| **Performance**            | ✅ **Up to 85% Faster**    | Standard         | Slow                      | Standard                | Fast (Optimization) |
+| **Bundle Size**            | ✅ **~2MB**                | ~18.7MB          | ~14.2MB                   | ~11.8MB                 | ~12.3MB             |
+| **Enterprise Features**    | ✅ **Full Suite**          | ❌ Limited       | ❌ None                   | ❌ None                 | ❌ None             |
+| **TypeScript**             | ✅ **Native**              | Plugin           | Limited                   | Limited                 | None                |
+| **Batch Processing**       | ✅ **Optimized**           | Basic            | None                      | None                    | None                |
+| **Plugin System**          | ✅ **Extensible**          | Limited          | None                      | None                    | None                |
+| **Configuration Schema**   | ✅ **28 Options**          | ❌ 8 Options     | ❌ 4 Options              | ❌ 3 Options            | ❌ N/A              |
+| **Responsive Design**      | ✅ **Built-in**            | ❌ Manual        | ❌ None                   | ❌ None                 | ❌ None             |
+| **Theme System**           | ✅ **Auto Dark/Light**     | ❌ Manual        | ❌ None                   | ❌ None                 | ❌ None             |
+| **Error Handling**         | ✅ **Advanced Strategies** | ❌ Basic         | ❌ Basic                  | ❌ Basic                | ❌ Basic            |
+
+---
+
+## � **Why SVGER-CLI? The Zero-Dependency Advantage**
+
+In a landscape cluttered with heavy, single-framework tools, **SVGER-CLI** stands alone. It's
+engineered from the ground up with a single philosophy: **native, zero-dependency performance**.
+
+- **No `node_modules` bloat**: Drastically smaller footprint.
+- **Faster installs**: Perfect for CI/CD and rapid development.
+- **Unmatched security**: No third-party vulnerabilities.
+- **Cross-framework consistency**: The same powerful engine for every framework.
+
+This lean approach delivers up to **85% faster processing** and a **90% smaller bundle size**
+compared to alternatives that rely on dozens of transitive dependencies.
+
+---
+
+## 📦 **Installation**
+
+Install globally for access to the `svger-cli` command anywhere.
+
+```bash
+npm install -g svger-cli
+```
+
+Or add it to your project's dev dependencies:
+
+```bash
+npm install --save-dev svger-cli
+```
+
+---
+
+## 🚀 **Quick Start: Your First Conversion**
+
+1.  **Place your SVGs** in a directory (e.g., `./my-svgs`).
+2.  **Run the build command**:
+
+    ```bash
+    # Convert all SVGs to React components (default)
+    svger-cli build ./my-svgs ./components
+    ```
+
+3.  **Use your components**: An `index.ts` is auto-generated for easy imports.
+
+    ```tsx
+    // Your app's component
+    import { MyIcon, AnotherIcon } from './components';
+
+    function App() {
+      return (
+        <div>
+          <MyIcon className="text-blue-500" />
+          <AnotherIcon size={32} style={{ color: 'red' }} />
+        </div>
+      );
+    }
+    ```
+
+---
+
+## 🌐 **Multi-Framework Usage Guide**
+
+SVGER-CLI brings a unified, powerful experience to every major framework. Select your target with
+the `--framework` flag.
+
+### **React**
+
+Generate optimized React components with `forwardRef`, `memo`, and TypeScript interfaces.
+
+```bash
+svger-cli build ./my-svgs ./react-components --framework react
+```
+
+**Generated React Component (`.tsx`):**
+
+```tsx
+import * as React from 'react';
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const MyIcon: React.FC<IconProps> = React.memo(
+  React.forwardRef<SVGSVGElement, IconProps>(({ size = 24, ...props }, ref) => (
+    <svg ref={ref} width={size} height={size} viewBox="0 0 24 24" {...props}>
+      {/* SVG content */}
+    </svg>
+  ))
+);
+
+MyIcon.displayName = 'MyIcon';
+export default MyIcon;
+```
+
+### **React Native**
+
+Generate optimized React Native components with `react-native-svg` integration.
+
+```bash
+svger-cli build ./my-svgs ./react-native-components --framework react-native
+```
+
+**Generated React Native Component (`.tsx`):**
+
+```tsx
+import React from 'react';
+import Svg, {
+  Path,
+  Circle,
+  Rect,
+  Line,
+  Polygon,
+  Polyline,
+  Ellipse,
+  G,
+  Defs,
+  ClipPath,
+  LinearGradient,
+  RadialGradient,
+  Stop,
+} from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+
+export interface MyIconProps extends SvgProps {
+  size?: number | string;
+  color?: string;
+}
+
+const MyIcon = React.forwardRef<Svg, MyIconProps>(({ size, color, ...props }, ref) => {
+  const dimensions = size
+    ? { width: size, height: size }
+    : {
+        width: props.width || 24,
+        height: props.height || 24,
+      };
+
+  return (
+    <Svg
+      ref={ref}
+      viewBox="0 0 24 24"
+      width={dimensions.width}
+      height={dimensions.height}
+      fill={color || props.fill || 'currentColor'}
+      {...props}
+    >
+      {/* SVG content automatically converted to React Native SVG components */}
+      <Path d="..." />
+    </Svg>
+  );
+});
+
+MyIcon.displayName = 'MyIcon';
+export default MyIcon;
+```
+
+**Key Features:**
+
+- ✅ Automatic conversion of SVG elements to React Native SVG components
+- ✅ Proper prop conversion (strokeWidth, strokeLinecap, fillRule, etc.)
+- ✅ TypeScript support with SvgProps interface
+- ✅ Size and color prop support
+- ✅ ForwardRef implementation for advanced usage
+- ✅ Compatible with `react-native-svg` package
+
+**Installation Requirements:**
+
+```bash
+npm install react-native-svg
+```
+
+### **Vue 3**
+
+Choose between **Composition API** (`--composition`) or **Options API**.
+
+```bash
+# Composition API with <script setup>
+svger-cli build ./my-svgs ./vue-components --framework vue --composition
+
+# Options API
+svger-cli build ./my-svgs ./vue-components --framework vue
+```
+
+**Generated Vue Component (`.vue`):**
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  size?: number | string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+});
+
+const sizeValue = computed(() => `${props.size}px`);
+</script>
+
+<template>
+  <svg :width="sizeValue" :height="sizeValue" viewBox="0 0 24 24" v-bind="$attrs">
+    {/* SVG content */}
+  </svg>
+</template>
+```
+
+### **Angular**
+
+Generate **standalone components** (`--standalone`) or traditional module-based components.
+
+```bash
+# Standalone component (recommended)
+svger-cli build ./my-svgs ./angular-components --framework angular --standalone
+
+# Module-based component
+svger-cli build ./my-svgs ./angular-components --framework angular
+```
+
+**Generated Angular Component (`.component.ts`):**
+
+```typescript
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-my-icon',
+  standalone: true,
+  template: `
+    <svg
+      [attr.width]="size"
+      [attr.height]="size"
+      viewBox="0 0 24 24"
+    >
+      {/* SVG content */}
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyIconComponent {
+  @Input() size: number | string = 24;
+}
+```
+
+### **Svelte**
+
+Create native Svelte components with TypeScript props.
+
+```bash
+svger-cli build ./my-svgs ./svelte-components --framework svelte
+```
+
+**Generated Svelte Component (`.svelte`):**
+
+```html
+<script lang="ts">
+  export let size: number | string = 24;
+</script>
+
+<svg width="{size}" height="{size}" viewBox="0 0 24 24" {...$$restProps}>{/* SVG content */}</svg>
+```
+
+### **Solid**
+
+Generate efficient SolidJS components.
+
+```bash
+svger-cli build ./my-svgs ./solid-components --framework solid
+```
+
+**Generated Solid Component (`.tsx`):**
+
+```tsx
+import type { Component, JSX } from 'solid-js';
+
+interface IconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
+  size?: number | string;
+}
+
+const MyIcon: Component<IconProps> = props => {
+  return (
+    <svg width={props.size || 24} height={props.size || 24} viewBox="0 0 24 24" {...props}>
+      {/* SVG content */}
+    </svg>
+  );
+};
+
+export default MyIcon;
+```
+
+### **Lit**
+
+Generate standard Web Components using the Lit library.
+
+```bash
+svger-cli build ./my-svgs ./lit-components --framework lit
+```
+
+**Generated Lit Component (`.ts`):**
+
+```ts
+import { LitElement, html, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('my-icon')
+export class MyIcon extends LitElement {
+  @property({ type: Number })
+  size = 24;
+
+  render() {
+    return html`
+      <svg width=${this.size} height=${this.size} viewBox="0 0 24 24">
+        ${svg`{/* SVG content */}`}
+      </svg>
+    `;
+  }
+}
+```
+
+### **Preact**
+
+Generate lightweight Preact components.
+
+```bash
+svger-cli build ./my-svgs ./preact-components --framework preact
+```
+
+**Generated Preact Component (`.tsx`):**
+
+```tsx
+import { h } from 'preact';
+import type { FunctionalComponent } from 'preact';
+
+interface IconProps extends h.JSX.SVGAttributes<SVGSVGElement> {
+  size?: number | string;
+}
+
+const MyIcon: FunctionalComponent<IconProps> = ({ size = 24, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+      {/* SVG content */}
+    </svg>
+  );
+};
+
+export default MyIcon;
+```
+
+### **Vanilla JS/TS**
+
+Generate framework-agnostic factory functions for use anywhere.
+
+```bash
+svger-cli build ./my-svgs ./vanilla-components --framework vanilla
+```
+
+**Generated Vanilla Component (`.ts`):**
+
+```ts
+interface IconOptions {
+  size?: number | string;
+  [key: string]: any;
+}
+
+export function createMyIcon(options: IconOptions = {}): SVGSVGElement {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const size = options.size || 24;
+
+  svg.setAttribute('width', String(size));
+  svg.setAttribute('height', String(size));
+  svg.setAttribute('viewBox', '0 0 24 24');
+
+  svg.innerHTML = `{/* SVG content */}`;
+  return svg;
+}
+```
+
+---
+
+## 🔧 **Comprehensive CLI Reference**
+
+### **📋 CLI Commands Overview**
+
+| Command                 | Purpose                    | Quick Link                             |
+| ----------------------- | -------------------------- | -------------------------------------- |
+| `svger-cli init`        | Setup configuration        | [Init](#1-initialize-command)          |
+| `svger-cli build`       | Convert SVGs to components | [Build](#2-build-command)              |
+| `svger-cli watch`       | Monitor & auto-generate    | [Watch](#3-watch-command)              |
+| `svger-cli generate`    | Process specific files     | [Generate](#4-generate-command)        |
+| `svger-cli lock`        | Protect files              | [Lock/Unlock](#5-lockun lock-commands) |
+| `svger-cli config`      | Manage settings            | [Config](#6-config-command)            |
+| `svger-cli clean`       | Remove generated files     | [Clean](#7-clean-command)              |
+| `svger-cli performance` | Analyze performance        | [Performance](#8-performance-command)  |
+
+---
+
+### **1️⃣ Initialize Command**
+
+Set up SVGER-CLI configuration for your project.
+
+```bash
+svger-cli init [options]
+```
+
+**Options:**
+
+- `--framework <type>` - Target framework (react|vue|svelte|angular|solid|preact|lit|vanilla)
+- `--typescript` - Enable TypeScript generation (default: true)
+- `--src <path>` - Source directory for SVG files (default: ./src/assets/svg)
+- `--out <path>` - Output directory for components (default: ./src/components/icons)
+- `--interactive` - Interactive configuration wizard
+
+**Examples:**
+
+```bash
+# Initialize with React + TypeScript
+svger-cli init --framework react --typescript
+
+# Initialize with Vue Composition API
+svger-cli init --framework vue --composition --typescript
+
+# Interactive setup
+svger-cli init --interactive
+```
+
+**Generated Configuration (`.svgerconfig.json`):**
+
+```json
+{
+  "source": "./src/assets/svg",
+  "output": "./src/components/icons",
+  "framework": "react",
+  "typescript": true,
+  "componentType": "functional",
+
+  "watch": false,
+  "parallel": true,
+  "batchSize": 10,
+  "maxConcurrency": 4,
+  "cache": true,
+
+  "defaultWidth": 24,
+  "defaultHeight": 24,
+  "defaultFill": "currentColor",
+  "defaultStroke": "none",
+  "defaultStrokeWidth": 1,
+
+  "exclude": ["logo.svg"],
+  "include": ["icons/**", "illustrations/**"],
+
+  "styleRules": {
+    "fill": "inherit",
+    "stroke": "none",
+    "strokeWidth": "1",
+    "opacity": "1"
+  },
+
+  "responsive": {
+    "breakpoints": ["sm", "md", "lg", "xl"],
+    "values": {
+      "width": ["16px", "20px", "24px", "32px"],
+      "height": ["16px", "20px", "24px", "32px"]
+    }
+  },
+
+  "theme": {
+    "mode": "auto",
+    "variables": {
+      "primary": "currentColor",
+      "secondary": "#6b7280",
+      "accent": "#3b82f6",
+      "background": "#ffffff",
+      "foreground": "#000000"
+    }
+  },
+
+  "animations": ["fadeIn", "slideIn", "bounce"],
+
+  "plugins": [
+    {
+      "name": "svg-optimizer",
+      "options": {
+        "removeComments": true,
+        "removeMetadata": true
+      }
+    }
+  ],
+
+  "errorHandling": {
+    "strategy": "continue",
+    "maxRetries": 3,
+    "timeout": 30000
+  },
+
+  "performance": {
+    "optimization": "balanced",
+    "memoryLimit": 512,
+    "cacheTimeout": 3600000
+  },
+
+  "outputConfig": {
+    "naming": "pascal",
+    "extension": "tsx",
+    "directory": "./src/components/icons"
+  },
+
+  "react": {
+    "componentType": "functional",
+    "forwardRef": true,
+    "memo": false,
+    "propsInterface": "SVGProps",
+    "styledComponents": false,
+    "cssModules": false
+  },
+
+  "vue": {
+    "api": "composition",
+    "setup": true,
+    "typescript": true,
+    "scoped": true,
+    "cssVariables": true
+  },
+
+  "angular": {
+    "standalone": true,
+    "signals": true,
+    "changeDetection": "OnPush",
+    "encapsulation": "Emulated"
+  }
+}
+```
+
+### **2️⃣ Build Command**
+
+Convert SVG files to framework components with advanced processing.
+
+```bash
+svger-cli build [options]
+```
+
+**Core Options:**
+
+- `--src <path>` - Source directory containing SVG files
+- `--out <path>` - Output directory for generated components
+- `--framework <type>` - Target framework for component generation
+- `--typescript` - Generate TypeScript components (default: true)
+- `--clean` - Clean output directory before building
+
+**Performance Options:**
+
+- `--parallel` - Enable parallel processing (default: true)
+- `--batch-size <number>` - Number of files per batch (default: 10)
+- `--max-concurrency <number>` - Maximum concurrent processes (default: CPU cores)
+- `--cache` - Enable processing cache for faster rebuilds
+- `--performance` - Display performance metrics
+
+**Framework-Specific Options:**
+
+- `--composition` - Use Vue Composition API (Vue only)
+- `--setup` - Use Vue script setup syntax (Vue only)
+- `--standalone` - Generate Angular standalone components (Angular only)
+- `--signals` - Use signals for state management (Solid/Angular)
+- `--forward-ref` - Generate React forwardRef components (React only)
+
+**Styling Options:**
+
+- `--responsive` - Enable responsive design utilities
+- `--theme <mode>` - Apply theme mode (light|dark|auto)
+- `--styled-components` - Generate styled-components (React/Solid)
+- `--css-modules` - Enable CSS Modules support
+
+**Examples:**
+
+```bash
+# Basic build
+svger-cli build --src ./icons --out ./components
+
+# Advanced React build with styling
+svger-cli build \
+  --src ./icons \
+  --out ./components \
+  --framework react \
+  --typescript \
+  --forward-ref \
+  --styled-components \
+  --responsive \
+  --theme dark
+
+# High-performance Vue build
+svger-cli build \
+  --src ./icons \
+  --out ./components \
+  --framework vue \
+  --composition \
+  --setup \
+  --parallel \
+  --batch-size 20 \
+  --cache \
+  --performance
+
+# Angular standalone components
+svger-cli build \
+  --src ./icons \
+  --out ./components \
+  --framework angular \
+  --standalone \
+  --typescript \
+  --signals
+
+# Vanilla TypeScript with optimization
+svger-cli build \
+  --src ./icons \
+  --out ./components \
+  --framework vanilla \
+  --typescript \
+  --optimization maximum
+```
+
+### **3️⃣ Watch Command**
+
+Monitor directories for SVG changes and auto-generate components.
+
+```bash
+svger-cli watch [options]
+```
+
+**Options:**
+
+- All `build` command options
+- `--debounce <ms>` - Debounce time for file changes (default: 300ms)
+- `--ignore <patterns>` - Ignore file patterns (glob syntax)
+- `--verbose` - Detailed logging of file changes
+
+**Examples:**
+
+```bash
+# Basic watch mode
+svger-cli watch --src ./icons --out ./components
+
+# Advanced watch with debouncing
+svger-cli watch \
+  --src ./icons \
+  --out ./components \
+  --framework react \
+  --debounce 500 \
+  --ignore "**/*.tmp" \
+  --verbose
+
+# Production watch mode
+svger-cli watch \
+  --src ./icons \
+  --out ./components \
+  --framework vue \
+  --composition \
+  --parallel \
+  --cache \
+  --performance
+```
+
+### **4️⃣ Generate Command**
+
+Process specific SVG files with precise control.
+
+```bash
+svger-cli generate <input> [options]
+```
+
+**Arguments:**
+
+- `<input>` - SVG file path or glob pattern
+
+**Options:**
+
+- All `build` command options
+- `--name <string>` - Override component name
+- `--template <type>` - Component template (functional|class|forwardRef|memo)
+
+**Examples:**
+
+```bash
+# Generate single component
+svger-cli generate ./icons/heart.svg --out ./components --name HeartIcon
+
+# Generate with custom template
+svger-cli generate ./icons/star.svg \
+  --out ./components \
+  --framework react \
+  --template forwardRef \
+  --typescript
+
+# Generate multiple files with glob
+svger-cli generate "./icons/social-*.svg" \
+  --out ./components/social \
+  --framework vue \
+  --composition
+
+# Generate with advanced styling
+svger-cli generate ./icons/logo.svg \
+  --out ./components \
+  --name CompanyLogo \
+  --styled-components \
+  --responsive \
+  --theme dark
+```
+
+### **5️⃣ Lock/Unlock Commands**
+
+Manage file protection during batch operations.
+
+```bash
+svger-cli lock <files...>
+svger-cli unlock <files...>
+```
+
+**Examples:**
+
+```bash
+# Lock specific files
+svger-cli lock ./icons/logo.svg ./icons/brand.svg
+
+# Lock pattern
+svger-cli lock "./icons/brand-*.svg"
+
+# Unlock files
+svger-cli unlock ./icons/logo.svg
+
+# Unlock all
+svger-cli unlock --all
+```
+
+### **6️⃣ Config Command**
+
+Manage project configuration dynamically.
+
+```bash
+svger-cli config [options]
+```
+
+**Options:**
+
+- `--show` - Display current configuration
+- `--set <key=value>` - Set configuration value
+- `--get <key>` - Get specific configuration value
+- `--reset` - Reset to default configuration
+- `--validate` - Validate current configuration
+
+**Examples:**
+
+```bash
+# Show current config
+svger-cli config --show
+
+# Set configuration values
+svger-cli config --set framework=vue
+svger-cli config --set typescript=true
+svger-cli config --set "defaultWidth=32"
+svger-cli config --set "styleRules.fill=currentColor"
+
+# Get specific value
+svger-cli config --get framework
+
+# Reset configuration
+svger-cli config --reset
+
+# Validate configuration
+svger-cli config --validate
+```
+
+### **7️⃣ Clean Command**
+
+Remove generated components and clean workspace.
+
+```bash
+svger-cli clean [options]
+```
+
+**Options:**
+
+- `--out <path>` - Output directory to clean
+- `--cache` - Clear processing cache
+- `--logs` - Clear log files
+- `--all` - Clean everything (components, cache, logs)
+- `--dry-run` - Preview what would be cleaned
+
+**Examples:**
+
+```bash
+# Clean output directory
+svger-cli clean --out ./components
+
+# Clean cache only
+svger-cli clean --cache
+
+# Clean everything
+svger-cli clean --all
+
+# Preview clean operation
+svger-cli clean --all --dry-run
+```
+
+### **8️⃣ Performance Command**
+
+Analyze and optimize processing performance.
+
+```bash
+svger-cli performance [options]
+```
+
+**Options:**
+
+- `--analyze` - Analyze current project performance
+- `--benchmark` - Run performance benchmarks
+- `--memory` - Display memory usage statistics
+- `--cache-stats` - Show cache performance statistics
+- `--optimize` - Apply performance optimizations
+
+**Examples:**
+
+```bash
+# Analyze performance
+svger-cli performance --analyze
+
+# Run benchmarks
+svger-cli performance --benchmark
+
+# Memory analysis
+svger-cli performance --memory
+
+# Cache statistics
+svger-cli performance --cache-stats
+
+# Apply optimizations
+svger-cli performance --optimize
+```
+
+---
+
+## 💻 **Usage Examples: From Simple to Complex**
+
+### **Example Types & Complexity Levels**
+
+| Complexity      | Example                                                           | Purpose                | Best For              |
+| --------------- | ----------------------------------------------------------------- | ---------------------- | --------------------- |
+| 🟢 Beginner     | [Example 1](#-example-1-quick-start-simplest)                     | Basic SVG conversion   | Getting started       |
+| 🟡 Intermediate | [Example 2](#-example-2-production-setup-intermediate)            | Production-ready setup | Small to medium teams |
+| 🔴 Advanced     | [Example 3](#-example-3-enterprise-multi-framework-advanced)      | Multi-framework setup  | Enterprise projects   |
+| � Expert        | [Example 4](#-example-4-file-protection--team-workflows-advanced) | Team collaboration     | Large teams           |
+| ⚡ Performance  | [Example 5](#-example-5-performance-optimization-expert)          | Optimization           | Large-scale projects  |
+
+---
+
+### **🟢 Example 1: Quick Start (Simplest)**
+
+Get started in 30 seconds:
+
+```bash
+# Install globally
+npm install -g svger-cli
+
+# Convert SVGs to React components
+svger-cli build ./my-icons ./components
+
+# Use the auto-generated exports
+import { ArrowLeft, Home, User } from './components';
+
+function App() {
+  return (
+    <div>
+      <ArrowLeft />
+      <Home className="text-blue-500" />
+      <User size={32} style={{ color: 'red' }} />
+    </div>
+  );
+}
+```
+
+**What happens:**
+
+- ✅ All SVGs in `./my-icons` converted to React components
+- ✅ Auto-generated `index.ts` with clean exports
+- ✅ Components support `className`, `style`, `size` props
+- ✅ TypeScript interfaces automatically included
+
+---
+
+### **� Example 2: Production Setup (Intermediate)**
+
+Professional setup with configuration and optimization:
+
+```bash
+# Initialize with custom configuration
+svger-cli init --framework react --typescript --interactive
+
+# Generated .svgerconfig.json:
+{
+  "source": "./src/assets/icons",
+  "output": "./src/components/icons",
+  "framework": "react",
+  "typescript": true,
+  "forwardRef": true,
+  "parallel": true,
+  "batchSize": 15,
+  "responsive": {
+    "breakpoints": ["sm", "md", "lg"],
+    "values": {
+      "width": ["16px", "24px", "32px"]
+    }
+  }
+}
+
+# Build with optimizations
+svger-cli build --performance --cache
+
+# Start development mode
+svger-cli watch --debounce 500 --verbose
+```
+
+**Generated Components:**
+
+```typescript
+// Auto-generated: src/components/icons/ArrowLeft.tsx
+import React from 'react';
+
+interface ArrowLeftProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | 'sm' | 'md' | 'lg';
+}
+
+const ArrowLeft = React.forwardRef<SVGSVGElement, ArrowLeftProps>(
+  ({ size = 24, className, style, ...props }, ref) => {
+    const sizeValue = typeof size === 'string'
+      ? { sm: 16, md: 24, lg: 32 }[size]
+      : size;
+
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue}
+        height={sizeValue}
+        viewBox="0 0 24 24"
+        fill="none"
+        className={className}
+        style={style}
+        {...props}
+      >
+        <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" strokeWidth="2"/>
+      </svg>
+    );
+  }
+);
+
+ArrowLeft.displayName = 'ArrowLeft';
+export default ArrowLeft;
+```
+
+**Auto-generated index.ts:**
+
+```typescript
+/**
+ * Auto-generated icon exports
+ * Import icons: import { ArrowLeft, Home } from './components/icons'
+ */
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as Home } from './Home';
+export { default as User } from './User';
+
+// Default export for flexible importing
+export default {
+  ArrowLeft,
+  Home,
+  User,
+};
+```
+
+**Usage in App:**
+
+```typescript
+import { ArrowLeft, Home, User } from './components/icons';
+
+function Navigation() {
+  return (
+    <nav className="flex items-center space-x-4">
+      <ArrowLeft
+        size="sm"
+        className="text-gray-600 hover:text-gray-900"
+        onClick={() => history.back()}
+      />
+      <Home
+        size={28}
+        style={{ color: 'var(--primary-color)' }}
+      />
+      <User
+        className="w-6 h-6 text-blue-500"
+        ref={userIconRef}
+      />
+    </nav>
+  );
+}
+```
+
+---
+
+### **🔴 Example 3: Enterprise Multi-Framework (Advanced)**
+
+Complete enterprise setup supporting multiple frameworks:
+
+```bash
+# Project structure
+my-design-system/
+├── icons/              # Source SVG files
+├── react-components/   # React output
+├── vue-components/     # Vue output
+├── angular-components/ # Angular output
+└── vanilla-components/ # Vanilla JS/TS output
+
+# Generate for React with full features
+svger-cli build \
+  --src ./icons \
+  --out ./react-components \
+  --framework react \
+  --typescript \
+  --forward-ref \
+  --styled-components \
+  --responsive \
+  --theme dark \
+  --parallel \
+  --batch-size 20 \
+  --performance
+
+# Generate for Vue with Composition API
+svger-cli build \
+  --src ./icons \
+  --out ./vue-components \
+  --framework vue \
+  --composition \
+  --setup \
+  --typescript \
+  --responsive
+
+# Generate for Angular with standalone components
+svger-cli build \
+  --src ./icons \
+  --out ./angular-components \
+  --framework angular \
+  --standalone \
+  --signals \
+  --typescript
+
+# Generate vanilla TypeScript for maximum compatibility
+svger-cli build \
+  --src ./icons \
+  --out ./vanilla-components \
+  --framework vanilla \
+  --typescript
+```
+
+**React Components with Styled Components:**
+
+```typescript
+// Generated: react-components/ArrowLeft.tsx
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface ArrowLeftProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'primary' | 'secondary' | 'accent';
+  theme?: 'light' | 'dark';
+}
+
+const StyledSVG = styled.svg<ArrowLeftProps>`
+  ${({ theme, variant }) => css`
+    color: ${theme === 'dark'
+      ? 'var(--icon-color-dark)'
+      : 'var(--icon-color-light)'};
+
+    ${variant === 'primary' && css`
+      color: var(--primary-color);
+    `}
+
+    ${variant === 'secondary' && css`
+      color: var(--secondary-color);
+    `}
+
+    ${variant === 'accent' && css`
+      color: var(--accent-color);
+    `}
+
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  `}
+`;
+
+const ArrowLeft = React.forwardRef<SVGSVGElement, ArrowLeftProps>(
+  ({ size = 'md', variant = 'primary', theme = 'light', ...props }, ref) => {
+    const sizeMap = {
+      sm: 16, md: 24, lg: 32, xl: 40
+    };
+
+    const sizeValue = typeof size === 'string' ? sizeMap[size] : size;
+
+    return (
+      <StyledSVG
+        ref={ref}
+        width={sizeValue}
+        height={sizeValue}
+        viewBox="0 0 24 24"
+        fill="none"
+        variant={variant}
+        theme={theme}
+        {...props}
+      >
+        <path
+          d="M19 12H5M12 19l-7-7 7-7"
+          stroke="currentColor"
+          strokeWidth="2"
+        />
+      </StyledSVG>
+    );
+  }
+);
+
+ArrowLeft.displayName = 'ArrowLeft';
+export default ArrowLeft;
+```
+
+**Vue Composition API Components:**
+
+```vue
+<!-- Generated: vue-components/ArrowLeft.vue -->
+<script setup lang="ts">
+interface Props {
+  size?: number | 'sm' | 'md' | 'lg';
+  className?: string;
+  style?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+});
+
+const sizeValue = computed(() => {
+  if (typeof props.size === 'string') {
+    return { sm: 16, md: 24, lg: 32 }[props.size];
+  }
+  return props.size;
+});
+</script>
+
+<template>
+  <svg
+    :width="sizeValue"
+    :height="sizeValue"
+    viewBox="0 0 24 24"
+    fill="none"
+    :class="className"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  color: var(--icon-color, currentColor);
+  transition: all 0.2s ease;
+}
+
+svg:hover {
+  transform: scale(1.05);
+}
+</style>
+```
+
+**Angular Standalone Components:**
+
+```typescript
+// Generated: angular-components/arrow-left.component.ts
+import { Component, Input, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-arrow-left',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <svg
+      [attr.width]="computedSize()"
+      [attr.height]="computedSize()"
+      viewBox="0 0 24 24"
+      fill="none"
+      [class]="className"
+      [style]="style"
+    >
+      <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" />
+    </svg>
+  `,
+  styles: [
+    `
+      svg {
+        color: var(--icon-color, currentColor);
+        transition: all 0.2s ease;
+      }
+      svg:hover {
+        transform: scale(1.05);
+      }
+    `,
+  ],
+})
+export class ArrowLeftComponent {
+  @Input() size: number | 'sm' | 'md' | 'lg' = 'md';
+  @Input() className: string = '';
+  @Input() style: Record<string, any> = {};
+
+  private sizeMap = { sm: 16, md: 24, lg: 32 };
+
+  computedSize = signal(() => {
+    return typeof this.size === 'string' ? this.sizeMap[this.size] : this.size;
+  });
+}
+```
+
+---
+
+### **� Example 4: File Protection & Team Workflows (Advanced)**
+
+Protect critical files and manage team workflows:
+
+```bash
+# Lock critical brand assets
+svger-cli lock ./icons/logo.svg
+svger-cli lock ./icons/brand-mark.svg
+
+# Build process automatically skips locked files
+svger-cli build ./icons ./components
+# ⚠️  Warning: Skipped locked file: logo.svg
+# ⚠️  Warning: Skipped locked file: brand-mark.svg
+# ✅ Generated 23 components (2 files locked)
+
+# Watch mode respects locks
+svger-cli watch ./icons ./components
+# File changes to locked files are ignored
+
+# Team workflow: selective unlocking
+svger-cli unlock ./icons/logo.svg --confirm
+svger-cli build ./icons ./components --force-locked-update
+
+# List all locked files
+svger-cli status --locked
+```
+
+**Team Configuration (.svgerconfig.json):**
+
+```json
+{
+  "source": "./src/assets/icons",
+  "output": "./src/components/icons",
+  "framework": "react",
+  "typescript": true,
+  "forwardRef": true,
+  "lockedFiles": ["./src/assets/icons/logo.svg", "./src/assets/icons/brand-mark.svg"],
+  "teamSettings": {
+    "requireConfirmation": true,
+    "lockByDefault": false,
+    "autoLockPatterns": ["**/brand-*", "**/logo-*"]
+  }
+}
+```
+
+---
+
+### **⚡ Example 5: Performance Optimization (Expert)**
+
+Maximum performance setup for large-scale projects:
+
+```bash
+# Performance analysis
+svger-cli performance --analyze
+# 📊 Processing 1,247 SVG files
+# 📊 Average file size: 3.2KB
+# 📊 Estimated processing time: 2.1s
+# 💡 Recommendations:
+#    - Increase batch size to 25
+#    - Enable caching for 40% improvement
+#    - Use parallel processing
+
+# Apply performance optimizations
+svger-cli build \
+  --src ./massive-icon-library \
+  --out ./optimized-components \
+  --framework react \
+  --parallel \
+  --batch-size 25 \
+  --max-concurrency 8 \
+  --cache \
+  --performance \
+  --memory-limit 512
+
+# Monitor performance in real-time
+svger-cli performance --monitor &
+svger-cli watch ./icons ./components
+
+# Advanced caching strategy
+svger-cli config set cache.strategy "aggressive"
+svger-cli config set cache.ttl 3600000  # 1 hour
+svger-cli config set cache.maxSize 1024  # 1GB
+
+# Benchmark against previous versions
+svger-cli performance --benchmark --compare-with v1.5.0
+```
+
+**Performance Configuration:**
+
+```json
+{
+  "performance": {
+    "optimization": "maximum",
+    "parallel": true,
+    "batchSize": 25,
+    "maxConcurrency": 8,
+    "cache": {
+      "enabled": true,
+      "strategy": "aggressive",
+      "ttl": 3600000,
+      "maxSize": 1024
+    },
+    "memory": {
+      "limit": 512,
+      "gcInterval": 30000,
+      "heapWarning": 400
+    }
+  }
+}
+```
+
+**Enterprise Usage Patterns:**
+
+```typescript
+// Large-scale import pattern
+import IconLibrary from './components/icons';
+
+// Lazy loading for performance
+const LazyIcon = React.lazy(() => import('./components/icons/SpecificIcon'));
+
+// Tree-shaking friendly imports
+import {
+  ArrowLeft,
+  ArrowRight,
+  Home,
+  User,
+  Settings
+} from './components/icons';
+
+// Dynamic icon loading
+const DynamicIcon = ({ name, ...props }) => {
+  const IconComponent = IconLibrary[name];
+  return IconComponent ? <IconComponent {...props} /> : null;
+};
+```
+
+---
+
+## 🎨 **Advanced Styling & Theming**
+
+### **Responsive Design System**
+
+SVGER-CLI includes a comprehensive responsive design system:
+
+```bash
+# Enable responsive design
+svger-cli build --responsive --src ./icons --out ./components
+```
+
+**Configuration:**
+
+```json
+{
+  "responsive": {
+    "breakpoints": ["sm", "md", "lg", "xl"],
+    "values": {
+      "width": ["16px", "20px", "24px", "32px"],
+      "height": ["16px", "20px", "24px", "32px"],
+      "strokeWidth": ["1", "1.5", "2", "2.5"]
+    }
+  }
+}
+```
+
+**Generated React Component:**
+
+```tsx
+interface ResponsiveIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const ResponsiveIcon: React.FC<ResponsiveIconProps> = ({ size = 'md', ...props }) => {
+  const sizeMap = {
+    sm: { width: 16, height: 16 },
+    md: { width: 20, height: 20 },
+    lg: { width: 24, height: 24 },
+    xl: { width: 32, height: 32 },
+  };
+
+  return (
+    <svg {...sizeMap[size]} {...props}>
+      ...
+    </svg>
+  );
+};
+```
+
+### **Theme System**
+
+Built-in dark/light theme support with CSS variables:
+
+```bash
+# Generate with theme support
+svger-cli build --theme dark --src ./icons --out ./components
+```
+
+**Theme Configuration:**
+
+```json
+{
+  "theme": {
+    "mode": "dark",
+    "variables": {
+      "primary": "#ffffff",
+      "secondary": "#94a3b8",
+      "accent": "#3b82f6"
+    }
+  }
+}
+```
+
+**Generated CSS Variables:**
+
+```css
+:root {
+  --icon-primary: #ffffff;
+  --icon-secondary: #94a3b8;
+  --icon-accent: #3b82f6;
+}
+
+.icon {
+  fill: var(--icon-primary);
+  stroke: var(--icon-secondary);
+}
+```
+
+### **Animation System**
+
+Built-in animation utilities:
+
+```bash
+# Generate with animations
+svger-cli build --animations hover,focus --src ./icons --out ./components
+```
+
+**Available Animations:**
+
+- `hover` - Hover state transitions
+- `focus` - Focus state transitions
+- `spin` - Continuous rotation
+- `pulse` - Pulsing opacity
+- `bounce` - Bouncing effect
+- `scale` - Scale on interaction
+
+---
+
+## 💻 **Programmatic API**
+
+### **📡 API Modules Overview**
+
+| Module              | Purpose                  | Use Case                |
+| ------------------- | ------------------------ | ----------------------- |
+| `SVGER`             | Main entry point         | General operations      |
+| `svgProcessor`      | SVG file processing      | Custom processing       |
+| `performanceEngine` | Performance optimization | Batch operations        |
+| `styleCompiler`     | CSS generation           | Styling                 |
+| `pluginManager`     | Plugin system            | Extending functionality |
+
+---
+
+### **🔌 Core API Usage**
+
+```typescript
+import { SVGER, svgProcessor, frameworkTemplateEngine } from 'svger-cli';
+
+// Quick processing
+await SVGER.processFile('./icon.svg', './components/');
+await SVGER.processBatch(files, { parallel: true, batchSize: 20 });
+
+// Framework-specific generation
+await SVGER.generateFrameworkComponent('IconName', svgContent, {
+  framework: 'vue',
+  composition: true,
+  typescript: true,
+});
+
+// Advanced processing
+const result = await svgProcessor.processSVGFile('./icon.svg', './components/', {
+  framework: 'react',
+  typescript: true,
+  forwardRef: true,
+  responsive: true,
+  theme: 'dark',
+});
+```
+
+### **⚡ Performance Engine API**
+
+```typescript
+import { performanceEngine } from 'svger-cli';
+
+// Batch processing with performance optimization
+const results = await performanceEngine.processBatch(files, {
+  batchSize: 15,
+  parallel: true,
+  maxConcurrency: 6,
+});
+
+// Memory monitoring
+const metrics = performanceEngine.monitorMemoryUsage();
+console.log(`Memory usage: ${metrics.heapUsed}MB`);
+console.log(`Recommendations:`, metrics.recommendations);
+
+// SVG optimization
+const optimized = performanceEngine.optimizeSVGContent(svgContent, 'maximum');
+```
+
+### **🎨 Style Compiler API**
+
+```typescript
+import { styleCompiler } from 'svger-cli';
+
+// Compile responsive styles
+const styles = styleCompiler.compileStyles({
+  responsive: {
+    width: ['20px', '24px', '32px'],
+    height: ['20px', '24px', '32px'],
+  },
+  theme: 'dark',
+  animations: ['hover', 'focus'],
+});
+
+// Generate CSS
+const css = styleCompiler.generateCSS(styles);
+```
+
+### **🔧 Plugin System API**
+
+```typescript
+import { pluginManager } from 'svger-cli';
+
+// Register custom plugin
+pluginManager.registerPlugin({
+  name: 'custom-optimizer',
+  version: '1.0.0',
+  process: async (content: string, options?: any) => {
+    // Custom SVG processing logic
+    return processedContent;
+  },
+  validate: (options?: any) => true,
+});
+
+// Enable plugin
+pluginManager.enablePlugin('custom-optimizer', { level: 'maximum' });
+
+// Process with plugins
+const processed = await pluginManager.processContent(svgContent, [
+  { name: 'svg-optimizer', options: { level: 'balanced' } },
+  { name: 'custom-optimizer', options: { level: 'maximum' } },
+]);
+```
+
+---
+
+## 🔧 **Configuration Reference**
+
+### **📝 Configuration Sections Quick Links**
+
+| Section                                           | Options                         | Purpose            |
+| ------------------------------------------------- | ------------------------------- | ------------------ |
+| [Source & Output](#complete-configuration-schema) | `source`, `output`              | Paths              |
+| [Framework](#complete-configuration-schema)       | `framework`, `typescript`       | Framework choice   |
+| [Processing](#complete-configuration-schema)      | `parallel`, `batchSize`         | Performance        |
+| [Defaults](#complete-configuration-schema)        | `defaultWidth`, `defaultHeight` | Defaults           |
+| [Styling](#complete-configuration-schema)         | `styleRules`, `responsive`      | Styling            |
+| [Theme](#complete-configuration-schema)           | `theme`, `variables`            | Theme system       |
+| [Error Handling](#complete-configuration-schema)  | `strategy`, `maxRetries`        | Error handling     |
+| [Performance](#complete-configuration-schema)     | `optimization`, `memoryLimit`   | Performance tuning |
+| [Output](#complete-configuration-schema)          | `naming`, `extension`           | Output format      |
+| [Framework-Specific](#framework-specific-options) | `react`, `vue`, `angular`       | Framework options  |
+
+---
+
+### **Complete Configuration Schema**
+
+All configuration options are now fully implemented and tested:
+
+```typescript
+interface SVGConfig {
+  // Source & Output
+  source: string; // Input directory path
+  output: string; // Output directory path
+
+  // Framework Configuration
+  framework: FrameworkType; // Target framework
+  typescript: boolean; // Generate TypeScript
+  componentType: ComponentType; // Component pattern
+
+  // Processing Options
+  watch: boolean; // Enable file watching
+  parallel: boolean; // Enable parallel processing
+  batchSize: number; // Batch processing size
+  maxConcurrency: number; // Maximum concurrent processes
+  cache: boolean; // Enable processing cache
+
+  // Default Properties
+  defaultWidth: number; // Default SVG width
+  defaultHeight: number; // Default SVG height
+  defaultFill: string; // Default fill color
+  defaultStroke: string; // Default stroke color
+  defaultStrokeWidth: number; // Default stroke width
+
+  // Styling Configuration
+  styleRules: {
+    // CSS styling rules
+    [property: string]: string;
+  };
+
+  responsive: {
+    // Responsive design
+    breakpoints: string[];
+    values: {
+      [property: string]: string[];
+    };
+  };
+
+  theme: {
+    // Theme configuration
+    mode: 'light' | 'dark' | 'auto';
+    variables: {
+      [name: string]: string;
+    };
+  };
+
+  animations: string[]; // Animation effects
+
+  // Advanced Options
+  plugins: PluginConfig[]; // Plugin configurations
+  exclude: string[]; // Files to exclude
+  include: string[]; // Files to include (overrides exclude)
+
+  // Error Handling
+  errorHandling: {
+    strategy: 'continue' | 'stop' | 'retry';
+    maxRetries: number;
+    timeout: number;
+  };
+
+  // Performance Settings
+  performance: {
+    optimization: 'fast' | 'balanced' | 'maximum';
+    memoryLimit: number; // Memory limit in MB
+    cacheTimeout: number; // Cache timeout in ms
+  };
+
+  // Output Customization
+  outputConfig: {
+    naming: 'kebab' | 'pascal' | 'camel';
+    extension: string; // File extension override
+    directory: string; // Output directory structure
+  };
+
+  // Framework-specific configurations
+  react?: ReactConfig;
+  vue?: VueConfig;
+  angular?: AngularConfig;
+}
+```
+
+**✅ All 28 configuration properties are fully implemented and tested**
+
+### **Configuration Validation**
+
+SVGER-CLI includes comprehensive configuration validation to ensure all settings are correct:
+
+```bash
+# Validate current configuration
+svger-cli config --validate
+
+# Show detailed configuration analysis
+svger-cli config --show
+
+# Test configuration with sample files
+svger-cli build --dry-run --src ./test-svg --out ./test-output
+```
+
+**Validation Features:**
+
+- ✅ **Type Safety**: All configuration options are type-checked
+- ✅ **Framework Compatibility**: Validates framework-specific options
+- ✅ **Performance Settings**: Ensures optimal performance configuration
+- ✅ **Path Validation**: Verifies source and output directories
+- ✅ **Plugin Validation**: Checks plugin compatibility and options
+
+### **Example Configuration Files**
+
+A comprehensive example configuration is included with detailed explanations:
+
+```bash
+# Copy example configuration
+cp .svgerconfig.example.json .svgerconfig.json
+
+# Initialize with interactive setup
+svger-cli init --interactive
+```
+
+The example file includes all 28 configuration options with documentation and examples for React,
+Vue, Angular, and other frameworks.
+
+### **Framework-Specific Options**
+
+#### **React Configuration**
+
+```json
+{
+  "framework": "react",
+  "react": {
+    "componentType": "functional",
+    "forwardRef": true,
+    "memo": false,
+    "propsInterface": "SVGProps",
+    "styledComponents": true,
+    "cssModules": false
+  }
+}
+```
+
+#### **Vue Configuration**
+
+```json
+{
+  "framework": "vue",
+  "vue": {
+    "api": "composition",
+    "setup": true,
+    "typescript": true,
+    "scoped": true,
+    "cssVariables": true
+  }
+}
+```
+
+#### **Angular Configuration**
+
+```json
+{
+  "framework": "angular",
+  "angular": {
+    "standalone": true,
+    "signals": true,
+    "changeDetection": "OnPush",
+    "encapsulation": "Emulated"
+  }
+}
+```
+
+---
+
+## 📊 **Performance Optimization**
+
+### **Benchmarks vs Competitors**
+
+| **Operation**           | **SVGER v2.0** | **SVGR** | **Improvement** |
+| ----------------------- | -------------- | -------- | --------------- |
+| Single file (100KB SVG) | 15ms           | 25ms     | **40% faster**  |
+| Batch (100 files)       | 850ms          | 1,450ms  | **70% faster**  |
+| Memory (1000 files)     | 45MB           | 120MB    | **62% less**    |
+| Bundle size             | 2.1MB          | 18.7MB   | **89% smaller** |
+| Startup time            | 120ms          | 340ms    | **65% faster**  |
+
+### **Performance Best Practices**
+
+#### **Batch Processing Optimization**
+
+```bash
+# Optimal batch processing
+svger-cli build \
+  --src ./icons \
+  --out ./components \
+  --parallel \
+  --batch-size 15 \
+  --max-concurrency 4 \
+  --cache \
+  --performance
+```
+
+#### **Memory Management**
+
+```typescript
+// Monitor memory usage
+import { performanceEngine } from 'svger-cli';
+
+const monitor = setInterval(() => {
+  const usage = performanceEngine.monitorMemoryUsage();
+  if (usage.heapUsed > 500) {
+    console.warn('High memory usage detected');
+    performanceEngine.clearCache();
+  }
+}, 5000);
+```
+
+#### **Cache Configuration**
+
+```json
+{
+  "performance": {
+    "cache": true,
+    "cacheTimeout": 300000,
+    "memoryLimit": 512
+  }
+}
+```
+
+---
+
+## 🧪 **Testing & Quality Assurance**
+
+### **Component Testing**
+
+Generated components include comprehensive testing utilities:
+
+```typescript
+// Generated React component test
+import { render, screen } from '@testing-library/react';
+import { IconName } from './IconName';
+
+describe('IconName', () => {
+  it('renders with default props', () => {
+    render(<IconName />);
+    const svg = screen.getByRole('img', { hidden: true });
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('accepts custom props', () => {
+    render(<IconName width={32} height={32} fill="red" />);
+    const svg = screen.getByRole('img', { hidden: true });
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+    expect(svg).toHaveAttribute('fill', 'red');
+  });
+});
+```
+
+### **Integration Testing**
+
+```bash
+# Run integration tests
+npm run test:integration
+
+# Test specific framework
+npm run test:framework:react
+npm run test:framework:vue
+npm run test:framework:angular
+```
+
+### **Performance Testing**
+
+```bash
+# Run performance benchmarks
+svger-cli performance --benchmark
+
+# Memory leak testing
+svger-cli performance --memory --duration 60s
+
+# Load testing
+svger-cli performance --load --files 1000
+```
+
+---
+
+## 🚀 **Production Deployment**
+
+### **CI/CD Integration**
+
+#### **GitHub Actions**
+
+```yaml
+name: SVG Component Generation
+on:
+  push:
+    paths: ['src/assets/svg/**']
+
+jobs:
+  generate-components:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install SVGER-CLI
+        run: npm install -g svger-cli@2.0.7
+
+      - name: Generate Components
+        run: |
+          svger-cli build \
+            --src ./src/assets/svg \
+            --out ./src/components/icons \
+            --framework react \
+            --typescript \
+            --parallel \
+            --performance
+
+      - name: Commit Generated Components
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add src/components/icons/
+          git commit -m "🤖 Auto-generated SVG components" || exit 0
+          git push
+```
+
+#### **Jenkins Pipeline**
+
+```groovy
+pipeline {
+  agent any
+
+  stages {
+    stage('Generate SVG Components') {
+      steps {
+        sh '''
+          npm install -g svger-cli@2.0.7
+          svger-cli build \
+            --src ./assets/svg \
+            --out ./components \
+            --framework vue \
+            --composition \
+            --typescript \
+            --cache \
+            --performance
+        '''
+      }
+    }
+  }
+}
+```
+
+### **Docker Integration**
+
+```dockerfile
+FROM node:18-alpine
+
+# Install SVGER-CLI globally
+RUN npm install -g svger-cli@2.0.7
+
+# Set working directory
+WORKDIR /app
+
+# Copy SVG files
+COPY src/assets/svg ./src/assets/svg
+
+# Generate components
+RUN svger-cli build \
+    --src ./src/assets/svg \
+    --out ./src/components/icons \
+    --framework react \
+    --typescript \
+    --parallel
+
+# Copy generated components
+COPY src/components ./src/components
+```
+
+---
+
+## 🔌 **Plugin Development**
+
+### **Creating Custom Plugins**
+
+```typescript
+import { Plugin } from 'svger-cli';
+
+const customOptimizer: Plugin = {
+  name: 'custom-svg-optimizer',
+  version: '1.0.0',
+
+  process: async (content: string, options?: any) => {
+    // Custom SVG processing logic
+    const optimized = content
+      .replace(/fill="none"/g, '')
+      .replace(/stroke="currentColor"/g, 'stroke="inherit"');
+
+    return optimized;
+  },
+
+  validate: (options?: any) => {
+    return options && typeof options.level === 'string';
+  },
+};
+
+// Register plugin
+import { pluginManager } from 'svger-cli';
+pluginManager.registerPlugin(customOptimizer);
+```
+
+### **Plugin Configuration**
+
+```json
+{
+  "plugins": [
+    {
+      "name": "svg-optimizer",
+      "options": {
+        "level": "balanced"
+      }
+    },
+    {
+      "name": "custom-svg-optimizer",
+      "options": {
+        "level": "maximum"
+      }
+    }
+  ]
+}
+```
+
+---
+
+## 🔍 **Troubleshooting & FAQ**
+
+### **Common Issues**
+
+#### **Memory Issues**
+
+```bash
+# If experiencing memory issues with large batches
+svger-cli build \
+  --batch-size 5 \
+  --max-concurrency 2 \
+  --src ./icons \
+  --out ./components
+```
+
+#### **Performance Issues**
+
+```bash
+# Enable performance monitoring
+svger-cli performance --analyze
+
+# Clear cache if needed
+svger-cli clean --cache
+
+# Optimize configuration
+svger-cli performance --optimize
+```
+
+#### **TypeScript Errors**
+
+```bash
+# Validate configuration
+svger-cli config --validate
+
+# Regenerate with strict TypeScript
+svger-cli build --typescript --strict
+```
+
+### **Debugging**
+
+```bash
+# Enable verbose logging
+svger-cli build --verbose --src ./icons --out ./components
+
+# Debug specific framework
+svger-cli build --framework vue --debug
+
+# Performance debugging
+svger-cli build --performance --memory
+```
+
+---
+
+## 📚 **Migration Guide**
+
+### **From SVGR**
+
+```bash
+# Install SVGER-CLI
+npm uninstall @svgr/webpack @svgr/cli
+npm install -g svger-cli@2.0.7
+
+# Migrate configuration
+svger-cli init --framework react --typescript
+
+# Build components
+svger-cli build --src ./assets --out ./components
+```
+
+### **From v1.x**
+
+```bash
+# Upgrade to v2.0
+npm install -g svger-cli@2.0.7
+
+# Migrate configuration
+svger-cli config --migrate
+
+# Rebuild with new features
+svger-cli build --framework react --responsive --theme dark
+```
+
+---
+
+## 🤝 **Contributing & Support**
+
+### **Contributing**
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### **Support**
+
+- 📧 **Email**: navidrezadoost07@gmail.com
+- 🐛 **Issues**: [GitHub Issues](https://github.com/faezemohades/svger-cli/issues)
+- 📖 **Documentation**: [docs.svger-cli.com](https://docs.svger-cli.com)
+
+---
+
+## 📄 **License & Acknowledgements**
+
+### **License**
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+### **Acknowledgements**
+
+This project was developed through the collaborative efforts of:
+
+- **🏗️ Architecture Design**: [ADR-001](./docs/ADR-SVG-INTRGRATION-METHODS-001.adr.md) authored by
+  **Engineer Navid Rezadoost**
+- **📋 Technical Requirements**:
+  [TDR-001](https://docs.google.com/document/d/1b04_V01xOvLiSMzuPdaRynANlnt2wYdJ_vjs9MAqtn4/edit?tab=t.0)
+  prepared by **Ehsan Jafari**
+- **💻 Implementation**: **Navid Rezadoost** - Faeze Mohades Lead developer and package maintainer
+- **🏢 Enterprise Architecture**: SVGER Development Team
+
+Their guidance and documentation on SVG integration methods in React, Vue, and other frameworks were
+instrumental in shaping the design and functionality of the SVGER-CLI v2.0.
+
+### **Special Thanks**
+
+- The open-source community for inspiration and feedback
+- Framework maintainers for excellent documentation
+- Beta testers who provided valuable insights
+- Enterprise customers who drove advanced feature requirements
+
+---
+
+**© 2025 SVGER-CLI Development Team. Built with ❤️ for the developer community.**