svger-cli 2.0.3 → 2.0.5

package/dist/config.js

@@ -35,17 +35,100 @@ export async function initConfig() {
         return;
     }
     const defaultConfig = {
+        // Source & Output
         source: './src/assets/svg',
         output: './src/components/icons',
+        // Framework Configuration
+        framework: 'react',
+        typescript: true,
+        componentType: 'functional',
+        // Processing Options
         watch: false,
+        parallel: true,
+        batchSize: 10,
+        maxConcurrency: 4,
+        cache: true,
+        // Default Properties
         defaultWidth: 24,
         defaultHeight: 24,
         defaultFill: 'currentColor',
-        exclude: [],
+        defaultStroke: 'none',
+        defaultStrokeWidth: 1,
+        // Styling Configuration
         styleRules: {
             fill: 'inherit',
             stroke: 'none',
         },
+        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',
+            },
+        },
+        animations: [],
+        // Advanced Options
+        plugins: [],
+        exclude: [],
+        include: [],
+        // Error Handling
+        errorHandling: {
+            strategy: 'continue',
+            maxRetries: 3,
+            timeout: 30000,
+        },
+        // Performance Settings
+        performance: {
+            optimization: 'balanced',
+            memoryLimit: 512,
+            cacheTimeout: 3600000,
+        },
+        // Output Customization
+        outputConfig: {
+            naming: 'pascal',
+            extension: 'tsx',
+            directory: './src/components/icons',
+        },
+        // Framework-specific configurations
+        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',
+        },
+        // Legacy support (deprecated)
+        template: {
+            type: 'default',
+        },
+        frameworkOptions: {
+            forwardRef: true,
+            memo: false,
+            scriptSetup: true,
+            standalone: true,
+        },
     };
     writeConfig(defaultConfig);
     console.log('✅ Config file created:', getConfigPath());

package/dist/processors/svg-processor.js

