svgfusion 1.4.0 → 1.5.0

package/README.md

@@ -28,9 +28,20 @@ A powerful Node.js CLI tool and library that converts SVG files into optimized R
 - **Batch Processing**: Convert entire directories of SVG files
 - **Production Ready**: Robust output with proper error handling
 - **Zero Configuration**: Works out of the box with sensible defaults
+- **Simple CLI**: Direct, intuitive command structure without subcommands
 
 ## Quick Start
 
+### Simple as One Command
+
+```bash
+# Convert all SVG files in a directory to React components
+npx svgfusion ./icons --output ./components
+
+# Add prefixes, suffixes, and generate index file
+npx svgfusion ./icons --prefix Icon --suffix Component --index
+```
+
 ### Installation
 
 ```bash
@@ -38,12 +49,9 @@ A powerful Node.js CLI tool and library that converts SVG files into optimized R
 npm install -g svgfusion
 
 # Or use npx (no installation needed)
-npx svgfusion convert ./icons --output ./components
+npx svgfusion ./icons --output ./components
 
 # Or install locally for programmatic usage
-
-# Add prefix and suffix to component names
-svgfusion convert ./icons --output ./components --prefix Icon --suffix Svg
 npm install svgfusion
 # or
 yarn add svgfusion
@@ -55,12 +63,12 @@ pnpm add svgfusion
 
 <img src="https://i.ibb.co/8n2b5mtp/cli.png" alt="SVGFusion CLI" width="512" >
 
-svgfusion convert ./icons --output ./components --prefix Icon --suffix Svg
+svgfusion ./icons --output ./components --prefix Icon --suffix Svg
 
 You can add a prefix and/or suffix to the generated component names using the `--prefix` and `--suffix` options:
 
 ```sh
-npx svgfusion convert ./svgs --prefix Icon --suffix Svg
+npx svgfusion ./svgs --prefix Icon --suffix Svg
 ```
 
 This will generate components like `IconStarSvg`, `IconUserSvg`, etc.
@@ -70,7 +78,7 @@ Both options sanitize input to remove symbols and spaces. If omitted, no prefix/
 #### Example
 
 ```sh
-npx svgfusion convert ./svgs --prefix App --suffix Widget
+npx svgfusion ./svgs --prefix App --suffix Widget
 # Output: AppStarWidget, AppUserWidget, ...
 ```
 
@@ -84,30 +92,40 @@ npx svgfusion --help
 
 ```bash
 # Convert to React components (default)
-svgfusion convert ./icons --output ./components
+svgfusion ./icons --output ./components
 
 # Convert to Vue 3 components
-svgfusion convert ./icons --output ./components --framework vue
+svgfusion ./icons --output ./components --framework vue
 
 # Single file conversion with TypeScript
-svgfusion convert ./star.svg --output ./components --typescript
+svgfusion ./star.svg --output ./components --typescript
+
+# Batch processing with recursive directory scanning
+svgfusion ./icons --output ./components --recursive
+
+# Generate index file for tree-shaking
+svgfusion ./icons --output ./components --index
 
 # Skip optimization
-svgfusion convert ./icons --output ./components --no-optimize
+svgfusion ./icons --output ./components --no-optimize
 
 # Using npx (no global install needed)
-npx svgfusion convert ./icons --output ./components --framework react
+npx svgfusion ./icons --output ./components --framework react
 ```
 
 ### CLI Options
 
 ```bash
-svgfusion convert <input> [options]
+svgfusion <input> [options]
 
 Options:
   -o, --output <output>        Output directory (default: "./components")
   -f, --framework <framework>  Target framework (react|vue) (default: "react")
   -t, --typescript             Generate TypeScript files
+  -r, --recursive              Recursively scan input directory for SVG files
+  --index                      Generate index file for tree-shaking
+  --index-format <format>      Index file format (ts|js) (default: "ts")
+  --export-type <type>         Export type (named|default) (default: "named")
   --no-optimize                Skip SVG optimization
   --prefix <prefix>            Add prefix to component name (sanitized)
   --suffix <suffix>            Add suffix to component name (sanitized)
@@ -120,17 +138,25 @@ Perfect for trying out SVGFusion or one-time conversions:
 
 ```bash
 # Convert React components
-npx svgfusion convert ./assets/icons --output ./src/components/icons
+npx svgfusion ./assets/icons --output ./src/components/icons
 
 # Convert Vue components with TypeScript
-npx svgfusion convert ./assets/icons --output ./src/components --framework vue --typescript
+npx svgfusion ./assets/icons --output ./src/components --framework vue --typescript
 
 # Convert single file
-npx svgfusion convert ./logo.svg --output ./src/components --framework react
+npx svgfusion ./logo.svg --output ./src/components --framework react
+
+# Batch convert with index generation
+npx svgfusion ./assets/icons --output ./src/components --recursive --index
+
+# Convert with custom naming
+npx svgfusion ./assets/icons --output ./src/components --prefix Icon --suffix Component --index
 ```
 
 ### Programmatic Usage
 
+#### Single File Conversion
+
 ```typescript
 import { convertToReact, convertToVue, readSvgFile } from 'svgfusion';
 
@@ -156,6 +182,41 @@ console.log(reactResult.code); // Generated React component
 console.log(vueResult.code); // Generated Vue component
 ```
 
+#### Batch Processing
+
+```typescript
+import { BatchConverter } from 'svgfusion';
+
+const batchConverter = new BatchConverter();
+
+// Convert entire directory
+const result = await batchConverter.convertBatch({
+  inputDir: './icons',
+  outputDir: './components',
+  framework: 'react',
+  recursive: true,
+  generateIndex: true,
+  typescript: true,
+  prefix: 'Icon',
+  suffix: 'Component',
+  indexFormat: 'ts',
+  exportType: 'named',
+});
+
+// Check results
+console.log(`Processed ${result.summary.total} files`);
+console.log(`Successful: ${result.summary.successful}`);
+console.log(`Failed: ${result.summary.failed}`);
+
+// Get component names
+const componentNames = batchConverter.getComponentNames(result);
+console.log('Generated components:', componentNames);
+
+// Generate summary report
+const report = batchConverter.generateSummaryReport(result);
+console.log(report);
+```
+
 ## API Reference
 
 ### `convertToReact(svgContent, options)`
@@ -186,6 +247,39 @@ Convert SVG to Vue 3 component. **Note: This is a synchronous function.**
 - `compositionApi?: boolean` - Use Composition API (default: `true`)
 - `optimize?: boolean` - Apply SVGO optimization (default: `true`)
 
+### `BatchConverter`
+
+Process multiple SVG files in batch operations.
+
+#### `convertBatch(options: BatchConversionOptions)`
+
+Convert multiple SVG files to framework components.
+
+**Options:**
+
+- `inputDir: string` - Input directory path
+- `outputDir: string` - Output directory path
+- `framework?: 'react' | 'vue'` - Target framework (default: 'react')
+- `recursive?: boolean` - Recursively scan directories (default: false)
+- `extensions?: string[]` - File extensions to process (default: ['.svg'])
+- `generateIndex?: boolean` - Generate index file (default: false)
+- `indexFormat?: 'ts' | 'js'` - Index file format (default: 'ts')
+- `exportType?: 'named' | 'default'` - Export type (default: 'named')
+- `prefix?: string` - Add prefix to component names
+- `suffix?: string` - Add suffix to component names
+- `typescript?: boolean` - Generate TypeScript components (default: true)
+- All other conversion options from `convertToReact`/`convertToVue`
+
+**Returns:** `Promise<BatchConversionResult>`
+
+#### `getComponentNames(results: BatchConversionResult)`
+
+Get array of generated component names from batch results.
+
+#### `generateSummaryReport(results: BatchConversionResult)`
+
+Generate a detailed summary report of the conversion process.
+
 ### `optimizeSvg(svgContent, config?)`
 
 Optimize SVG content using SVGO. **Note: This is a synchronous function.**
