svgfusion 1.2.1 → 1.4.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,35 @@ yarn add svgfusion
 pnpm add svgfusion
 ```
 
+## CLI Options
+
+<img src="https://i.ibb.co/8n2b5mtp/cli.png" alt="SVGFusion CLI" width="512" >
+
+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 +109,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

@@ -520,43 +520,11 @@ async function convertToVue(svgContent, options = {}) {
 var import_url = require("url");
 var import_path3 = require("path");
 var import_fs2 = require("fs");
+
+// src/utils/banner.ts
+init_cjs_shims();
 var import_figlet = __toESM(require("figlet"));
-var colors = {
-  cyan: "\x1B[36m",
-  blue: "\x1B[34m",
-  green: "\x1B[32m",
-  red: "\x1B[31m",
-  gray: "\x1B[90m",
-  dim: "\x1B[2m",
-  // Bold gradient colors with dramatic artistic accents
-  darkBlue: "\x1B[38;2;0;100;255m",
-  // Electric blue (bold)
-  mediumBlue: "\x1B[38;2;50;150;255m",
-  // Bright blue
-  lightBlue: "\x1B[38;2;100;200;255m",
-  // Vivid sky blue
-  blueCyan: "\x1B[38;2;0;150;255m",
-  // Electric blue-cyan
-  mediumCyan: "\x1B[38;2;0;255;255m",
-  // Pure cyan (bold)
-  darkCyan: "\x1B[38;2;0;200;200m",
-  // Electric turquoise
-  softTeal: "\x1B[38;2;0;255;150m",
-  // Electric teal
-  tealGreen: "\x1B[38;2;0;200;100m",
-  // Vivid teal green
-  softGreen: "\x1B[38;2;50;255;100m",
-  // Electric green
-  mediumGreen: "\x1B[38;2;0;255;50m",
-  // Pure green (bold)
-  reset: "\x1B[0m"
-};
-var __filename2 = (0, import_url.fileURLToPath)(importMetaUrl);
-var __dirname = (0, import_path3.dirname)(__filename2);
-var packageJson = JSON.parse(
-  (0, import_fs2.readFileSync)((0, import_path3.join)(__dirname, "..", "package.json"), "utf-8")
-);
-function createBanner() {
+function createBanner(colors2) {
   const title = import_figlet.default.textSync("SVGfusion", {
     font: "ANSI Shadow",
     horizontalLayout: "default",
@@ -576,25 +544,25 @@ function createBanner() {
         return char;
       }
       if (diagonalProgress <= 0.1) {
-        return `${colors.darkBlue}${char}${colors.reset}`;
+        return `${colors2.darkBlue}${char}${colors2.reset}`;
       } else if (diagonalProgress <= 0.2) {
-        return `${colors.lightBlue}${char}${colors.reset}`;
+        return `${colors2.lightBlue}${char}${colors2.reset}`;
       } else if (diagonalProgress <= 0.32) {
-        return `${colors.mediumBlue}${char}${colors.reset}`;
+        return `${colors2.mediumBlue}${char}${colors2.reset}`;
       } else if (diagonalProgress <= 0.42) {
-        return `${colors.blueCyan}${char}${colors.reset}`;
+        return `${colors2.blueCyan}${char}${colors2.reset}`;
       } else if (diagonalProgress <= 0.52) {
-        return `${colors.mediumCyan}${char}${colors.reset}`;
+        return `${colors2.mediumCyan}${char}${colors2.reset}`;
       } else if (diagonalProgress <= 0.62) {
-        return `${colors.darkCyan}${char}${colors.reset}`;
+        return `${colors2.darkCyan}${char}${colors2.reset}`;
       } else if (diagonalProgress <= 0.72) {
-        return `${colors.softTeal}${char}${colors.reset}`;
+        return `${colors2.softTeal}${char}${colors2.reset}`;
       } else if (diagonalProgress <= 0.82) {
-        return `${colors.tealGreen}${char}${colors.reset}`;
+        return `${colors2.tealGreen}${char}${colors2.reset}`;
       } else if (diagonalProgress <= 0.92) {
-        return `${colors.softGreen}${char}${colors.reset}`;
+        return `${colors2.softGreen}${char}${colors2.reset}`;
       } else {
-        return `${colors.mediumGreen}${char}${colors.reset}`;
+        return `${colors2.mediumGreen}${char}${colors2.reset}`;
       }
     }).join("");
     return processedLine;
@@ -602,30 +570,70 @@ function createBanner() {
   return `
 ${gradientTitle}
 