@@ -71,12 +71,13 @@ export class SVGProcessor {
             case 'kebab':
                 // Keep kebab-case for filename, but component still needs PascalCase
                 return toPascalCase(baseName);
-            case 'camel':
+            case 'camel': {
                 // Convert to camelCase
                 const pascalName = toPascalCase(baseName);
                 return pascalName.charAt(0).toLowerCase() + pascalName.slice(1);
+            }
             case 'pascal':
-            default:
+            default: {
                 // Default to PascalCase
                 const componentName = toPascalCase(baseName);
                 // Ensure component name starts with uppercase letter
@@ -84,6 +85,7 @@ export class SVGProcessor {
                     return `Svg${componentName}`;
                 }
                 return componentName;
+            }
         }
     }
     /**
@@ -190,8 +192,9 @@ export class SVGProcessor {
         try {
             // Read SVG content
             const svgContent = await FileSystem.readFile(svgFilePath, 'utf-8');
-            // Generate component name (always PascalCase for component)
-            const componentName = this.generateComponentName(path.basename(svgFilePath));
+            // Generate component name using the specified naming convention
+            const namingConvention = options.namingConvention || 'pascal';
+            const componentName = this.generateComponentName(path.basename(svgFilePath), namingConvention);
             // Generate component code
             const componentCode = await this.generateComponent(componentName, svgContent, options);
             // Ensure output directory exists
@@ -200,8 +203,7 @@ 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;
+            // Generate filename using naming convention from options
             const fileName = this.generateFileName(componentName, fileExtension, namingConvention);
             // Write component file
             const outputFilePath = path.join(outputDir, fileName);

package/dist/services/config.js

@@ -20,39 +20,89 @@ export class ConfigService {
      */
     getDefaultConfig() {
         return {
+            // Source & Output
             source: './src/assets/svg',
             output: './src/components/icons',
+            // Framework Configuration
             framework: 'react',
             typescript: true,
+            componentType: 'functional',
+            // Processing Options
             watch: false,
+            parallel: true,
+            batchSize: 10,
+            maxConcurrency: 4,
+            cache: true,
+            // Default Properties
             defaultWidth: 24,
             defaultHeight: 24,
             defaultFill: 'currentColor',
-            exclude: [],
+            defaultStroke: 'none',
+            defaultStrokeWidth: 1,
+            // Styling Configuration
             styleRules: {
                 fill: 'inherit',
                 stroke: 'none',
             },
-            plugins: [],
-            template: {
-                type: 'default',
+            responsive: {
+                breakpoints: ['sm', 'md', 'lg', 'xl'],
+                values: {
+                    width: ['16px', '20px', '24px', '32px'],
+                    height: ['16px', '20px', '24px', '32px'],
+                },
             },
-            frameworkOptions: {
-                forwardRef: true,
-                memo: false,
-                scriptSetup: true,
-                standalone: true,
+            theme: {
+                mode: 'auto',
+                variables: {
+                    primary: 'currentColor',
+                    secondary: '#6b7280',
+                    accent: '#3b82f6',
+                },
             },
+            animations: [],
+            // Advanced Options
+            plugins: [],
+            exclude: [],
+            include: [],
+            // Error Handling
             errorHandling: {
-                skipOnError: false,
-                logLevel: 'info',
+                strategy: 'continue',
                 maxRetries: 3,
+                timeout: 30000,
             },
+            // Performance Settings
             performance: {
-                batchSize: 10,
-                parallel: true,
-                timeout: 30000,
-                enableCache: true,
+                optimization: 'balanced',
+                memoryLimit: 512,
+                cacheTimeout: 3600000,
+            },
+            // Output Customization
+            outputConfig: {
+                naming: 'pascal',
+                extension: 'tsx',
+                directory: './src/components/icons',
+            },
+            // Framework-specific configurations
+            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',
             },
         };
     }

package/dist/services/svg-service.js

@@ -76,7 +76,8 @@ export class SVGService {
                     defaultWidth: mergedConfig.defaultWidth,
                     defaultHeight: mergedConfig.defaultHeight,
                     defaultFill: mergedConfig.defaultFill,
-                    styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined)),
+                    namingConvention: mergedConfig.output?.naming || 'pascal',
+                    styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([, v]) => v !== undefined)),
                 });
                 results.push({
                     success: processingResult.success,
@@ -107,7 +108,7 @@ export class SVGService {
         }
         // Generate index.ts file with all component exports
         if (successful > 0) {
-            await this.generateIndexFile(outDir, results.filter(r => r.success).map(r => r.file));
+            await this.generateIndexFile(outDir, results.filter(r => r.success).map(r => r.file), mergedConfig);
         }
     }
     /**
@@ -134,7 +135,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');
@@ -202,7 +203,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) {
@@ -212,9 +213,10 @@ export class SVGService {
     /**
      * Handle file removal in watch mode
      */
-    async handleFileRemoval(filePath, outDir) {
+    async handleFileRemoval(filePath, outDir, config) {
         try {
-            const componentName = svgProcessor.generateComponentName(path.basename(filePath));
+            const namingConvention = config?.output?.naming || 'pascal';
+            const componentName = svgProcessor.generateComponentName(path.basename(filePath), namingConvention);
             const componentPath = path.join(outDir, `${componentName}.tsx`);
             if (await FileSystem.exists(componentPath)) {
                 await FileSystem.unlink(componentPath);
@@ -256,11 +258,12 @@ export class SVGService {
     /**
      * Generate index.ts file with all component exports
      */
-    async generateIndexFile(outDir, svgFiles) {
+    async generateIndexFile(outDir, svgFiles, config) {
         try {
+            const namingConvention = config?.output?.naming || 'pascal';
             const componentNames = svgFiles.map(file => {
                 const baseName = path.basename(file, '.svg');
-                return svgProcessor.generateComponentName(baseName);
+                return svgProcessor.generateComponentName(baseName, namingConvention);
             });
             const indexContent = this.generateIndexContent(componentNames);
             const indexPath = path.join(outDir, 'index.ts');
@@ -278,17 +281,6 @@ export class SVGService {
         const imports = componentNames
             .map(name => `export { default as ${name} } from './${name}';`)
             .join('\n');
-        const exportAll = `
-// Export all components
-export {
-${componentNames.map(name => `  ${name},`).join('\n')}
-};
-
-// Re-export for convenience
-export default {
-${componentNames.map(name => `  ${name},`).join('\n')}
-};
-`;
         return `/**
  * SVG Components Index
  * Generated by svger-cli
@@ -298,10 +290,10 @@ ${componentNames.map(name => `  ${name},`).join('\n')}
  * 
  * Import all components:
  * import * as Icons from './components';
- * import Icons from './components'; // default export
  */
 
-${imports}${exportAll}`;
+${imports}
+`;
     }
     /**
      * Get service statistics

package/dist/types/index.d.ts

@@ -3,40 +3,91 @@
  */
 export type FrameworkType = 'react' | 'vue' | 'svelte' | 'angular' | 'solid' | 'preact' | 'lit' | 'vanilla';
 export type NamingConvention = 'kebab' | 'pascal' | 'camel';
+export type ComponentType = 'functional' | 'class' | 'arrow';
+export type ErrorHandlingStrategy = 'continue' | 'stop' | 'retry';
+export type PerformanceOptimization = 'fast' | 'balanced' | 'maximum';
+export type ThemeMode = 'light' | 'dark' | 'auto';
+export type ChangeDetectionStrategy = 'Default' | 'OnPush';
+export type ViewEncapsulation = 'Emulated' | 'None' | 'ShadowDom';
 export interface OutputConfig {
     naming?: NamingConvention;
     extension?: string;
     directory?: string;
 }
+export interface ResponsiveConfig {
+    breakpoints: string[];
+    values: {
+        [property: string]: string[];
+    };
+}
+export interface ThemeConfig {
+    mode: ThemeMode;
+    variables: {
+        [name: string]: string;
+    };
+}
+export interface ErrorHandlingConfig {
+    strategy: ErrorHandlingStrategy;
+    maxRetries: number;
+    timeout: number;
+}
+export interface PerformanceConfig {
+    optimization: PerformanceOptimization;
+    memoryLimit: number;
+    cacheTimeout: number;
+}
+export interface ReactConfig {
+    componentType?: ComponentType;
+    forwardRef?: boolean;
+    memo?: boolean;
+    propsInterface?: string;
+    styledComponents?: boolean;
+    cssModules?: boolean;
+}
+export interface VueConfig {
+    api?: 'composition' | 'options';
+    setup?: boolean;
+    typescript?: boolean;
+    scoped?: boolean;
+    cssVariables?: boolean;
+}
+export interface AngularConfig {
+    standalone?: boolean;
+    signals?: boolean;
+    changeDetection?: ChangeDetectionStrategy;
+    encapsulation?: ViewEncapsulation;
+}
 export interface SVGConfig {
     source: string;
-    output: string | OutputConfig;
-    watch: boolean;
+    output: string;
     framework: FrameworkType;
     typescript: boolean;
+    componentType?: ComponentType;
+    watch: boolean;
+    parallel: boolean;
+    batchSize: number;
+    maxConcurrency: number;
+    cache: boolean;
     defaultWidth: number;
     defaultHeight: number;
     defaultFill: string;
-    exclude: string[];
+    defaultStroke?: string;
+    defaultStrokeWidth?: number;
     styleRules: {
-        fill?: string;
-        stroke?: string;
-        [key: string]: string | undefined;
-    };
-    plugins?: PluginConfig[];
-    template?: TemplateConfig;
-    frameworkOptions?: FrameworkOptions;
-    errorHandling?: {
-        skipOnError: boolean;
-        logLevel: 'debug' | 'info' | 'warn' | 'error';
-        maxRetries: number;
-    };
-    performance?: {
-        batchSize: number;
-        parallel: boolean;
-        timeout: number;
-        enableCache: boolean;
+        [property: string]: string;
     };
+    responsive?: ResponsiveConfig;
+    theme?: ThemeConfig;
+    animations?: string[];
+    plugins: PluginConfig[];
+    exclude: string[];
+    include?: string[];
+    errorHandling: ErrorHandlingConfig;
+    performance: PerformanceConfig;
+    outputConfig: OutputConfig;
+    react?: ReactConfig;
+    vue?: VueConfig;
+    angular?: AngularConfig;
 }
 export interface FrameworkOptions {
     composition?: boolean;
@@ -78,6 +129,7 @@ export interface ComponentGenerationOptions {
     styleRules?: Record<string, string>;
     template?: TemplateConfig;
     frameworkOptions?: FrameworkOptions;
+    namingConvention?: 'kebab' | 'pascal' | 'camel';
 }
 export interface TemplateConfig {
     type: 'default' | 'custom';

package/dist/utils/native.d.ts

@@ -1,9 +1,9 @@
+type BufferEncoding = 'ascii' | 'utf8' | 'utf-8' | 'utf16le' | 'ucs2' | 'ucs-2' | 'base64' | 'base64url' | 'latin1' | 'binary' | 'hex';
 /**
  * Native Node.js utilities to replace external dependencies
  */
 /**
- * Convert a string to PascalCase.
- * Handles kebab-case, snake_case, and space-separated strings.
+ * Convert a string to PascalCase, preserving existing capital letters.
  *
  * @param {string} str - Input string to convert.
  * @returns {string} PascalCase string.
@@ -12,6 +12,7 @@
  * toPascalCase('hello-world') => 'HelloWorld'
  * toPascalCase('hello_world') => 'HelloWorld'
  * toPascalCase('hello world') => 'HelloWorld'
+ * toPascalCase('ArrowBendDownLeft') => 'ArrowBendDownLeft'
  */
 export declare function toPascalCase(str: string): string;
 /**

package/dist/utils/native.js

@@ -4,8 +4,7 @@ import { promisify } from 'util';
  * Native Node.js utilities to replace external dependencies
  */
 /**
- * Convert a string to PascalCase.
- * Handles kebab-case, snake_case, and space-separated strings.
+ * Convert a string to PascalCase, preserving existing capital letters.
  *
  * @param {string} str - Input string to convert.
  * @returns {string} PascalCase string.
@@ -14,8 +13,13 @@ import { promisify } from 'util';
  * toPascalCase('hello-world') => 'HelloWorld'
  * toPascalCase('hello_world') => 'HelloWorld'
  * toPascalCase('hello world') => 'HelloWorld'
+ * toPascalCase('ArrowBendDownLeft') => 'ArrowBendDownLeft'
  */
 export function toPascalCase(str) {
+    // If the string is already in PascalCase format (no separators and starts with capital), preserve it
+    if (/^[A-Z]/.test(str) && !/[-_\s]/.test(str)) {
+        return str;
+    }
     return str
         .replace(/[-_\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))
         .replace(/^(.)/, char => char.toUpperCase());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svger-cli",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "Enterprise-grade, zero-dependency SVG to component converter supporting React, Vue, Angular, Svelte, Solid, Lit, Preact & Vanilla. Features auto-generated TypeScript exports, responsive design, themes, performance optimization & 85% faster processing than SVGR.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",