svger-cli 2.0.2 → 2.0.3

package/dist/index.d.ts

@@ -22,7 +22,7 @@ export { ConfigService, configService } from './services/config.js';
  * Error Handler - Comprehensive error management with recovery strategies
  * Provides: structured error handling, recovery mechanisms, and user-friendly messages
  */
-export { SVGErrorHandler, errorHandler, withErrorHandling, handleErrors } from './core/error-handler.js';
+export { SVGErrorHandler, errorHandler, withErrorHandling, handleErrors, } from './core/error-handler.js';
 /**
  * SVG Processor - Core SVG content processing and React component generation
  * Provides: SVG parsing, optimization, React component generation, and batch processing
@@ -32,7 +32,7 @@ export { SVGProcessor, svgProcessor } from './processors/svg-processor.js';
  * Performance Engine - Advanced optimization for batch processing and parallel execution
  * Provides: batch processing, caching, memory optimization, and performance monitoring
  */
-export { PerformanceEngine, performanceEngine } from './core/performance-engine.js';
+export { PerformanceEngine, performanceEngine, } from './core/performance-engine.js';
 /**
  * Style Compiler - Comprehensive styling system with responsive design and theming
  * Provides: CSS generation, theme management, responsive values, and style optimization
@@ -47,7 +47,7 @@ export { TemplateManager, templateManager } from './core/template-manager.js';
  * Framework Template Engine - Universal template generator supporting multiple UI frameworks
  * Provides: React, Vue, Svelte, Angular, Solid, Preact, Lit, and Vanilla JS components
  */
-export { FrameworkTemplateEngine, frameworkTemplateEngine, type FrameworkType, type FrameworkOptions } from './core/framework-templates.js';
+export { FrameworkTemplateEngine, frameworkTemplateEngine, type FrameworkOptions, } from './core/framework-templates.js';
 /**
  * Plugin Manager - Extensible plugin system for SVG processing enhancements
  * Provides: plugin registration, lifecycle management, and content processing pipeline
@@ -57,7 +57,7 @@ export { PluginManager, pluginManager } from './core/plugin-manager.js';
  * Native Node.js Utilities - Zero-dependency replacements for external libraries
  * Provides: file operations, string manipulation, CLI parsing, and file watching
  */
-export { toPascalCase, FileSystem, CLI, FileWatcher } from './utils/native.js';
+export { toPascalCase, toCamelCase, toKebabCase, FileSystem, CLI, FileWatcher, } from './utils/native.js';
 /**
  * File System Lock Functions - Concurrent file operation safety with advisory locking
  * Provides: file locking, unlocking, and lock status checking for safe concurrent access
@@ -82,7 +82,7 @@ export { clean } from './clean.js';
  * TypeScript Type Definitions - Comprehensive type system for all interfaces and configurations
  * Provides: complete type safety for all operations, configurations, and data structures
  */
-export type { SVGConfig, ComponentGenerationOptions, SVGProcessorResult, ProcessingJob, ProcessingStatus, Plugin, PluginConfig, Template, TemplateConfig, WatchOptions } from './types/index.js';
+export type { SVGConfig, ComponentGenerationOptions, OutputConfig, NamingConvention, FrameworkType, SVGProcessorResult, ProcessingJob, ProcessingStatus, Plugin, PluginConfig, Template, TemplateConfig, WatchOptions, } from './types/index.js';
 /**
  * Error handling types - Available from core error handler
  */