@@ -286,7 +380,7 @@ const customConfig = createSvgoConfig({
 const optimizedSvg = optimizeSvg(svgContent, customConfig);
 ```
 
-### Batch Processing
+### Manual Batch Processing
 
 ```typescript
 import {
@@ -308,6 +402,65 @@ for (const svgFile of svgFiles) {
 }
 ```
 
+### Index File Generation
+
+When using the `--index` flag or `generateIndex: true` option, SVGFusion creates an optimized index file for tree-shaking:
+
+#### Named Exports (Default)
+
+```typescript
+// Auto-generated index file for tree-shaking
+// This file exports all components for optimal bundling
+
+export { default as IconStar } from './IconStar';
+export { default as IconUser } from './IconUser';
+export { default as IconHome } from './IconHome';
+
+// Barrel export for convenience
+export { IconStar, IconUser, IconHome };
+
+// TypeScript component types
+export type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+export type IconComponents = {
+  IconStar: IconComponent;
+  IconUser: IconComponent;
+  IconHome: IconComponent;
+};
+```
+
+#### Default Exports
+
+```typescript
+// Auto-generated index file
+// Warning: Default exports are less tree-shakeable
+
+import IconStar from './IconStar';
+import IconUser from './IconUser';
+import IconHome from './IconHome';
+
+export default {
+  IconStar,
+  IconUser,
+  IconHome,
+};
+
+// Individual exports for flexibility
+export { default as IconStar } from './IconStar';
+export { default as IconUser } from './IconUser';
+export { default as IconHome } from './IconHome';
+```
+
+#### Usage
+
+```typescript
+// Tree-shakeable named imports (recommended)
+import { IconStar, IconUser } from './components';
+
+// Default import
+import * as Icons from './components';
+const { IconStar, IconUser } = Icons;
+```
+
 ## Complex Filename Support
 
 SVGFusion handles complex filenames from design systems:

package/dist/cli.js

@@ -44,6 +44,7 @@ var init_cjs_shims = __esm({
 // src/utils/files.ts
 var files_exports = {};
 __export(files_exports, {
+  ensureDir: () => ensureDir,
   ensureDirectoryExists: () => ensureDirectoryExists,
   getComponentFilename: () => getComponentFilename,
   getFileExtension: () => getFileExtension,
@@ -110,7 +111,7 @@ function getFileExtension(framework, typescript = true) {
 function getComponentFilename(_svgFilename, componentName, extension) {
   return `${componentName}${extension}`;
 }
-var import_promises, import_path, import_fs;
+var import_promises, import_path, import_fs, ensureDir;
 var init_files = __esm({
   "src/utils/files.ts"() {
     "use strict";
@@ -118,6 +119,151 @@ var init_files = __esm({
     import_promises = require("fs/promises");
     import_path = require("path");
     import_fs = require("fs");
+    ensureDir = ensureDirectoryExists;
+  }
+});
+
+// src/utils/index-generator.ts
+var index_generator_exports = {};
+__export(index_generator_exports, {
+  generateIndexFile: () => generateIndexFile,
+  generateReadmeContent: () => generateReadmeContent
+});
+function generateIndexFile(results, options) {
+  const { format, exportType, typescript } = options;
+  const sortedResults = [...results].sort(
+    (a, b) => a.componentName.localeCompare(b.componentName)
+  );
+  if (exportType === "default") {
+    return generateDefaultExports(sortedResults, format, typescript);
+  } else {
+    return generateNamedExports(sortedResults, format, typescript);
+  }
+}
+function generateNamedExports(results, format, typescript) {
+  let content = "";
+  content += `// Auto-generated index file for tree-shaking
+`;
+  content += `// This file exports all components for optimal bundling
+
+`;
+  for (const result of results) {
+    const importPath = getImportPath(result.filename);
+    content += `export { default as ${result.componentName} } from './${importPath}';
+`;
+  }
+  content += `
+// Barrel export for convenience
+`;
+  content += `export {
+`;
+  for (const result of results) {
+    content += `  ${result.componentName},
+`;
+  }
+  content += `};
+`;
+  if (typescript && format === "ts") {
+    content += `
+// TypeScript component types
+`;
+    content += `export type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+`;
+    content += `export type IconComponents = {
+`;
+    for (const result of results) {
+      content += `  ${result.componentName}: IconComponent;
+`;
+    }
+    content += `};
+`;
+  }
+  return content;
+}
+function generateDefaultExports(results, _format, _typescript) {
+  let content = "";
+  content += `// Auto-generated index file
+`;
+  content += `// Warning: Default exports are less tree-shakeable
+
+`;
+  for (const result of results) {
+    const importPath = getImportPath(result.filename);
+    content += `import ${result.componentName} from './${importPath}';
+`;
+  }
+  content += `
+export default {
+`;
+  for (const result of results) {
+    content += `  ${result.componentName},
+`;
+  }
+  content += `};
+`;
+  content += `
+// Individual exports for flexibility
+`;
+  for (const result of results) {
+    content += `export { default as ${result.componentName} } from './${getImportPath(result.filename)}';
+`;
+  }
+  return content;
+}
+function getImportPath(filename) {
+  return filename.replace(/\.(tsx?|jsx?|vue)$/, "");
+}
+function generateReadmeContent(results) {
+  const componentNames = results.map((r) => r.componentName).sort();
+  let content = `# Generated Components
+
+`;
+  content += `This directory contains ${results.length} auto-generated components from SVG files.
+
+`;
+  content += `## Usage
+
+`;
+  content += `### Named imports (recommended for tree-shaking)
+
+`;
+  content += `\`\`\`typescript
+`;
+  content += `import { ${componentNames.slice(0, 3).join(", ")} } from './index';
+`;
+  content += `\`\`\`
+
+`;
+  content += `### Default import
+
+`;
+  content += `\`\`\`typescript
+`;
+  content += `import * as Icons from './index';
+`;
+  content += `\`\`\`
+
+`;
+  content += `## Available Components
+
+`;
+  for (const name of componentNames) {
+    content += `- \`${name}\`
+`;
+  }
+  content += `
+## Tree-shaking
+
+`;
+  content += `This index file is optimized for tree-shaking. When using named imports, `;
+  content += `bundlers like webpack, Rollup, or Vite will only include the components you actually use.
+`;
+  return content;
+}
+var init_index_generator = __esm({
+  "src/utils/index-generator.ts"() {
+    "use strict";
+    init_cjs_shims();
   }
 });
 
@@ -130,11 +276,20 @@ var import_path2 = require("path");
 
 // src/utils/name.ts
 init_cjs_shims();
-var import_just_pascal_case = __toESM(require("just-pascal-case"));
+
+// src/utils/string.ts
+init_cjs_shims();
+var pascalCase = (str) => {
+  return str.match(
+    /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*[a-z]*|[A-Z]|[0-9]+[a-z]*/g
+  )?.map((x) => x.charAt(0).toUpperCase() + x.slice(1).toLowerCase()).join("") || "";
+};
+
+// src/utils/name.ts
 function svgToComponentName(filename) {
   let baseName = filename.replace(/\.svg$/i, "");
   baseName = processComplexFilename(baseName);
-  return (0, import_just_pascal_case.default)(baseName);
+  return pascalCase(baseName);
 }
 function processComplexFilename(filename) {
   let processed = filename.toLowerCase().replace(/[^a-zA-Z0-9]/g, " ");
@@ -142,9 +297,9 @@ function processComplexFilename(filename) {
   return processed;
 }
 function formatComponentName(name, prefix, suffix) {
-  const prefixPart = prefix ? (0, import_just_pascal_case.default)(prefix) : "";
-  const suffixPart = suffix ? (0, import_just_pascal_case.default)(suffix) : "";
-  const baseName = (0, import_just_pascal_case.default)(name);
+  const prefixPart = prefix ? pascalCase(prefix) : "";
+  const suffixPart = suffix ? pascalCase(suffix) : "";
+  const baseName = pascalCase(name);
   return `${prefixPart}${baseName}${suffixPart}`;
 }
 
@@ -477,11 +632,7 @@ export default {
 <template>
   ${svg}
 </template>`;
-  const style = `
-<style scoped>
-/* Component styles */
-</style>`;
-  return [script, template, style].filter(Boolean).join("\n");
+  return [script, template].filter(Boolean).join("\n");
 }
 
 // src/core/vue-converter.ts
@@ -624,16 +775,35 @@ if (process.argv.length === 1 || isNpxCall && process.argv.length === 2) {
 program.name("svgfusion").description(
   "Transform SVG files into production-ready React and Vue 3 components"
 ).version(packageJson.version);
-program.description("Convert SVG files to React or Vue components").argument("<input>", "Input SVG file or directory").option("-o, --output <output>", "Output directory", "./components").option(
+program.argument("[input]", "Input SVG file or directory").option("-o, --output <output>", "Output directory", "./components").option(
   "-f, --framework <framework>",
   "Target framework (react|vue)",
   "react"
-).option("-t, --typescript", "Generate TypeScript files", false).option("--no-optimize", "Skip SVG optimization").option("--prefix <prefix>", "Add prefix to component name").option("--suffix <suffix>", "Add suffix to component name").action(
+).option("-t, --typescript", "Generate TypeScript files", false).option(
+  "-r, --recursive",
+  "Recursively scan input directory for SVG files",
+  false
+).option("--no-optimize", "Skip SVG optimization").option("--prefix <prefix>", "Add prefix to component name").option("--suffix <suffix>", "Add suffix to component name").option("--index", "Generate index file for tree-shaking", false).option("--index-format <format>", "Index file format (ts|js)", "ts").option("--export-type <type>", "Export type (named|default)", "named").action(
   async (input, options) => {
+    if (!input) {
+      program.outputHelp();
+      process.exit(0);
+    }
     console.log(createBanner(colors));
     console.log(`${colors.blue}\u{1F504} Processing SVG files...${colors.reset}`);
     try {
-      const { framework, output, typescript, optimize: optimize2, prefix, suffix } = options;
+      const {
+        framework,
+        output,
+        typescript,
+        recursive,
+        optimize: optimize2,
+        prefix,
+        suffix,
+        index: generateIndex,
+        indexFormat,
+        exportType
+      } = options;
       if (framework !== "react" && framework !== "vue") {
         throw new Error('Framework must be either "react" or "vue"');
       }
@@ -646,7 +816,7 @@ program.description("Convert SVG files to React or Vue components").argument("<i
           throw new Error("Input file must be an SVG file");
         }
       } else if (inputStat.isDirectory()) {
-        svgFiles = await readSvgDirectory(input);
+        svgFiles = await readSvgDirectory(input, recursive);
       } else {
         throw new Error("Input must be a file or directory");
       }
@@ -656,6 +826,7 @@ program.description("Convert SVG files to React or Vue components").argument("<i
       console.log(
         `${colors.blue}\u{1F504} Converting ${svgFiles.length} SVG file(s)...${colors.reset}`
       );
+      const results = [];
       for (const filePath of svgFiles) {
         const svgContent = await readSvgFile(filePath);
         const optimizedSvg = optimize2 ? optimizeSvg(svgContent) : svgContent;
@@ -674,6 +845,21 @@ program.description("Convert SVG files to React or Vue components").argument("<i
         });
         const outputPath = (0, import_path3.join)(output, result.filename);
         await writeComponentFile(outputPath, result.code);
+        results.push(result);
+      }
+      if (generateIndex && results.length > 0) {
+        const { generateIndexFile: generateIndexFile2 } = await Promise.resolve().then(() => (init_index_generator(), index_generator_exports));
+        const indexContent = generateIndexFile2(results, {
+          format: indexFormat,
+          exportType,
+          typescript
+        });
+        const indexFilename = `index.${indexFormat}`;
+        const indexPath = (0, import_path3.join)(output, indexFilename);
+        await writeComponentFile(indexPath, indexContent);
+        console.log(
+          `${colors.green}\u{1F4C4} Generated ${indexFilename} for tree-shaking${colors.reset}`
+        );
       }
       console.log(
         `${colors.green}\u2705 Successfully converted ${svgFiles.length} SVG file(s) to ${framework} components${colors.reset}`
@@ -681,6 +867,10 @@ program.description("Convert SVG files to React or Vue components").argument("<i
       console.log(
         `${colors.dim}\u{1F4C1} Output location: ${colors.reset}${colors.cyan}${output}${colors.reset}`
       );
+      const componentNames = results.map((r) => r.componentName);
+      console.log(
+        `${colors.dim}\u{1F4E6} Generated components: ${colors.reset}${componentNames.join(", ")}`
+      );
     } catch (error) {
       console.error(
         `${colors.red}\u274C Error: ${error instanceof Error ? error.message : "Unknown error"}${colors.reset}`
@@ -692,10 +882,15 @@ program.description("Convert SVG files to React or Vue components").argument("<i
   "after",
   `
 ${colors.gray}Examples:${colors.reset}
-  ${colors.blue}svgfusion convert src/icons -o src/components${colors.reset}
-  ${colors.blue}svgfusion convert src/icons --framework vue --typescript${colors.reset}
-  ${colors.blue}svgfusion convert src/icons --optimize --prefix My --suffix Widget${colors.reset}
-  ${colors.blue}svgfusion convert src/icons --framework react --typescript --optimize${colors.reset}
+  ${colors.blue}svgfusion src/icons -o src/components${colors.reset}
+  ${colors.blue}svgfusion src/icons --framework vue --typescript${colors.reset}
+  ${colors.blue}svgfusion src/icons --recursive --index${colors.reset}
+  ${colors.blue}svgfusion src/icons --prefix Icon --suffix Component --index${colors.reset}
+  ${colors.blue}svgfusion src/icons --framework react --typescript --optimize${colors.reset}
 `
-).outputHelp();
+);
+if (process.argv.length === 2) {
+  program.outputHelp();
+  process.exit(0);
+}
 program.parse();

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 import { Config } from 'svgo';
-export { default as pascalCase } from 'just-pascal-case';
 
 interface ConversionOptions {
     name?: string;
@@ -41,6 +40,10 @@ interface BatchConversionOptions extends ConversionOptions {
     outputDir: string;
     recursive?: boolean;
     extensions?: string[];
+    generateIndex?: boolean;
+    indexFormat?: 'ts' | 'js';
+    exportType?: 'named' | 'default';
+    framework?: Framework;
 }
 interface BatchConversionResult {
     results: ConversionResult[];
@@ -69,6 +72,9 @@ interface CliOptions {
     format?: 'esm' | 'cjs';
     recursive?: boolean;
     verbose?: boolean;
+    generateIndex?: boolean;
+    indexFormat?: 'ts' | 'js';
+    exportType?: 'named' | 'default';
 }
 
 /**
@@ -129,6 +135,8 @@ declare function writeComponentFile(filePath: string, content: string): Promise<
  */
 declare function readSvgDirectory(dirPath: string, recursive?: boolean): Promise<string[]>;
 
+declare const pascalCase: (str: string) => string;
+
 /**
  * Convert SVG filename to a valid React component name
  * @param filename - The SVG filename
@@ -151,4 +159,4 @@ declare function sanitizeComponentName(name: string): string;
  */
 declare function formatComponentName(name: string, prefix?: string, suffix?: string): string;
 
-export { type BatchConversionOptions, type BatchConversionResult, type CliOptions, type ConversionError, type ConversionOptions, type ConversionResult, type Framework, type ReactConversionOptions, type VueConversionOptions, convertToReact, convertToVue, createSvgoConfig, formatComponentName, optimizeSvg, readSvgDirectory, readSvgFile, sanitizeComponentName, svgToComponentName, writeComponentFile, writeSvgFile };
+export { type BatchConversionOptions, type BatchConversionResult, type CliOptions, type ConversionError, type ConversionOptions, type ConversionResult, type Framework, type ReactConversionOptions, type VueConversionOptions, convertToReact, convertToVue, createSvgoConfig, formatComponentName, optimizeSvg, pascalCase, readSvgDirectory, readSvgFile, sanitizeComponentName, svgToComponentName, writeComponentFile, writeSvgFile };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { Config } from 'svgo';
-export { default as pascalCase } from 'just-pascal-case';
 
 interface ConversionOptions {
     name?: string;
@@ -41,6 +40,10 @@ interface BatchConversionOptions extends ConversionOptions {
     outputDir: string;
     recursive?: boolean;
     extensions?: string[];
+    generateIndex?: boolean;
+    indexFormat?: 'ts' | 'js';
+    exportType?: 'named' | 'default';
+    framework?: Framework;
 }
 interface BatchConversionResult {
     results: ConversionResult[];
@@ -69,6 +72,9 @@ interface CliOptions {
     format?: 'esm' | 'cjs';
     recursive?: boolean;
     verbose?: boolean;
+    generateIndex?: boolean;
+    indexFormat?: 'ts' | 'js';
+    exportType?: 'named' | 'default';
 }
 
 /**
@@ -129,6 +135,8 @@ declare function writeComponentFile(filePath: string, content: string): Promise<
  */
 declare function readSvgDirectory(dirPath: string, recursive?: boolean): Promise<string[]>;
 
+declare const pascalCase: (str: string) => string;
+
 /**
  * Convert SVG filename to a valid React component name
  * @param filename - The SVG filename
@@ -151,4 +159,4 @@ declare function sanitizeComponentName(name: string): string;
  */
 declare function formatComponentName(name: string, prefix?: string, suffix?: string): string;
 
-export { type BatchConversionOptions, type BatchConversionResult, type CliOptions, type ConversionError, type ConversionOptions, type ConversionResult, type Framework, type ReactConversionOptions, type VueConversionOptions, convertToReact, convertToVue, createSvgoConfig, formatComponentName, optimizeSvg, readSvgDirectory, readSvgFile, sanitizeComponentName, svgToComponentName, writeComponentFile, writeSvgFile };
+export { type BatchConversionOptions, type BatchConversionResult, type CliOptions, type ConversionError, type ConversionOptions, type ConversionResult, type Framework, type ReactConversionOptions, type VueConversionOptions, convertToReact, convertToVue, createSvgoConfig, formatComponentName, optimizeSvg, pascalCase, readSvgDirectory, readSvgFile, sanitizeComponentName, svgToComponentName, writeComponentFile, writeSvgFile };

package/dist/index.js

@@ -1,4 +1,4 @@
-'use strict';var promises=require('fs/promises'),path=require('path'),fs=require('fs'),core=require('@svgr/core'),svgo=require('svgo'),u=require('just-pascal-case');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var u__default=/*#__PURE__*/_interopDefault(u);var d=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var R=(e,r)=>()=>(e&&(r=e(e=0)),r);var q=(e,r)=>{for(var t in r)d(e,t,{get:r[t],enumerable:true});},_=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of L(r))!k.call(e,n)&&n!==t&&d(e,n,{get:()=>r[n],enumerable:!(o=I(r,n))||o.enumerable});return e};var M=e=>_(d({},"__esModule",{value:true}),e);var i=R(()=>{});var U={};q(U,{ensureDirectoryExists:()=>h,getComponentFilename:()=>ie,getFileExtension:()=>se,readSvgDirectory:()=>x,readSvgFile:()=>O,writeComponentFile:()=>D,writeSvgFile:()=>P});async function O(e){try{return await promises.readFile(e,"utf-8")}catch(r){throw new Error(`Failed to read SVG file: ${e}. ${r}`)}}async function P(e,r){try{await h(path.dirname(e)),await promises.writeFile(e,r,"utf-8");}catch(t){throw new Error(`Failed to write SVG file: ${e}. ${t}`)}}async function D(e,r){try{await h(path.dirname(e)),await promises.writeFile(e,r,"utf-8");}catch(t){throw new Error(`Failed to write component file: ${e}. ${t}`)}}async function x(e,r=false){try{let t=await promises.readdir(e),o=[];for(let n of t){let s=path.join(e,n),a=await promises.stat(s);if(a.isDirectory()&&r){let p=await x(s,r);o.push(...p);}else a.isFile()&&path.extname(n).toLowerCase()===".svg"&&o.push(s);}return o}catch(t){throw new Error(`Failed to read directory: ${e}. ${t}`)}}async function h(e){fs.existsSync(e)||await promises.mkdir(e,{recursive:true});}function se(e,r=true){return e==="react"?r?".tsx":".jsx":".vue"}function ie(e,r,t){return `${r}${t}`}var w=R(()=>{i();});i();i();i();i();var H={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:false,removeTitle:false,removeDesc:false,removeUselessStrokeAndFill:false,convertColors:{currentColor:true,names2hex:true,rgb2hex:true,shorthex:true,shortname:true}}}},"removeDimensions","cleanupNumericValues"]};function C(e,r=H){try{return svgo.optimize(e,r).data}catch(t){throw new Error(`Failed to optimize SVG: ${t}`)}}function J(e){let r=[{name:"preset-default",params:{overrides:{removeViewBox:!e.removeViewBox,removeTitle:!e.removeTitle,removeDesc:!e.removeDesc,removeUselessStrokeAndFill:!e.preserveClasses,convertColors:e.preserveColors?false:{currentColor:true,names2hex:true,rgb2hex:true,shorthex:true,shortname:true}}}},"cleanupNumericValues"];return e.removeDimensions!==false&&r.push("removeDimensions"),{plugins:r}}i();function K(e){let r=e.replace(/\.svg$/i,"");return r=Q(r),u__default.default(r)}function Q(e){let r=e.toLowerCase().replace(/[^a-zA-Z0-9]/g," ");return r=r.replace(/\s+/g," ").trim(),r}function W(e){return u__default.default(e.replace(/[^a-zA-Z0-9]/g," "))}function f(e,r,t){let o=r?u__default.default(r):"",n=t?u__default.default(t):"",s=u__default.default(e);return `${o}${s}${n}`}var g=class{async processSvg(r,t){let{optimize:o=true}=t;return o?C(r):r}generateComponentName(r){let{name:t,prefix:o,suffix:n}=r;return f(t||"Icon",o,n)}generateFilename(r,t,o=true){try{let{getFileExtension:n,getComponentFilename:s}=(w(),M(U)),a=n(t,o);return s("icon.svg",r,a)}catch{return `${r}${{react:o?".tsx":".jsx",vue:".vue"}[t]}`}}};i();function A(e){let{typescript:r=true,memo:t=true,ref:o=true,titleProp:n=true,descProp:s=true,icon:a=true,dimensions:p=false,replaceAttrValues:c={"#000":"currentColor","#000000":"currentColor"},svgProps:l={},expandProps:v=false,nativeProps:z=true,ariaLabelledBy:B=false,ariaHidden:j=false,role:G="img"}=e,b={typescript:r,memo:t,ref:o,titleProp:n,descProp:s,icon:a,dimensions:p,expandProps:v,svgProps:{className:"{className}",...o&&{ref:"{ref}"},...z&&{width:"{width}",height:"{height}",style:"{style}"},...B&&n&&s&&{"aria-labelledby":"{titleId} {descId}"},...j&&{"aria-hidden":"true"},role:G,...l},replaceAttrValues:c,plugins:["@svgr/plugin-svgo","@svgr/plugin-jsx","@svgr/plugin-prettier"]};return b.svgoConfig={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:false,removeTitle:!n,removeDesc:!s,removeUselessStrokeAndFill:false,removeUnusedNS:false,removeUselessDefs:false,convertShapeToPath:false,mergePaths:false,convertColors:false}}},...a&&!p?[{name:"removeAttrs",params:{attrs:["width","height"]}}]:[],...a?["cleanupNumericValues"]:[]]},b}function E(e,r,t){let o=e;return y(o)&&(o=$(o,r)),o}function y(e){return ["linearGradient","radialGradient","pattern","mask","filter","clipPath","marker","symbol","use"].some(t=>e.includes(`<${t}`)||e.includes(`</${t}`))}function $(e,r){let t=`${r.toLowerCase()}_`;return e=e.replace(/id="([^"]+)"/g,`id="${t}$1"`),e=e.replace(/url\(#([^)]+)\)/g,`url(#${t}$1)`),e=e.replace(/href="#([^"]+)"/g,`href="#${t}$1"`),e}var F=class extends g{async convert(r,t={}){try{let o=this.generateComponentName(t),n=await this.processSvg(r,t);y(n)&&(n=$(n,o));let s=A(t),a=await core.transform(n,s,{componentName:o}),p=E(a,o,t),c=this.generateFilename(o,"react",t.typescript??!0);return {code:p,filename:c,componentName:o}}catch(o){throw new Error(`Failed to convert SVG to React: ${o}`)}}};async function ce(e,r={}){return new F().convert(e,r)}i();i();function T(e,r){let{name:t,prefix:o,suffix:n,props:s=true,replaceAttrValues:a={"#000":"currentColor","#000000":"currentColor"}}=r,c=f(t||"Icon",o,n),l=le(e);return l=pe(l,a),me(l)&&(l=ue(l,c)),l=ge(l,s),{code:fe(l,c,r),componentName:c}}function le(e){return e.replace(/<\?xml[^>]*\?>\s*/,"").replace(/<!--[\s\S]*?-->/g,"").replace(/xmlns="[^"]*"/g,"").trim()}function pe(e,r){let t=e;for(let[o,n]of Object.entries(r)){let s=new RegExp(o.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"g");t=t.replace(s,n);}return t}function me(e){return ["linearGradient","radialGradient","pattern","mask","filter","clipPath","marker","symbol","use"].some(t=>e.includes(`<${t}`)||e.includes(`</${t}`))}function ue(e,r){let t=`${r.toLowerCase()}_`;return e=e.replace(/id="([^"]+)"/g,`id="${t}$1"`),e=e.replace(/url\(#([^)]+)\)/g,`url(#${t}$1)`),e=e.replace(/href="#([^"]+)"/g,`href="#${t}$1"`),e}function ge(e,r){return r?e.replace("<svg",'<svg :class="className" :style="style" v-bind="$attrs"'):e}function fe(e,r,t){let{typescript:o,compositionApi:n,props:s}=t,c=`<script${o?' lang="ts"':""}${n?" setup":""}>`;n?s&&(c+=`
+'use strict';var promises=require('fs/promises'),path=require('path'),fs=require('fs'),core=require('@svgr/core'),svgo=require('svgo');var d=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var R=(e,r)=>()=>(e&&(r=e(e=0)),r);var q=(e,r)=>{for(var t in r)d(e,t,{get:r[t],enumerable:true});},Z=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of I(r))!k.call(e,n)&&n!==t&&d(e,n,{get:()=>r[n],enumerable:!(o=G(r,n))||o.enumerable});return e};var _=e=>Z(d({},"__esModule",{value:true}),e);var i=R(()=>{});var D={};q(D,{ensureDir:()=>se,ensureDirectoryExists:()=>v,getComponentFilename:()=>ae,getFileExtension:()=>ie,readSvgDirectory:()=>x,readSvgFile:()=>O,writeComponentFile:()=>A,writeSvgFile:()=>P});async function O(e){try{return await promises.readFile(e,"utf-8")}catch(r){throw new Error(`Failed to read SVG file: ${e}. ${r}`)}}async function P(e,r){try{await v(path.dirname(e)),await promises.writeFile(e,r,"utf-8");}catch(t){throw new Error(`Failed to write SVG file: ${e}. ${t}`)}}async function A(e,r){try{await v(path.dirname(e)),await promises.writeFile(e,r,"utf-8");}catch(t){throw new Error(`Failed to write component file: ${e}. ${t}`)}}async function x(e,r=false){try{let t=await promises.readdir(e),o=[];for(let n of t){let s=path.join(e,n),a=await promises.stat(s);if(a.isDirectory()&&r){let m=await x(s,r);o.push(...m);}else a.isFile()&&path.extname(n).toLowerCase()===".svg"&&o.push(s);}return o}catch(t){throw new Error(`Failed to read directory: ${e}. ${t}`)}}async function v(e){fs.existsSync(e)||await promises.mkdir(e,{recursive:true});}function ie(e,r=true){return e==="react"?r?".tsx":".jsx":".vue"}function ae(e,r,t){return `${r}${t}`}var se,h=R(()=>{i();se=v;});i();i();i();i();var H={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:false,removeTitle:false,removeDesc:false,removeUselessStrokeAndFill:false,convertColors:{currentColor:true,names2hex:true,rgb2hex:true,shorthex:true,shortname:true}}}},"removeDimensions","cleanupNumericValues"]};function C(e,r=H){try{return svgo.optimize(e,r).data}catch(t){throw new Error(`Failed to optimize SVG: ${t}`)}}function J(e){let r=[{name:"preset-default",params:{overrides:{removeViewBox:!e.removeViewBox,removeTitle:!e.removeTitle,removeDesc:!e.removeDesc,removeUselessStrokeAndFill:!e.preserveClasses,convertColors:e.preserveColors?false:{currentColor:true,names2hex:true,rgb2hex:true,shorthex:true,shortname:true}}}},"cleanupNumericValues"];return e.removeDimensions!==false&&r.push("removeDimensions"),{plugins:r}}i();i();var u=e=>e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*[a-z]*|[A-Z]|[0-9]+[a-z]*/g)?.map(r=>r.charAt(0).toUpperCase()+r.slice(1).toLowerCase()).join("")||"";function K(e){let r=e.replace(/\.svg$/i,"");return r=Q(r),u(r)}function Q(e){let r=e.toLowerCase().replace(/[^a-zA-Z0-9]/g," ");return r=r.replace(/\s+/g," ").trim(),r}function W(e){return u(e.replace(/[^a-zA-Z0-9]/g," "))}function f(e,r,t){let o=r?u(r):"",n=t?u(t):"",s=u(e);return `${o}${s}${n}`}var g=class{async processSvg(r,t){let{optimize:o=true}=t;return o?C(r):r}generateComponentName(r){let{name:t,prefix:o,suffix:n}=r;return f(t||"Icon",o,n)}generateFilename(r,t,o=true){try{let{getFileExtension:n,getComponentFilename:s}=(h(),_(D)),a=n(t,o);return s("icon.svg",r,a)}catch{return `${r}${{react:o?".tsx":".jsx",vue:".vue"}[t]}`}}};i();function z(e){let{typescript:r=true,memo:t=true,ref:o=true,titleProp:n=true,descProp:s=true,icon:a=true,dimensions:m=false,replaceAttrValues:c={"#000":"currentColor","#000000":"currentColor"},svgProps:l={},expandProps:S=false,nativeProps:T=true,ariaLabelledBy:B=false,ariaHidden:L=false,role:j="img"}=e,b={typescript:r,memo:t,ref:o,titleProp:n,descProp:s,icon:a,dimensions:m,expandProps:S,svgProps:{className:"{className}",...o&&{ref:"{ref}"},...T&&{width:"{width}",height:"{height}",style:"{style}"},...B&&n&&s&&{"aria-labelledby":"{titleId} {descId}"},...L&&{"aria-hidden":"true"},role:j,...l},replaceAttrValues:c,plugins:["@svgr/plugin-svgo","@svgr/plugin-jsx","@svgr/plugin-prettier"]};return b.svgoConfig={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:false,removeTitle:!n,removeDesc:!s,removeUselessStrokeAndFill:false,removeUnusedNS:false,removeUselessDefs:false,convertShapeToPath:false,mergePaths:false,convertColors:false}}},...a&&!m?[{name:"removeAttrs",params:{attrs:["width","height"]}}]:[],...a?["cleanupNumericValues"]:[]]},b}function U(e,r,t){let o=e;return w(o)&&(o=$(o,r)),o}function w(e){return ["linearGradient","radialGradient","pattern","mask","filter","clipPath","marker","symbol","use"].some(t=>e.includes(`<${t}`)||e.includes(`</${t}`))}function $(e,r){let t=`${r.toLowerCase()}_`;return e=e.replace(/id="([^"]+)"/g,`id="${t}$1"`),e=e.replace(/url\(#([^)]+)\)/g,`url(#${t}$1)`),e=e.replace(/href="#([^"]+)"/g,`href="#${t}$1"`),e}var y=class extends g{async convert(r,t={}){try{let o=this.generateComponentName(t),n=await this.processSvg(r,t);w(n)&&(n=$(n,o));let s=z(t),a=await core.transform(n,s,{componentName:o}),m=U(a,o,t),c=this.generateFilename(o,"react",t.typescript??!0);return {code:m,filename:c,componentName:o}}catch(o){throw new Error(`Failed to convert SVG to React: ${o}`)}}};async function le(e,r={}){return new y().convert(e,r)}i();i();function E(e,r){let{name:t,prefix:o,suffix:n,props:s=true,replaceAttrValues:a={"#000":"currentColor","#000000":"currentColor"}}=r,c=f(t||"Icon",o,n),l=pe(e);return l=me(l,a),ue(l)&&(l=ge(l,c)),l=fe(l,s),{code:ve(l,c,r),componentName:c}}function pe(e){return e.replace(/<\?xml[^>]*\?>\s*/,"").replace(/<!--[\s\S]*?-->/g,"").replace(/xmlns="[^"]*"/g,"").trim()}function me(e,r){let t=e;for(let[o,n]of Object.entries(r)){let s=new RegExp(o.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"g");t=t.replace(s,n);}return t}function ue(e){return ["linearGradient","radialGradient","pattern","mask","filter","clipPath","marker","symbol","use"].some(t=>e.includes(`<${t}`)||e.includes(`</${t}`))}function ge(e,r){let t=`${r.toLowerCase()}_`;return e=e.replace(/id="([^"]+)"/g,`id="${t}$1"`),e=e.replace(/url\(#([^)]+)\)/g,`url(#${t}$1)`),e=e.replace(/href="#([^"]+)"/g,`href="#${t}$1"`),e}function fe(e,r){return r?e.replace("<svg",'<svg :class="className" :style="style" v-bind="$attrs"'):e}function ve(e,r,t){let{typescript:o,compositionApi:n,props:s}=t,c=`<script${o?' lang="ts"':""}${n?" setup":""}>`;n?s&&(c+=`
 interface Props {
   className?: string;
   style?: Record<string, any>;
@@ -16,8 +16,5 @@ export default {
 `,c+="</script>";let l=`
 <template>
   ${e}
-</template>`;return [c,l,`
-<style scoped>
-/* Component styles */
-</style>`].filter(Boolean).join(`
-`)}var S=class extends g{async convert(r,t={}){try{let o=await this.processSvg(r,t),{code:n,componentName:s}=T(o,t),a=this.generateFilename(s,"vue",t.typescript??!0);return {code:n,filename:a,componentName:s}}catch(o){throw new Error(`Failed to convert SVG to Vue: ${o}`)}}};async function ve(e,r={}){return new S().convert(e,r)}w();Object.defineProperty(exports,"pascalCase",{enumerable:true,get:function(){return u__default.default}});exports.convertToReact=ce;exports.convertToVue=ve;exports.createSvgoConfig=J;exports.formatComponentName=f;exports.optimizeSvg=C;exports.readSvgDirectory=x;exports.readSvgFile=O;exports.sanitizeComponentName=W;exports.svgToComponentName=K;exports.writeComponentFile=D;exports.writeSvgFile=P;
+</template>`;return [c,l].filter(Boolean).join(`
+`)}var F=class extends g{async convert(r,t={}){try{let o=await this.processSvg(r,t),{code:n,componentName:s}=E(o,t),a=this.generateFilename(s,"vue",t.typescript??!0);return {code:n,filename:a,componentName:s}}catch(o){throw new Error(`Failed to convert SVG to Vue: ${o}`)}}};async function de(e,r={}){return new F().convert(e,r)}h();exports.convertToReact=le;exports.convertToVue=de;exports.createSvgoConfig=J;exports.formatComponentName=f;exports.optimizeSvg=C;exports.pascalCase=u;exports.readSvgDirectory=x;exports.readSvgFile=O;exports.sanitizeComponentName=W;exports.svgToComponentName=K;exports.writeComponentFile=A;exports.writeSvgFile=P;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import {dirname,join,extname}from'path';import'url';import {readFile,writeFile,readdir,stat,mkdir}from'fs/promises';import {existsSync}from'fs';import {transform}from'@svgr/core';import {optimize}from'svgo';import g from'just-pascal-case';export{default as pascalCase}from'just-pascal-case';var C=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var N=(e,r)=>()=>(e&&(r=e(e=0)),r);var q=(e,r)=>{for(var t in r)C(e,t,{get:r[t],enumerable:true});},Z=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of _(r))!I.call(e,n)&&n!==t&&C(e,n,{get:()=>r[n],enumerable:!(o=L(r,n))||o.enumerable});return e};var H=e=>Z(C({},"__esModule",{value:true}),e);var i=N(()=>{});var A={};q(A,{ensureDirectoryExists:()=>w,getComponentFilename:()=>ae,getFileExtension:()=>ie,readSvgDirectory:()=>h,readSvgFile:()=>O,writeComponentFile:()=>T,writeSvgFile:()=>D});async function O(e){try{return await readFile(e,"utf-8")}catch(r){throw new Error(`Failed to read SVG file: ${e}. ${r}`)}}async function D(e,r){try{await w(dirname(e)),await writeFile(e,r,"utf-8");}catch(t){throw new Error(`Failed to write SVG file: ${e}. ${t}`)}}async function T(e,r){try{await w(dirname(e)),await writeFile(e,r,"utf-8");}catch(t){throw new Error(`Failed to write component file: ${e}. ${t}`)}}async function h(e,r=false){try{let t=await readdir(e),o=[];for(let n of t){let s=join(e,n),a=await stat(s);if(a.isDirectory()&&r){let p=await h(s,r);o.push(...p);}else a.isFile()&&extname(n).toLowerCase()===".svg"&&o.push(s);}return o}catch(t){throw new Error(`Failed to read directory: ${e}. ${t}`)}}async function w(e){existsSync(e)||await mkdir(e,{recursive:true});}function ie(e,r=true){return e==="react"?r?".tsx":".jsx":".vue"}function ae(e,r,t){return `${r}${t}`}var y=N(()=>{i();});i();i();i();i();var K={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:false,removeTitle:false,removeDesc:false,removeUselessStrokeAndFill:false,convertColors:{currentColor:true,names2hex:true,rgb2hex:true,shorthex:true,shortname:true}}}},"removeDimensions","cleanupNumericValues"]};function x(e,r=K){try{return optimize(e,r).data}catch(t){throw new Error(`Failed to optimize SVG: ${t}`)}}function M(e){let r=[{name:"preset-default",params:{overrides:{removeViewBox:!e.removeViewBox,removeTitle:!e.removeTitle,removeDesc:!e.removeDesc,removeUselessStrokeAndFill:!e.preserveClasses,convertColors:e.preserveColors?false:{currentColor:true,names2hex:true,rgb2hex:true,shorthex:true,shortname:true}}}},"cleanupNumericValues"];return e.removeDimensions!==false&&r.push("removeDimensions"),{plugins:r}}i();function Q(e){let r=e.replace(/\.svg$/i,"");return r=W(r),g(r)}function W(e){let r=e.toLowerCase().replace(/[^a-zA-Z0-9]/g," ");return r=r.replace(/\s+/g," ").trim(),r}function X(e){return g(e.replace(/[^a-zA-Z0-9]/g," "))}function v(e,r,t){let o=r?g(r):"",n=t?g(t):"",s=g(e);return `${o}${s}${n}`}var f=class{async processSvg(r,t){let{optimize:o=true}=t;return o?x(r):r}generateComponentName(r){let{name:t,prefix:o,suffix:n}=r;return v(t||"Icon",o,n)}generateFilename(r,t,o=true){try{let{getFileExtension:n,getComponentFilename:s}=(y(),H(A)),a=n(t,o);return s("icon.svg",r,a)}catch{return `${r}${{react:o?".tsx":".jsx",vue:".vue"}[t]}`}}};i();function E(e){let{typescript:r=true,memo:t=true,ref:o=true,titleProp:n=true,descProp:s=true,icon:a=true,dimensions:p=false,replaceAttrValues:c={"#000":"currentColor","#000000":"currentColor"},svgProps:l={},expandProps:d=false,nativeProps:G=true,ariaLabelledBy:U=false,ariaHidden:j=false,role:k="img"}=e,V={typescript:r,memo:t,ref:o,titleProp:n,descProp:s,icon:a,dimensions:p,expandProps:d,svgProps:{className:"{className}",...o&&{ref:"{ref}"},...G&&{width:"{width}",height:"{height}",style:"{style}"},...U&&n&&s&&{"aria-labelledby":"{titleId} {descId}"},...j&&{"aria-hidden":"true"},role:k,...l},replaceAttrValues:c,plugins:["@svgr/plugin-svgo","@svgr/plugin-jsx","@svgr/plugin-prettier"]};return V.svgoConfig={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:false,removeTitle:!n,removeDesc:!s,removeUselessStrokeAndFill:false,removeUnusedNS:false,removeUselessDefs:false,convertShapeToPath:false,mergePaths:false,convertColors:false}}},...a&&!p?[{name:"removeAttrs",params:{attrs:["width","height"]}}]:[],...a?["cleanupNumericValues"]:[]]},V}function z(e,r,t){let o=e;return $(o)&&(o=F(o,r)),o}function $(e){return ["linearGradient","radialGradient","pattern","mask","filter","clipPath","marker","symbol","use"].some(t=>e.includes(`<${t}`)||e.includes(`</${t}`))}function F(e,r){let t=`${r.toLowerCase()}_`;return e=e.replace(/id="([^"]+)"/g,`id="${t}$1"`),e=e.replace(/url\(#([^)]+)\)/g,`url(#${t}$1)`),e=e.replace(/href="#([^"]+)"/g,`href="#${t}$1"`),e}var S=class extends f{async convert(r,t={}){try{let o=this.generateComponentName(t),n=await this.processSvg(r,t);$(n)&&(n=F(n,o));let s=E(t),a=await transform(n,s,{componentName:o}),p=z(a,o,t),c=this.generateFilename(o,"react",t.typescript??!0);return {code:p,filename:c,componentName:o}}catch(o){throw new Error(`Failed to convert SVG to React: ${o}`)}}};async function le(e,r={}){return new S().convert(e,r)}i();i();function B(e,r){let{name:t,prefix:o,suffix:n,props:s=true,replaceAttrValues:a={"#000":"currentColor","#000000":"currentColor"}}=r,c=v(t||"Icon",o,n),l=pe(e);return l=me(l,a),ue(l)&&(l=ge(l,c)),l=fe(l,s),{code:ve(l,c,r),componentName:c}}function pe(e){return e.replace(/<\?xml[^>]*\?>\s*/,"").replace(/<!--[\s\S]*?-->/g,"").replace(/xmlns="[^"]*"/g,"").trim()}function me(e,r){let t=e;for(let[o,n]of Object.entries(r)){let s=new RegExp(o.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"g");t=t.replace(s,n);}return t}function ue(e){return ["linearGradient","radialGradient","pattern","mask","filter","clipPath","marker","symbol","use"].some(t=>e.includes(`<${t}`)||e.includes(`</${t}`))}function ge(e,r){let t=`${r.toLowerCase()}_`;return e=e.replace(/id="([^"]+)"/g,`id="${t}$1"`),e=e.replace(/url\(#([^)]+)\)/g,`url(#${t}$1)`),e=e.replace(/href="#([^"]+)"/g,`href="#${t}$1"`),e}function fe(e,r){return r?e.replace("<svg",'<svg :class="className" :style="style" v-bind="$attrs"'):e}function ve(e,r,t){let{typescript:o,compositionApi:n,props:s}=t,c=`<script${o?' lang="ts"':""}${n?" setup":""}>`;n?s&&(c+=`
+import {dirname,join,extname}from'path';import'url';import {readFile,writeFile,readdir,stat,mkdir}from'fs/promises';import {existsSync}from'fs';import {transform}from'@svgr/core';import {optimize}from'svgo';var d=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var N=(e,r)=>()=>(e&&(r=e(e=0)),r);var q=(e,r)=>{for(var t in r)d(e,t,{get:r[t],enumerable:true});},Z=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of _(r))!I.call(e,n)&&n!==t&&d(e,n,{get:()=>r[n],enumerable:!(o=k(r,n))||o.enumerable});return e};var H=e=>Z(d({},"__esModule",{value:true}),e);var i=N(()=>{});var z={};q(z,{ensureDir:()=>ie,ensureDirectoryExists:()=>C,getComponentFilename:()=>ce,getFileExtension:()=>ae,readSvgDirectory:()=>h,readSvgFile:()=>O,writeComponentFile:()=>D,writeSvgFile:()=>A});async function O(e){try{return await readFile(e,"utf-8")}catch(r){throw new Error(`Failed to read SVG file: ${e}. ${r}`)}}async function A(e,r){try{await C(dirname(e)),await writeFile(e,r,"utf-8");}catch(t){throw new Error(`Failed to write SVG file: ${e}. ${t}`)}}async function D(e,r){try{await C(dirname(e)),await writeFile(e,r,"utf-8");}catch(t){throw new Error(`Failed to write component file: ${e}. ${t}`)}}async function h(e,r=false){try{let t=await readdir(e),o=[];for(let n of t){let s=join(e,n),a=await stat(s);if(a.isDirectory()&&r){let u=await h(s,r);o.push(...u);}else a.isFile()&&extname(n).toLowerCase()===".svg"&&o.push(s);}return o}catch(t){throw new Error(`Failed to read directory: ${e}. ${t}`)}}async function C(e){existsSync(e)||await mkdir(e,{recursive:true});}function ae(e,r=true){return e==="react"?r?".tsx":".jsx":".vue"}function ce(e,r,t){return `${r}${t}`}var ie,w=N(()=>{i();ie=C;});i();i();i();i();var K={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:false,removeTitle:false,removeDesc:false,removeUselessStrokeAndFill:false,convertColors:{currentColor:true,names2hex:true,rgb2hex:true,shorthex:true,shortname:true}}}},"removeDimensions","cleanupNumericValues"]};function x(e,r=K){try{return optimize(e,r).data}catch(t){throw new Error(`Failed to optimize SVG: ${t}`)}}function M(e){let r=[{name:"preset-default",params:{overrides:{removeViewBox:!e.removeViewBox,removeTitle:!e.removeTitle,removeDesc:!e.removeDesc,removeUselessStrokeAndFill:!e.preserveClasses,convertColors:e.preserveColors?false:{currentColor:true,names2hex:true,rgb2hex:true,shorthex:true,shortname:true}}}},"cleanupNumericValues"];return e.removeDimensions!==false&&r.push("removeDimensions"),{plugins:r}}i();i();var g=e=>e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*[a-z]*|[A-Z]|[0-9]+[a-z]*/g)?.map(r=>r.charAt(0).toUpperCase()+r.slice(1).toLowerCase()).join("")||"";function Q(e){let r=e.replace(/\.svg$/i,"");return r=W(r),g(r)}function W(e){let r=e.toLowerCase().replace(/[^a-zA-Z0-9]/g," ");return r=r.replace(/\s+/g," ").trim(),r}function X(e){return g(e.replace(/[^a-zA-Z0-9]/g," "))}function v(e,r,t){let o=r?g(r):"",n=t?g(t):"",s=g(e);return `${o}${s}${n}`}var f=class{async processSvg(r,t){let{optimize:o=true}=t;return o?x(r):r}generateComponentName(r){let{name:t,prefix:o,suffix:n}=r;return v(t||"Icon",o,n)}generateFilename(r,t,o=true){try{let{getFileExtension:n,getComponentFilename:s}=(w(),H(z)),a=n(t,o);return s("icon.svg",r,a)}catch{return `${r}${{react:o?".tsx":".jsx",vue:".vue"}[t]}`}}};i();function T(e){let{typescript:r=true,memo:t=true,ref:o=true,titleProp:n=true,descProp:s=true,icon:a=true,dimensions:u=false,replaceAttrValues:c={"#000":"currentColor","#000000":"currentColor"},svgProps:l={},expandProps:b=false,nativeProps:U=true,ariaLabelledBy:G=false,ariaHidden:L=false,role:j="img"}=e,V={typescript:r,memo:t,ref:o,titleProp:n,descProp:s,icon:a,dimensions:u,expandProps:b,svgProps:{className:"{className}",...o&&{ref:"{ref}"},...U&&{width:"{width}",height:"{height}",style:"{style}"},...G&&n&&s&&{"aria-labelledby":"{titleId} {descId}"},...L&&{"aria-hidden":"true"},role:j,...l},replaceAttrValues:c,plugins:["@svgr/plugin-svgo","@svgr/plugin-jsx","@svgr/plugin-prettier"]};return V.svgoConfig={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:false,removeTitle:!n,removeDesc:!s,removeUselessStrokeAndFill:false,removeUnusedNS:false,removeUselessDefs:false,convertShapeToPath:false,mergePaths:false,convertColors:false}}},...a&&!u?[{name:"removeAttrs",params:{attrs:["width","height"]}}]:[],...a?["cleanupNumericValues"]:[]]},V}function E(e,r,t){let o=e;return $(o)&&(o=y(o,r)),o}function $(e){return ["linearGradient","radialGradient","pattern","mask","filter","clipPath","marker","symbol","use"].some(t=>e.includes(`<${t}`)||e.includes(`</${t}`))}function y(e,r){let t=`${r.toLowerCase()}_`;return e=e.replace(/id="([^"]+)"/g,`id="${t}$1"`),e=e.replace(/url\(#([^)]+)\)/g,`url(#${t}$1)`),e=e.replace(/href="#([^"]+)"/g,`href="#${t}$1"`),e}var F=class extends f{async convert(r,t={}){try{let o=this.generateComponentName(t),n=await this.processSvg(r,t);$(n)&&(n=y(n,o));let s=T(t),a=await transform(n,s,{componentName:o}),u=E(a,o,t),c=this.generateFilename(o,"react",t.typescript??!0);return {code:u,filename:c,componentName:o}}catch(o){throw new Error(`Failed to convert SVG to React: ${o}`)}}};async function pe(e,r={}){return new F().convert(e,r)}i();i();function B(e,r){let{name:t,prefix:o,suffix:n,props:s=true,replaceAttrValues:a={"#000":"currentColor","#000000":"currentColor"}}=r,c=v(t||"Icon",o,n),l=me(e);return l=ue(l,a),ge(l)&&(l=fe(l,c)),l=ve(l,s),{code:Ce(l,c,r),componentName:c}}function me(e){return e.replace(/<\?xml[^>]*\?>\s*/,"").replace(/<!--[\s\S]*?-->/g,"").replace(/xmlns="[^"]*"/g,"").trim()}function ue(e,r){let t=e;for(let[o,n]of Object.entries(r)){let s=new RegExp(o.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"g");t=t.replace(s,n);}return t}function ge(e){return ["linearGradient","radialGradient","pattern","mask","filter","clipPath","marker","symbol","use"].some(t=>e.includes(`<${t}`)||e.includes(`</${t}`))}function fe(e,r){let t=`${r.toLowerCase()}_`;return e=e.replace(/id="([^"]+)"/g,`id="${t}$1"`),e=e.replace(/url\(#([^)]+)\)/g,`url(#${t}$1)`),e=e.replace(/href="#([^"]+)"/g,`href="#${t}$1"`),e}function ve(e,r){return r?e.replace("<svg",'<svg :class="className" :style="style" v-bind="$attrs"'):e}function Ce(e,r,t){let{typescript:o,compositionApi:n,props:s}=t,c=`<script${o?' lang="ts"':""}${n?" setup":""}>`;n?s&&(c+=`
 interface Props {
   className?: string;
   style?: Record<string, any>;
@@ -16,8 +16,5 @@ export default {
 `,c+="</script>";let l=`
 <template>
   ${e}
-</template>`;return [c,l,`
-<style scoped>
-/* Component styles */
-</style>`].filter(Boolean).join(`
-`)}var b=class extends f{async convert(r,t={}){try{let o=await this.processSvg(r,t),{code:n,componentName:s}=B(o,t),a=this.generateFilename(s,"vue",t.typescript??!0);return {code:n,filename:a,componentName:s}}catch(o){throw new Error(`Failed to convert SVG to Vue: ${o}`)}}};async function de(e,r={}){return new b().convert(e,r)}y();export{le as convertToReact,de as convertToVue,M as createSvgoConfig,v as formatComponentName,x as optimizeSvg,h as readSvgDirectory,O as readSvgFile,X as sanitizeComponentName,Q as svgToComponentName,T as writeComponentFile,D as writeSvgFile};
+</template>`;return [c,l].filter(Boolean).join(`
+`)}var S=class extends f{async convert(r,t={}){try{let o=await this.processSvg(r,t),{code:n,componentName:s}=B(o,t),a=this.generateFilename(s,"vue",t.typescript??!0);return {code:n,filename:a,componentName:s}}catch(o){throw new Error(`Failed to convert SVG to Vue: ${o}`)}}};async function de(e,r={}){return new S().convert(e,r)}w();export{pe as convertToReact,de as convertToVue,M as createSvgoConfig,v as formatComponentName,x as optimizeSvg,g as pascalCase,h as readSvgDirectory,O as readSvgFile,X as sanitizeComponentName,Q as svgToComponentName,D as writeComponentFile,A as writeSvgFile};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svgfusion",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A powerful CLI tool and library that converts SVG files into production-ready React and Vue 3 components with TypeScript support and automatic optimization.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -90,13 +90,13 @@
     "chalk": "^5.0.0",
     "commander": "^11.0.0",
     "figlet": "^1.8.1",
-    "just-pascal-case": "^3.2.0",
     "ora": "^7.0.0",
     "svgo": "^3.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
+    "@jest/globals": "^30.0.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.3",