svgfusion 1.2.1 → 1.3.0

package/README.md

@@ -41,6 +41,9 @@ npm install -g svgfusion
 npx svgfusion convert ./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
@@ -48,6 +51,33 @@ yarn add svgfusion
 pnpm add svgfusion
 ```
 
+## CLI Options
+
+svgfusion convert ./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
+```
+
+This will generate components like `IconStarSvg`, `IconUserSvg`, etc.
+
+Both options sanitize input to remove symbols and spaces. If omitted, no prefix/suffix is added.
+
+#### Example
+
+```sh
+npx svgfusion convert ./svgs --prefix App --suffix Widget
+# Output: AppStarWidget, AppUserWidget, ...
+```
+
+For more details, run:
+
+```sh
+npx svgfusion --help
+```
+
 ### CLI Usage
 
 ```bash
@@ -77,6 +107,8 @@ Options:
   -f, --framework <framework>  Target framework (react|vue) (default: "react")
   -t, --typescript             Generate TypeScript files
   --no-optimize                Skip SVG optimization
+  --prefix <prefix>            Add prefix to component name (sanitized)
+  --suffix <suffix>            Add suffix to component name (sanitized)
   -h, --help                   Show help
 ```
 

package/dist/cli.js

@@ -620,12 +620,12 @@ program.command("convert").description("Convert SVG files to React or Vue compon
   "-f, --framework <framework>",
   "Target framework (react|vue)",
   "react"
-).option("-t, --typescript", "Generate TypeScript files", false).option("--no-optimize", "Skip SVG optimization").action(
+).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(
   async (input, options) => {
     console.log(createBanner());
     console.log(`${colors.blue}\u{1F504} Processing SVG files...${colors.reset}`);
     try {
-      const { framework, output, typescript, optimize: optimize2 } = options;
+      const { framework, output, typescript, optimize: optimize2, prefix, suffix } = options;
       if (framework !== "react" && framework !== "vue") {
         throw new Error('Framework must be either "react" or "vue"');
       }
@@ -652,7 +652,11 @@ program.command("convert").description("Convert SVG files to React or Vue compon
         const svgContent = await readSvgFile(filePath);
         const optimizedSvg = optimize2 ? optimizeSvg(svgContent) : svgContent;
         const filename = (0, import_path2.basename)(filePath);
-        const componentName = svgToComponentName(filename);
+        const componentName = formatComponentName(
+          svgToComponentName(filename),
+          prefix,
+          suffix
+        );
         const result = framework === "react" ? await convertToReact(optimizedSvg, {
           typescript,
           name: componentName

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svgfusion",
-  "version": "1.2.1",
+  "version": "1.3.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",