@@ -104,7 +104,9 @@ export declare const SVGER: {
     /**
      * Process single SVG file to React component
      */
-    readonly processFile: (svgFilePath: string, outputDir: string, options?: Partial<import("./types/index.js").ComponentGenerationOptions>) => Promise<import("./types/index.js").SVGProcessorResult>;
+    readonly processFile: (svgFilePath: string, outputDir: string, options?: Partial<import("./types/index.js").ComponentGenerationOptions & {
+        namingConvention?: import("./types/index.js").NamingConvention;
+    }>) => Promise<import("./types/index.js").SVGProcessorResult>;
     /**
      * Process multiple SVG files in batch
      */

package/dist/index.js

@@ -25,7 +25,7 @@ export { ConfigService, configService } from './services/config.js';
  * Error Handler - Comprehensive error management with recovery strategies
  * Provides: structured error handling, recovery mechanisms, and user-friendly messages
  */
-export { SVGErrorHandler, errorHandler, withErrorHandling, handleErrors } from './core/error-handler.js';
+export { SVGErrorHandler, errorHandler, withErrorHandling, handleErrors, } from './core/error-handler.js';
 // ============================================================================
 // PROCESSING ENGINES
 // ============================================================================
@@ -38,7 +38,7 @@ export { SVGProcessor, svgProcessor } from './processors/svg-processor.js';
  * Performance Engine - Advanced optimization for batch processing and parallel execution
  * Provides: batch processing, caching, memory optimization, and performance monitoring
  */
-export { PerformanceEngine, performanceEngine } from './core/performance-engine.js';
+export { PerformanceEngine, performanceEngine, } from './core/performance-engine.js';
 /**
  * Style Compiler - Comprehensive styling system with responsive design and theming
  * Provides: CSS generation, theme management, responsive values, and style optimization
@@ -56,7 +56,7 @@ export { TemplateManager, templateManager } from './core/template-manager.js';
  * Framework Template Engine - Universal template generator supporting multiple UI frameworks
  * Provides: React, Vue, Svelte, Angular, Solid, Preact, Lit, and Vanilla JS components
  */
-export { FrameworkTemplateEngine, frameworkTemplateEngine } from './core/framework-templates.js';
+export { FrameworkTemplateEngine, frameworkTemplateEngine, } from './core/framework-templates.js';
 // ============================================================================
 // PLUGIN ARCHITECTURE
 // ============================================================================
@@ -72,7 +72,7 @@ export { PluginManager, pluginManager } from './core/plugin-manager.js';
  * Native Node.js Utilities - Zero-dependency replacements for external libraries
  * Provides: file operations, string manipulation, CLI parsing, and file watching
  */
-export { toPascalCase, FileSystem, CLI, FileWatcher } from './utils/native.js';
+export { toPascalCase, toCamelCase, toKebabCase, FileSystem, CLI, FileWatcher, } from './utils/native.js';
 /**
  * File System Lock Functions - Concurrent file operation safety with advisory locking
  * Provides: file locking, unlocking, and lock status checking for safe concurrent access
@@ -137,7 +137,7 @@ export const SVGER = {
     /**
      * Build all SVG files in directory
      */
-    build: buildAll
+    build: buildAll,
 };
 // ============================================================================
 // VERSION INFORMATION

package/dist/lock.js

@@ -1,6 +1,6 @@
-import fs from "fs";
-import path from "path";
-const LOCK_FILE = ".svg-lock";
+import fs from 'fs';
+import path from 'path';
+const LOCK_FILE = '.svg-lock';
 /**
  * Get the absolute path to the lock file.
  *
@@ -18,7 +18,7 @@ function readLockFile() {
     if (!fs.existsSync(getLockFilePath()))
         return [];
     try {
-        const data = fs.readFileSync(getLockFilePath(), "utf-8");
+        const data = fs.readFileSync(getLockFilePath(), 'utf-8');
         return JSON.parse(data);
     }
     catch (e) {
@@ -31,7 +31,7 @@ function readLockFile() {
  * @param {string[]} files - Array of SVG file names to lock.
  */
 function writeLockFile(files) {
-    fs.writeFileSync(getLockFilePath(), JSON.stringify(files, null, 2), "utf-8");
+    fs.writeFileSync(getLockFilePath(), JSON.stringify(files, null, 2), 'utf-8');
 }
 /**
  * Lock one or more SVG files to prevent them from being processed.
@@ -43,7 +43,7 @@ export function lockFiles(files) {
     const current = readLockFile();
     const newFiles = Array.from(new Set([...current, ...fileNames]));
     writeLockFile(newFiles);
-    console.log(`🔒 Locked files: ${newFiles.join(", ")}`);
+    console.log(`🔒 Locked files: ${newFiles.join(', ')}`);
 }
 /**
  * Unlock one or more SVG files, allowing them to be processed again.
@@ -55,7 +55,7 @@ export function unlockFiles(files) {
     const current = readLockFile();
     const remaining = current.filter(f => !fileNames.includes(f));
     writeLockFile(remaining);
-    console.log(`🔓 Unlocked files: ${fileNames.join(", ")}`);
+    console.log(`🔓 Unlocked files: ${fileNames.join(', ')}`);
 }
 /**
  * Check if a specific SVG file is locked.

package/dist/processors/svg-processor.d.ts

@@ -1,4 +1,4 @@
-import { ComponentGenerationOptions, SVGProcessorResult } from '../types/index.js';
+import { ComponentGenerationOptions, SVGProcessorResult, NamingConvention } from '../types/index.js';
 /**
  * SVG content processor and component generator
  */