-  ${colors.gray}Transform SVG files into production-ready components${colors.reset}
-            ${colors.blue}React${colors.reset} ${colors.gray}\u2022${colors.reset} ${colors.green}Vue 3${colors.reset} ${colors.gray}\u2022${colors.reset} ${colors.blue}TypeScript${colors.reset}
+  ${colors2.gray}Transform SVG files into production-ready components${colors2.reset}
+            ${colors2.blue}React${colors2.reset} ${colors2.gray}\u2022${colors2.reset} ${colors2.green}Vue 3${colors2.reset} ${colors2.gray}\u2022${colors2.reset} ${colors2.blue}TypeScript${colors2.reset}
   
-${colors.gray}\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${colors.reset}
+${colors2.gray}\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${colors2.reset}
 `;
 }
+
+// src/utils/colors.ts
+init_cjs_shims();
+var colors = {
+  cyan: "\x1B[36m",
+  blue: "\x1B[34m",
+  green: "\x1B[32m",
+  red: "\x1B[31m",
+  gray: "\x1B[90m",
+  dim: "\x1B[2m",
+  // Bold gradient colors with dramatic artistic accents
+  darkBlue: "\x1B[38;2;0;100;255m",
+  // Electric blue (bold)
+  mediumBlue: "\x1B[38;2;50;150;255m",
+  // Bright blue
+  lightBlue: "\x1B[38;2;100;200;255m",
+  // Vivid sky blue
+  blueCyan: "\x1B[38;2;0;150;255m",
+  // Electric blue-cyan
+  mediumCyan: "\x1B[38;2;0;255;255m",
+  // Pure cyan (bold)
+  darkCyan: "\x1B[38;2;0;200;200m",
+  // Electric turquoise
+  softTeal: "\x1B[38;2;0;255;150m",
+  // Electric teal
+  tealGreen: "\x1B[38;2;0;200;100m",
+  // Vivid teal green
+  softGreen: "\x1B[38;2;50;255;100m",
+  // Electric green
+  mediumGreen: "\x1B[38;2;0;255;50m",
+  // Pure green (bold)
+  reset: "\x1B[0m"
+};
+
+// src/cli.ts
+var __filename2 = (0, import_url.fileURLToPath)(importMetaUrl);
+var __dirname = (0, import_path3.dirname)(__filename2);
+var packageJson = JSON.parse(
+  (0, import_fs2.readFileSync)((0, import_path3.join)(__dirname, "..", "package.json"), "utf-8")
+);
 var program = new import_commander.Command();
 var isNpxCall = process.argv[1]?.includes("npx") || process.argv[1]?.includes("_npx");
-if (process.argv.length === 2 || isNpxCall && process.argv.length === 3) {
-  console.log(createBanner());
+if (process.argv.length === 1 || isNpxCall && process.argv.length === 2) {
+  console.log(createBanner(colors));
 }
 program.name("svgfusion").description(
   "Transform SVG files into production-ready React and Vue 3 components"
 ).version(packageJson.version);
-program.command("convert").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.description("Convert SVG files to React or Vue components").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").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(createBanner(colors));
     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 +660,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
@@ -676,5 +688,14 @@ program.command("convert").description("Convert SVG files to React or Vue compon
       process.exit(1);
     }
   }
-);
+).addHelpText("before", createBanner(colors)).addHelpText(
+  "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}
+`
+).outputHelp();
 program.parse();

package/package.json

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