@@ -19,7 +19,7 @@ export declare class SVGProcessor {
     /**
      * Generate component name from filename
      */
-    generateComponentName(fileName: string): string;
+    generateComponentName(fileName: string, namingConvention?: 'kebab' | 'pascal' | 'camel'): string;
     /**
      * Generate React component from SVG content
      */
@@ -45,10 +45,16 @@ export declare class SVGProcessor {
         error?: Error;
         duration: number;
     }>>;
+    /**
+     * Generate filename from component name using naming convention
+     */
+    generateFileName(componentName: string, extension: string, namingConvention?: NamingConvention): string;
     /**
      * Process a single SVG file
      */
-    processSVGFile(svgFilePath: string, outputDir: string, options?: Partial<ComponentGenerationOptions>): Promise<SVGProcessorResult>;
+    processSVGFile(svgFilePath: string, outputDir: string, options?: Partial<ComponentGenerationOptions & {
+        namingConvention?: NamingConvention;
+    }>): Promise<SVGProcessorResult>;
     /**
      * Get processing statistics
      */

package/dist/processors/svg-processor.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import { toPascalCase, FileSystem } from '../utils/native.js';
+import { toPascalCase, toKebabCase, toCamelCase, FileSystem, } from '../utils/native.js';
 import { logger } from '../core/logger.js';
 import { performanceEngine } from '../core/performance-engine.js';
 import { frameworkTemplateEngine } from '../core/framework-templates.js';
@@ -22,7 +22,7 @@ export class SVGProcessor {
      */
     cleanSVGContent(svgContent) {
         logger.debug('Cleaning SVG content');
-        return svgContent
+        return (svgContent
             // Remove XML declaration
             .replace(/<\?xml.*?\?>/g, '')
             // Remove DOCTYPE declaration
@@ -52,7 +52,7 @@ export class SVGProcessor {
             // Remove outer SVG tag and keep inner content
             .trim()
             .replace(/^<svg[^>]*>([\s\S]*)<\/svg>$/i, '$1')
-            .trim();
+            .trim());
     }
     /**
      * Extract viewBox from SVG content
@@ -64,14 +64,27 @@ export class SVGProcessor {
     /**
      * Generate component name from filename
      */
-    generateComponentName(fileName) {
+    generateComponentName(fileName, namingConvention) {
         const baseName = path.basename(fileName, '.svg');
-        const componentName = toPascalCase(baseName);
-        // Ensure component name starts with uppercase letter
-        if (!/^[A-Z]/.test(componentName)) {
-            return `Svg${componentName}`;
+        // Apply naming convention if specified, otherwise default to PascalCase
+        switch (namingConvention) {
+            case 'kebab':
+                // Keep kebab-case for filename, but component still needs PascalCase
+                return toPascalCase(baseName);
+            case 'camel':
+                // Convert to camelCase
+                const pascalName = toPascalCase(baseName);
+                return pascalName.charAt(0).toLowerCase() + pascalName.slice(1);
+            case 'pascal':
+            default:
+                // Default to PascalCase
+                const componentName = toPascalCase(baseName);
+                // Ensure component name starts with uppercase letter
+                if (!/^[A-Z]/.test(componentName)) {
+                    return `Svg${componentName}`;
+                }
+                return componentName;
         }
-        return componentName;
     }
     /**
      * Generate React component from SVG content
@@ -88,7 +101,7 @@ export class SVGProcessor {
                 svgContent: processedContent,
                 framework: options.framework || 'react',
                 typescript: options.typescript !== undefined ? options.typescript : true,
-                ...options
+                ...options,
             };
             // Use framework template engine directly
             const component = frameworkTemplateEngine.generateComponent(fullOptions);
@@ -112,7 +125,7 @@ export class SVGProcessor {
             const component = frameworkTemplateEngine.generateComponent({
                 ...options,
                 componentName,
-                svgContent: optimizedContent
+                svgContent: optimizedContent,
             });
             logger.debug(`Generated ${options.framework} component: ${componentName}`);
             return component;
@@ -141,6 +154,26 @@ export class SVGProcessor {
             throw error;
         }
     }
+    /**
+     * Generate filename from component name using naming convention
+     */
+    generateFileName(componentName, extension, namingConvention) {
+        let fileName;
+        switch (namingConvention) {
+            case 'kebab':
+                fileName = toKebabCase(componentName);
+                break;
+            case 'camel':
+                fileName = toCamelCase(componentName);
+                break;
+            case 'pascal':
+            default:
+                // Default to PascalCase (same as component name)
+                fileName = componentName;
+                break;
+        }
+        return `${fileName}.${extension}`;
+    }
     /**
      * Process a single SVG file
      */
@@ -150,14 +183,14 @@ export class SVGProcessor {
             id: jobId,
             filePath: svgFilePath,
             status: 'processing',
-            startTime: Date.now()
+            startTime: Date.now(),
         };
         this.processingQueue.set(jobId, job);
         logger.debug(`Processing SVG file: ${svgFilePath}`);
         try {
             // Read SVG content
             const svgContent = await FileSystem.readFile(svgFilePath, 'utf-8');
-            // Generate component name
+            // Generate component name (always PascalCase for component)
             const componentName = this.generateComponentName(path.basename(svgFilePath));
             // Generate component code
             const componentCode = await this.generateComponent(componentName, svgContent, options);
@@ -167,8 +200,11 @@ export class SVGProcessor {
             const framework = options.framework || 'react';
             const typescript = options.typescript !== undefined ? options.typescript : true;
             const fileExtension = frameworkTemplateEngine.getFileExtension(framework, typescript);
+            // Generate filename using naming convention
+            const namingConvention = options.namingConvention;
+            const fileName = this.generateFileName(componentName, fileExtension, namingConvention);
             // Write component file
-            const outputFilePath = path.join(outputDir, `${componentName}.${fileExtension}`);
+            const outputFilePath = path.join(outputDir, fileName);
             await FileSystem.writeFile(outputFilePath, componentCode, 'utf-8');
             // Update job status
             job.status = 'completed';
@@ -176,9 +212,9 @@ export class SVGProcessor {
             const result = {
                 success: true,
                 componentName,
-                filePath: outputFilePath
+                filePath: outputFilePath,
             };
-            logger.success(`Generated component: ${componentName}.${fileExtension}`);
+            logger.success(`Generated component: ${fileName}`);
             return result;
         }
         catch (error) {
@@ -189,7 +225,7 @@ export class SVGProcessor {
                 success: false,
                 componentName: '',
                 filePath: svgFilePath,
-                error: error
+                error: error,
             };
             logger.error(`Failed to process ${svgFilePath}:`, error);
             return result;

package/dist/services/config.js

@@ -35,25 +35,25 @@ export class ConfigService {
             },
             plugins: [],
             template: {
-                type: 'default'
+                type: 'default',
             },
             frameworkOptions: {
                 forwardRef: true,
                 memo: false,
                 scriptSetup: true,
-                standalone: true
+                standalone: true,
             },
             errorHandling: {
                 skipOnError: false,
                 logLevel: 'info',
-                maxRetries: 3
+                maxRetries: 3,
             },
             performance: {
                 batchSize: 10,
                 parallel: true,
                 timeout: 30000,
-                enableCache: true
-            }
+                enableCache: true,
+            },
         };
     }
     /**
@@ -79,7 +79,7 @@ export class ConfigService {
             // Merge with defaults to ensure all required properties exist
             this.cachedConfig = {
                 ...this.getDefaultConfig(),
-                ...configData
+                ...configData,
             };
             logger.debug('Configuration loaded successfully');
             return this.cachedConfig;
@@ -165,7 +165,8 @@ export class ConfigService {
         // Required string fields
         const requiredStringFields = ['source', 'output', 'defaultFill'];
         for (const field of requiredStringFields) {
-            if (!configToValidate[field] || typeof configToValidate[field] !== 'string') {
+            if (!configToValidate[field] ||
+                typeof configToValidate[field] !== 'string') {
                 errors.push(`${field} must be a non-empty string`);
             }
         }
@@ -182,12 +183,13 @@ export class ConfigService {
             errors.push('exclude must be an array');
         }
         // Validate styleRules object
-        if (configToValidate.styleRules && typeof configToValidate.styleRules !== 'object') {
+        if (configToValidate.styleRules &&
+            typeof configToValidate.styleRules !== 'object') {
             errors.push('styleRules must be an object');
         }
         return {
             valid: errors.length === 0,
-            errors
+            errors,
         };
     }
     /**

package/dist/services/file-watcher.js

@@ -30,7 +30,7 @@ export class FileWatcherService {
         try {
             const watcher = fs.watch(resolvedPath, {
                 persistent: true,
-                recursive: false
+                recursive: false,
             }, (eventType, filename) => {
                 if (filename) {
                     this.handleFileEvent(watchId, eventType, path.join(resolvedPath, filename));
@@ -83,7 +83,7 @@ export class FileWatcherService {
             const event = {
                 type: actualEventType,
                 filePath,
-                timestamp: Date.now()
+                timestamp: Date.now(),
             };
             logger.debug(`File event: ${actualEventType} - ${path.basename(filePath)}`);
             // Emit event to registered handlers
@@ -160,7 +160,7 @@ export class FileWatcherService {
         return {
             activeWatchers: this.watchers.size,
             pendingEvents: this.debounceTimers.size,
-            totalHandlers
+            totalHandlers,
         };
     }
     /**

package/dist/services/svg-service.js

@@ -41,9 +41,15 @@ export class SVGService {
             ...config,
             ...(options.config || {}),
             // Support direct properties on options for CLI convenience
-            ...options.framework && { framework: options.framework },
-            ...options.typescript !== undefined && { typescript: options.typescript },
-            ...options.frameworkOptions && { frameworkOptions: options.frameworkOptions }
+            ...(options.framework && {
+                framework: options.framework,
+            }),
+            ...(options.typescript !== undefined && {
+                typescript: options.typescript,
+            }),
+            ...(options.frameworkOptions && {
+                frameworkOptions: options.frameworkOptions,
+            }),
         };
         // Read all SVG files
         const files = await FileSystem.readDir(srcDir);
@@ -70,12 +76,12 @@ export class SVGService {
                     defaultWidth: mergedConfig.defaultWidth,
                     defaultHeight: mergedConfig.defaultHeight,
                     defaultFill: mergedConfig.defaultFill,
-                    styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined))
+                    styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined)),
                 });
                 results.push({
                     success: processingResult.success,
                     file,
-                    error: processingResult.error
+                    error: processingResult.error,
                 });
             }
             catch (error) {
@@ -83,7 +89,7 @@ export class SVGService {
                 results.push({
                     success: false,
                     file,
-                    error: error
+                    error: error,
                 });
             }
         }
@@ -93,7 +99,9 @@ export class SVGService {
         logger.info(`Build complete: ${successful} successful, ${failed} failed`);
         if (failed > 0) {
             logger.warn('Some files failed to process:');
-            results.filter(r => !r.success).forEach(r => {
+            results
+                .filter(r => !r.success)
+                .forEach(r => {
                 logger.warn(`  - ${r.file}: ${r.error?.message}`);
             });
         }
@@ -126,7 +134,7 @@ export class SVGService {
             defaultWidth: mergedConfig.defaultWidth,
             defaultHeight: mergedConfig.defaultHeight,
             defaultFill: mergedConfig.defaultFill,
-            styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined))
+            styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined)),
         });
         if (!result.success) {
             throw result.error || new Error('Failed to generate component');
@@ -194,7 +202,7 @@ export class SVGService {
                 defaultWidth: mergedConfig.defaultWidth,
                 defaultHeight: mergedConfig.defaultHeight,
                 defaultFill: mergedConfig.defaultFill,
-                styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined))
+                styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined)),
             });
         }
         catch (error) {
@@ -267,7 +275,9 @@ export class SVGService {
      * Generate the content for index.ts file
      */
     generateIndexContent(componentNames) {
-        const imports = componentNames.map(name => `export { default as ${name} } from './${name}';`).join('\n');
+        const imports = componentNames
+            .map(name => `export { default as ${name} } from './${name}';`)
+            .join('\n');
         const exportAll = `
 // Export all components
 export {
@@ -300,7 +310,7 @@ ${imports}${exportAll}`;
         return {
             activeWatchers: this.activeWatchers.size,
             processingQueue: svgProcessor.getProcessingStats(),
-            watcherStats: fileWatcher.getWatchStats()
+            watcherStats: fileWatcher.getWatchStats(),
         };
     }
     /**
@@ -346,7 +356,9 @@ export class LockService {
     }
     writeLockFile(locks) {
         try {
-            FileSystem.writeJSONSync(this.getLockFilePath(), Array.from(locks), { spaces: 2 });
+            FileSystem.writeJSONSync(this.getLockFilePath(), Array.from(locks), {
+                spaces: 2,
+            });
             this.cachedLocks = locks;
         }
         catch (error) {

package/dist/templates/ComponentTemplate.js

@@ -13,32 +13,32 @@
  * @param [options.defaultFill="currentColor"] - The default fill color for the SVG.
  * @returns A string containing the complete TypeScript code for the React SVG component.
  */
-export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) {
+export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', }) {
     const cleaned = svgContent
-        .replace(/<\?xml.*?\?>/g, "")
-        .replace(/<!DOCTYPE.*?>/g, "")
-        .replace(/\r?\n|\r/g, "")
-        .replace(/\s{2,}/g, " ")
-        .replace(/style="[^"]*"/g, "")
-        .replace(/\s+xmlns(:xlink)?="[^"]*"/g, "")
+        .replace(/<\?xml.*?\?>/g, '')
+        .replace(/<!DOCTYPE.*?>/g, '')
+        .replace(/\r?\n|\r/g, '')
+        .replace(/\s{2,}/g, ' ')
+        .replace(/style="[^"]*"/g, '')
+        .replace(/\s+xmlns(:xlink)?="[^"]*"/g, '')
         .trim()
-        .replace(/^.*?<svg[^>]*>(.*?)<\/svg>.*$/i, "$1");
-    return `import type { SVGProps } from "react";
-const Svg${componentName} = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    width={props.width || ${defaultWidth}}
-    height={props.height || ${defaultHeight}}
-    fill={props.fill || "${defaultFill}"}
-    stroke={props.stroke || "none"}
-    className={props.className}
-    {...props}
-  >
-    ${cleaned}
-  </svg>
-);
-export default Svg${componentName};
+        .replace(/^.*?<svg[^>]*>(.*?)<\/svg>.*$/i, '$1');
+    return `import type { SVGProps } from "react";
+const Svg${componentName} = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width={props.width || ${defaultWidth}}
+    height={props.height || ${defaultHeight}}
+    fill={props.fill || "${defaultFill}"}
+    stroke={props.stroke || "none"}
+    className={props.className}
+    {...props}
+  >
+    ${cleaned}
+  </svg>
+);
+export default Svg${componentName};
 `;
 }

package/dist/types/index.d.ts

@@ -2,9 +2,15 @@
  * Type definitions for svger-cli
  */
 export type FrameworkType = 'react' | 'vue' | 'svelte' | 'angular' | 'solid' | 'preact' | 'lit' | 'vanilla';
+export type NamingConvention = 'kebab' | 'pascal' | 'camel';
+export interface OutputConfig {
+    naming?: NamingConvention;
+    extension?: string;
+    directory?: string;
+}
 export interface SVGConfig {
     source: string;
-    output: string;
+    output: string | OutputConfig;
     watch: boolean;
     framework: FrameworkType;
     typescript: boolean;

package/dist/utils/native.d.ts

@@ -2,9 +2,39 @@
  * Native Node.js utilities to replace external dependencies
  */
 /**
- * Convert string to PascalCase (replaces change-case package)
+ * Convert a string to PascalCase.
+ * Handles kebab-case, snake_case, and space-separated strings.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} PascalCase string.
+ *
+ * @example
+ * toPascalCase('hello-world') => 'HelloWorld'
+ * toPascalCase('hello_world') => 'HelloWorld'
+ * toPascalCase('hello world') => 'HelloWorld'
  */
 export declare function toPascalCase(str: string): string;
+/**
+ * Convert a string to camelCase.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} camelCase string.
+ *
+ * @example
+ * toCamelCase('hello-world') => 'helloWorld'
+ */
+export declare function toCamelCase(str: string): string;
+/**
+ * Convert a string to kebab-case.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} kebab-case string.
+ *
+ * @example
+ * toKebabCase('HelloWorld') => 'hello-world'
+ * toKebabCase('hello_world') => 'hello-world'
+ */
+export declare function toKebabCase(str: string): string;
 /**
  * Native file system utilities (replaces fs-extra package)
  */