svgfusion 1.0.0-beta.4 → 1.0.0-beta.6

package/README.md

@@ -1,6 +1,8 @@
 # SVGFusion
 
-**Transform SVG files into production-ready React and Vue 3 components with TypeScript support, automatic optimization, and intelligent naming.**
+**Transform SVG files into production-ready React and Vue 3 components with TypeScript support and automatic optimization.**
+
+A powerful CLI tool and library that converts SVG files into optimized React and Vue components with built-in TypeScript support, smart naming conventions, and flexible configuration options.
 
 [![npm version](https://badge.fury.io/js/svgfusion.svg)](https://badge.fury.io/js/svgfusion)
 [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
@@ -17,12 +19,21 @@
 - **Flexible API**: Both CLI and programmatic usage
 - **Batch Processing**: Convert entire directories of SVG files
 - **Complex Filenames**: Handles design system metadata and special characters
+- **Zero Configuration**: Works out of the box with sensible defaults
+- **Production Ready**: Optimized output with proper TypeScript types
 
 ## Quick Start
 
 ### Installation
 
 ```bash
+# Install globally (recommended for CLI usage)
+npm install -g svgfusion
+
+# Or use npx (no installation needed)
+npx svgfusion convert ./icons --output ./components
+
+# Or install locally for programmatic usage
 npm install svgfusion
 # or
 yarn add svgfusion
@@ -33,23 +44,57 @@ pnpm add svgfusion
 ### CLI Usage
 
 ```bash
-# Convert to React components
-svgfusion react ./icons --out ./components/react
+# Convert to React components (default)
+svgfusion convert ./icons --output ./components
 
 # Convert to Vue 3 components
-svgfusion vue ./icons --out ./components/vue
+svgfusion convert ./icons --output ./components --framework vue
+
+# Single file conversion with TypeScript
+svgfusion convert ./star.svg --output ./components --typescript
+
+# Skip optimization
+svgfusion convert ./icons --output ./components --no-optimize
+
+# Using npx (no global install needed)
+npx svgfusion convert ./icons --output ./components --framework react
+```
+
+### CLI Options
 
-# Single file conversion
-svgfusion react ./star.svg --name StarIcon --out ./components
+```bash
+svgfusion convert <input> [options]
+
+Options:
+  -o, --output <output>        Output directory (default: "./components")
+  -f, --framework <framework>  Target framework (react|vue) (default: "react")
+  -t, --typescript             Generate TypeScript files
+  --no-optimize                Skip SVG optimization
+  -h, --help                   Show help
+```
+
+### Using with npx (No Installation Required)
+
+Perfect for trying out SVGFusion or one-time conversions:
 
-# With optimization and prefix
-svgfusion react ./icons --out ./components --optimize --prefix Icon
+```bash
+# Convert React components
+npx svgfusion convert ./assets/icons --output ./src/components/icons
+
+# Convert Vue components with TypeScript
+npx svgfusion convert ./assets/icons --output ./src/components --framework vue --typescript
+
+# Convert single file
+npx svgfusion convert ./logo.svg --output ./src/components --framework react
 ```
 
 ### Programmatic Usage
 
 ```typescript
-import { convertToReact, convertToVue } from 'svgfusion';
+import { convertToReact, convertToVue, readSvgFile } from 'svgfusion';
+
+// Read SVG file
+const svgContent = await readSvgFile('./icons/star.svg');
 
 // React conversion
 const reactResult = await convertToReact(svgContent, {
@@ -60,7 +105,7 @@ const reactResult = await convertToReact(svgContent, {
 });
 
 // Vue conversion
-const vueResult = await convertToVue(svgContent, {
+const vueResult = convertToVue(svgContent, {
   name: 'StarIcon',
   typescript: true,
   scriptSetup: true,
@@ -88,7 +133,7 @@ Convert SVG to React component.
 
 ### `convertToVue(svgContent, options)`
 
-Convert SVG to Vue 3 component.
+Convert SVG to Vue 3 component. **Note: This is a synchronous function.**
 
 **Options:**
 
@@ -102,14 +147,14 @@ Convert SVG to Vue 3 component.
 
 ### `optimizeSvg(svgContent, config?)`
 
-Optimize SVG content using SVGO.
+Optimize SVG content using SVGO. **Note: This is a synchronous function.**
 
 ### File Utilities
 
-- `readSvgFile(filePath)` - Read SVG file
-- `writeSvgFile(filePath, content)` - Write SVG file
-- `readSvgDirectory(dirPath, recursive?)` - Read SVG files from directory
-- `writeComponentFile(filePath, content)` - Write component file
+- `readSvgFile(filePath)` - Read SVG file (async)
+- `writeSvgFile(filePath, content)` - Write SVG file (async)
+- `readSvgDirectory(dirPath, recursive?)` - Read SVG files from directory (async)
+- `writeComponentFile(filePath, content)` - Write component file (async)
 
 ## Examples
 

package/dist/cli.d.ts

@@ -1 +1,2 @@
-#!/usr/bin/env node
+
+export { }

package/dist/cli.js

@@ -1,56 +1,281 @@
 #!/usr/bin/env node
-'use strict';
-
-var commander = require('commander');
-var promises = require('fs/promises');
-var path = require('path');
-var fs = require('fs');
-var core = require('@svgr/core');
-var svgo = require('svgo');
-var url = require('url');
-
-var A=()=>typeof document>"u"?new URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href,u=A();async function R(e){try{return await promises.readFile(e,"utf-8")}catch(t){throw new Error(`Failed to read SVG file: ${e}. ${t}`)}}async function T(e,t){try{await H(path.dirname(e)),await promises.writeFile(e,t,"utf-8");}catch(r){throw new Error(`Failed to write component file: ${e}. ${r}`)}}async function x(e,t=!1){try{let r=await promises.readdir(e),n=[];for(let s of r){let i=path.join(e,s),o=await promises.stat(i);if(o.isDirectory()&&t){let p=await x(i,t);n.push(...p);}else o.isFile()&&path.extname(s).toLowerCase()===".svg"&&n.push(i);}return n}catch(r){throw new Error(`Failed to read directory: ${e}. ${r}`)}}async function H(e){fs.existsSync(e)||await promises.mkdir(e,{recursive:!0});}function d(e,t=!0){return e==="react"?t?".tsx":".jsx":".vue"}function w(e,t,r){return `${t}${r}`}var Q={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:!1,removeTitle:!1,removeDesc:!1,removeUselessStrokeAndFill:!1,convertColors:{currentColor:!0,names2hex:!0,rgb2hex:!0,shorthex:!0,shortname:!0}}}},"removeDimensions","cleanupNumericValues"]};function f(e,t=Q){try{return svgo.optimize(e,t).data}catch(r){throw new Error(`Failed to optimize SVG: ${r}`)}}function C(e){return e.replace(/[^a-zA-Z0-9\s-_]/g," ").split(/[\s-_]+/).filter(t=>t.length>0).map(t=>t.charAt(0).toUpperCase()+t.slice(1).toLowerCase()).join("")}function $(e,t,r){let n=t?C(t):"",s=r?C(r):"",i=C(e);return `${n}${i}${s}`}async function z(e,t={}){let{name:r,prefix:n,suffix:s,optimize:i=!0,typescript:o=!0,memo:p=!0,ref:m=!0,titleProp:l=!0,descProp:g=!0}=t;try{let a=e;i&&(a=f(e));let c=$(r||"icon",n,s),v=await core.transform(a,{typescript:o,memo:p,ref:m,titleProp:l,descProp:g,svgProps:{className:"{className}"}},{componentName:c}),h=o?`import { SVGProps } from 'react';
-`:"",y=p?`import { memo } from 'react';
-`:"",S=m?`import { forwardRef } from 'react';
-`:"",D=`
-export default ${c};
-export { ${c} };`,G=o?"SVGProps<SVGSVGElement> & { className?: string; }":"",N=o?`props: ${G}`:"props",k=p?"memo(":"",_=m?`forwardRef<SVGSVGElement, ${G}>(`:"";v=`${h}${y}${S}
-const ${c} = ${k}${_}(${N}) => {
-  return ${v};
-}${`${m?")":""}${p?")":""}`};
-
-${c}.displayName = "${c}";
-${D}`;let O=d("react",o),j=w("icon.svg",c,O);return {code:v,filename:j,componentName:c}}catch(a){throw new Error(`Failed to convert SVG to React: ${a}`)}}function E(e,t={}){let{name:r,prefix:n,suffix:s,optimize:i=!0,typescript:o=!0,compositionApi:p=!0,scriptSetup:m=!0}=t;try{let l=e;i&&(l=f(e));let a=$(r||"icon",n,s),F=l.replace(/<\?xml[^>]*\?>\s*/,"").replace(/xmlns="[^"]*"/g,"").replace(/width="[^"]*"/g,"").replace(/height="[^"]*"/g,"").replace(/<svg/,'<svg v-bind="$attrs"').replace(/class="([^"]*)"/g,'class="$1"').replace(/currentColor/g,"currentColor"),c=m?Y(o,a):ee(a,o),b=`<template>
-  ${F}
-</template>`,h=`${c}
-
-${b}
-
-<style scoped>
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// node_modules/tsup/assets/cjs_shims.js
+var getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
+var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
+
+// src/cli.ts
+var import_commander = require("commander");
+
+// src/utils/files.ts
+var import_promises = require("fs/promises");
+var import_path = require("path");
+var import_fs = require("fs");
+async function readSvgFile(filePath) {
+  try {
+    const content = await (0, import_promises.readFile)(filePath, "utf-8");
+    return content;
+  } catch (error) {
+    throw new Error(`Failed to read SVG file: ${filePath}. ${error}`);
+  }
+}
+async function writeComponentFile(filePath, content) {
+  try {
+    await ensureDirectoryExists((0, import_path.dirname)(filePath));
+    await (0, import_promises.writeFile)(filePath, content, "utf-8");
+  } catch (error) {
+    throw new Error(`Failed to write component file: ${filePath}. ${error}`);
+  }
+}
+async function readSvgDirectory(dirPath, recursive = false) {
+  try {
+    const files = await (0, import_promises.readdir)(dirPath);
+    const svgFiles = [];
+    for (const file of files) {
+      const filePath = (0, import_path.join)(dirPath, file);
+      const fileStat = await (0, import_promises.stat)(filePath);
+      if (fileStat.isDirectory() && recursive) {
+        const nestedFiles = await readSvgDirectory(filePath, recursive);
+        svgFiles.push(...nestedFiles);
+      } else if (fileStat.isFile() && (0, import_path.extname)(file).toLowerCase() === ".svg") {
+        svgFiles.push(filePath);
+      }
+    }
+    return svgFiles;
+  } catch (error) {
+    throw new Error(`Failed to read directory: ${dirPath}. ${error}`);
+  }
+}
+async function ensureDirectoryExists(dirPath) {
+  if (!(0, import_fs.existsSync)(dirPath)) {
+    await (0, import_promises.mkdir)(dirPath, { recursive: true });
+  }
+}
+function getFileExtension(framework, typescript = true) {
+  if (framework === "react") {
+    return typescript ? ".tsx" : ".jsx";
+  } else {
+    return typescript ? ".vue" : ".vue";
+  }
+}
+function getComponentFilename(_svgFilename, componentName, extension) {
+  return `${componentName}${extension}`;
+}
+
+// src/converters/react.ts
+var import_core = require("@svgr/core");
+
+// src/utils/svgo.ts
+var import_svgo = require("svgo");
+var defaultConfig = {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          removeViewBox: false,
+          removeTitle: false,
+          removeDesc: false,
+          removeUselessStrokeAndFill: false,
+          convertColors: {
+            currentColor: true,
+            names2hex: true,
+            rgb2hex: true,
+            shorthex: true,
+            // cspell:disable-line
+            shortname: true
+          }
+        }
+      }
+    },
+    "removeDimensions",
+    "cleanupNumericValues"
+  ]
+};
+function optimizeSvg(svgContent, config = defaultConfig) {
+  try {
+    const result = (0, import_svgo.optimize)(svgContent, config);
+    return result.data;
+  } catch (error) {
+    throw new Error(`Failed to optimize SVG: ${error}`);
+  }
+}
+
+// src/utils/name.ts
+function pascalCase(str) {
+  return str.replace(/[^a-zA-Z0-9\s-_]/g, " ").split(/[\s-_]+/).filter((word) => word.length > 0).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
+}
+function formatComponentName(name, prefix, suffix) {
+  const prefixPart = prefix ? pascalCase(prefix) : "";
+  const suffixPart = suffix ? pascalCase(suffix) : "";
+  const baseName = pascalCase(name);
+  return `${prefixPart}${baseName}${suffixPart}`;
+}
+
+// src/converters/react.ts
+async function convertToReact(svgContent, options = {}) {
+  const {
+    name,
+    prefix,
+    suffix,
+    optimize: optimize2 = true,
+    typescript = true,
+    memo = true,
+    ref = true,
+    titleProp = true,
+    descProp = true
+  } = options;
+  try {
+    let processedSvg = svgContent;
+    if (optimize2) {
+      processedSvg = optimizeSvg(svgContent);
+    }
+    const baseName = name || "icon";
+    const componentName = formatComponentName(baseName, prefix, suffix);
+    const svgrOptions = {
+      typescript,
+      memo,
+      ref,
+      titleProp,
+      descProp,
+      svgProps: {
+        className: "{className}"
+      }
+    };
+    let result = await (0, import_core.transform)(processedSvg, svgrOptions, {
+      componentName
+    });
+    const typeImports = typescript ? `import { SVGProps } from 'react';
+` : "";
+    const memoImport = memo ? `import { memo } from 'react';
+` : "";
+    const refImport = ref ? `import { forwardRef } from 'react';
+` : "";
+    const exports = `
+export default ${componentName};
+export { ${componentName} };`;
+    const propsType = typescript ? `SVGProps<SVGSVGElement> & { className?: string; }` : "";
+    const componentProps = typescript ? `props: ${propsType}` : "props";
+    const componentFunc = memo ? `memo(` : "";
+    const refWrapper = ref ? `forwardRef<SVGSVGElement, ${propsType}>(` : "";
+    const closingWrappers = `${ref ? ")" : ""}${memo ? ")" : ""}`;
+    result = `${typeImports}${memoImport}${refImport}
+const ${componentName} = ${componentFunc}${refWrapper}(${componentProps}) => {
+  return ${result};
+}${closingWrappers};
+
+${componentName}.displayName = "${componentName}";
+${exports}`;
+    const extension = getFileExtension("react", typescript);
+    const filename = getComponentFilename("icon.svg", componentName, extension);
+    return {
+      code: result,
+      filename,
+      componentName
+    };
+  } catch (error) {
+    throw new Error(`Failed to convert SVG to React: ${error}`);
+  }
+}
+
+// src/converters/vue.ts
+function convertToVue(svgContent, options = {}) {
+  const {
+    name,
+    prefix,
+    suffix,
+    optimize: optimize2 = true,
+    typescript = true,
+    compositionApi: _compositionApi = true,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    scriptSetup = true
+  } = options;
+  try {
+    let processedSvg = svgContent;
+    if (optimize2) {
+      processedSvg = optimizeSvg(svgContent);
+    }
+    const baseName = name || "icon";
+    const componentName = formatComponentName(baseName, prefix, suffix);
+    const cleanedSvg = processedSvg.replace(/<\?xml[^>]*\?>\s*/, "").replace(/xmlns="[^"]*"/g, "").replace(/width="[^"]*"/g, "").replace(/height="[^"]*"/g, "").replace(/<svg/, '<svg v-bind="$attrs"').replace(/class="([^"]*)"/g, 'class="$1"').replace(/currentColor/g, "currentColor");
+    const scriptTag = scriptSetup ? generateScriptSetup(typescript, componentName) : generateCompositionScript(componentName, typescript);
+    const template = `<template>
+  ${cleanedSvg}
+</template>`;
+    const style = `<style scoped>
 /* Add component-specific styles here */
-</style>`,y=d("vue",o),S=w("icon.svg",a,y);return {code:h,filename:S,componentName:a}}catch(l){throw new Error(`Failed to convert SVG to Vue: ${l}`)}}function Y(e,t){return `<script setup${e?' lang="ts"':""}>${e?`
+</style>`;
+    const vueComponent = `${scriptTag}
+
+${template}
+
+${style}`;
+    const extension = getFileExtension("vue", typescript);
+    const filename = getComponentFilename("icon.svg", componentName, extension);
+    return {
+      code: vueComponent,
+      filename,
+      componentName
+    };
+  } catch (error) {
+    throw new Error(`Failed to convert SVG to Vue: ${error}`);
+  }
+}
+function generateScriptSetup(typescript, componentName) {
+  const lang = typescript ? ' lang="ts"' : "";
+  const propsType = typescript ? `
 interface Props {
   class?: string;
   style?: string | Record<string, any>;
-}`:""}${e?`
+}` : "";
+  const propsDefinition = typescript ? `
 const props = withDefaults(defineProps<Props>(), {
   class: '',
   style: undefined,
-});`:`
+});` : `
 const props = withDefaults(defineProps(), {
   class: '',
   style: undefined,
-});`}
+});`;
+  return `<script setup${lang}>${propsType}${propsDefinition}
 
 // Component name for debugging
-const __name = '${t}';
-</script>`}function ee(e,t){let r=t?' lang="ts"':"",n=t?`
+const __name = '${componentName}';
+</script>`;
+}
+function generateCompositionScript(componentName, typescript) {
+  const lang = typescript ? ' lang="ts"' : "";
+  const propsType = typescript ? `
 interface Props {
   class?: string;
   style?: string | Record<string, any>;
-}`:"",s=t?`
-const ${e} = defineComponent({
-  name: '${e}',
+}` : "";
+  const exportStatement = typescript ? `
+const ${componentName} = defineComponent({
+  name: '${componentName}',
   props: {
     class: {
       type: String,
@@ -66,10 +291,10 @@ const ${e} = defineComponent({
   },
 });
 
-export default ${e};
-export { ${e} };`:`
-const ${e} = defineComponent({
-  name: '${e}',
+export default ${componentName};
+export { ${componentName} };` : `
+const ${componentName} = defineComponent({
+  name: '${componentName}',
   props: {
     class: {
       type: String,
@@ -85,7 +310,78 @@ const ${e} = defineComponent({
   },
 });
 
-export default ${e};
-export { ${e} };`;return `<script${r}>
-import { defineComponent } from 'vue';${n}${s}
-</script>`}var se=url.fileURLToPath(u),ie=path.dirname(se),ae=JSON.parse(fs.readFileSync(path.join(ie,"..","package.json"),"utf-8")),V=new commander.Command;V.name("svgfusion").description("Transform SVG files into production-ready React and Vue 3 components").version(ae.version);V.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("-f, --framework <framework>","Target framework (react|vue)","react").option("-t, --typescript","Generate TypeScript files",!1).option("--no-optimize","Skip SVG optimization").action(async(e,t)=>{console.log("\u{1F504} Processing SVG files...");try{let{framework:r,output:n,typescript:s,optimize:i}=t;if(r!=="react"&&r!=="vue")throw new Error('Framework must be either "react" or "vue"');let o=await x(e);if(o.length===0)throw new Error("No SVG files found in the input path");console.log(`\u{1F504} Converting ${o.length} SVG file(s)...`);for(let p of o){let m=await R(p),l=i?f(m):m,g=r==="react"?await z(l,{typescript:s}):E(l,{typescript:s}),a=path.join(n,g.filename);await T(a,g.code);}console.log(`\u2705 Successfully converted ${o.length} SVG file(s) to ${r} components`);}catch(r){console.error(`\u274C Error: ${r instanceof Error?r.message:"Unknown error"}`),process.exit(1);}});V.parse();
+export default ${componentName};
+export { ${componentName} };`;
+  return `<script${lang}>
+import { defineComponent } from 'vue';${propsType}${exportStatement}
+</script>`;
+}
+
+// src/cli.ts
+var import_url = require("url");
+var import_path2 = require("path");
+var import_fs2 = require("fs");
+var import_figlet = __toESM(require("figlet"));
+var __filename2 = (0, import_url.fileURLToPath)(importMetaUrl);
+var __dirname = (0, import_path2.dirname)(__filename2);
+var packageJson = JSON.parse(
+  (0, import_fs2.readFileSync)((0, import_path2.join)(__dirname, "..", "package.json"), "utf-8")
+);
+function createBanner() {
+  const title = import_figlet.default.textSync("SVGFUSION", {
+    font: "Train",
+    horizontalLayout: "fitted",
+    verticalLayout: "fitted",
+    width: 80,
+    whitespaceBreak: true
+  });
+  return `
+${title}
+
+  Transform SVG files into production-ready components
+            React \u2022 Vue 3 \u2022 TypeScript
+  
+\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
+`;
+}
+var program = new import_commander.Command();
+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(
+  "-f, --framework <framework>",
+  "Target framework (react|vue)",
+  "react"
+).option("-t, --typescript", "Generate TypeScript files", false).option("--no-optimize", "Skip SVG optimization").action(
+  async (input, options) => {
+    console.log(createBanner());
+    console.log("\u{1F504} Processing SVG files...");
+    try {
+      const { framework, output, typescript, optimize: optimize2 } = options;
+      if (framework !== "react" && framework !== "vue") {
+        throw new Error('Framework must be either "react" or "vue"');
+      }
+      const svgFiles = await readSvgDirectory(input);
+      if (svgFiles.length === 0) {
+        throw new Error("No SVG files found in the input path");
+      }
+      console.log(`\u{1F504} Converting ${svgFiles.length} SVG file(s)...`);
+      for (const filePath of svgFiles) {
+        const svgContent = await readSvgFile(filePath);
+        const optimizedSvg = optimize2 ? optimizeSvg(svgContent) : svgContent;
+        const result = framework === "react" ? await convertToReact(optimizedSvg, { typescript }) : convertToVue(optimizedSvg, { typescript });
+        const outputPath = (0, import_path2.join)(output, result.filename);
+        await writeComponentFile(outputPath, result.code);
+      }
+      console.log(
+        `\u2705 Successfully converted ${svgFiles.length} SVG file(s) to ${framework} components`
+      );
+    } catch (error) {
+      console.error(
+        `\u274C Error: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+      process.exit(1);
+    }
+  }
+);
+program.parse();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svgfusion",
-  "version": "1.0.0-beta.4",
-  "description": "Transform SVG files into production-ready React and Vue 3 components with TypeScript support, automatic optimization, and intelligent naming.",
+  "version": "1.0.0-beta.6",
+  "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",
   "types": "dist/index.d.ts",
@@ -53,7 +53,7 @@
     "url": "https://github.com/lolvoid/svgfusion/issues"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && chmod +x dist/cli.js",
     "dev": "tsup --watch",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
@@ -71,8 +71,10 @@
   },
   "dependencies": {
     "@svgr/core": "^8.0.0",
+    "@types/figlet": "^1.7.0",
     "chalk": "^5.0.0",
     "commander": "^11.0.0",
+    "figlet": "^1.8.1",
     "ora": "^7.0.0",
     "svgo": "^3.0.0"
   },

package/dist/cli.d.mts

@@ -1 +0,0 @@
-#!/usr/bin/env node

package/dist/cli.mjs

@@ -1,89 +0,0 @@
-#!/usr/bin/env node
-import { Command } from 'commander';
-import { readFile, writeFile, readdir, stat, mkdir } from 'fs/promises';
-import { dirname, join, extname } from 'path';
-import { readFileSync, existsSync } from 'fs';
-import { transform } from '@svgr/core';
-import { optimize } from 'svgo';
-import { fileURLToPath } from 'url';
-
-async function z(e){try{return await readFile(e,"utf-8")}catch(t){throw new Error(`Failed to read SVG file: ${e}. ${t}`)}}async function E(e,t){try{await H(dirname(e)),await writeFile(e,t,"utf-8");}catch(r){throw new Error(`Failed to write component file: ${e}. ${r}`)}}async function C(e,t=!1){try{let r=await readdir(e),n=[];for(let s of r){let i=join(e,s),o=await stat(i);if(o.isDirectory()&&t){let p=await C(i,t);n.push(...p);}else o.isFile()&&extname(s).toLowerCase()===".svg"&&n.push(i);}return n}catch(r){throw new Error(`Failed to read directory: ${e}. ${r}`)}}async function H(e){existsSync(e)||await mkdir(e,{recursive:!0});}function $(e,t=!0){return e==="react"?t?".tsx":".jsx":".vue"}function w(e,t,r){return `${t}${r}`}var Q={plugins:[{name:"preset-default",params:{overrides:{removeViewBox:!1,removeTitle:!1,removeDesc:!1,removeUselessStrokeAndFill:!1,convertColors:{currentColor:!0,names2hex:!0,rgb2hex:!0,shorthex:!0,shortname:!0}}}},"removeDimensions","cleanupNumericValues"]};function u(e,t=Q){try{return optimize(e,t).data}catch(r){throw new Error(`Failed to optimize SVG: ${r}`)}}function V(e){return e.replace(/[^a-zA-Z0-9\s-_]/g," ").split(/[\s-_]+/).filter(t=>t.length>0).map(t=>t.charAt(0).toUpperCase()+t.slice(1).toLowerCase()).join("")}function h(e,t,r){let n=t?V(t):"",s=r?V(r):"",i=V(e);return `${n}${i}${s}`}async function P(e,t={}){let{name:r,prefix:n,suffix:s,optimize:i=!0,typescript:o=!0,memo:p=!0,ref:m=!0,titleProp:l=!0,descProp:f=!0}=t;try{let a=e;i&&(a=u(e));let c=h(r||"icon",n,s),g=await transform(a,{typescript:o,memo:p,ref:m,titleProp:l,descProp:f,svgProps:{className:"{className}"}},{componentName:c}),y=o?`import { SVGProps } from 'react';
-`:"",S=p?`import { memo } from 'react';
-`:"",x=m?`import { forwardRef } from 'react';
-`:"",N=`
-export default ${c};
-export { ${c} };`,T=o?"SVGProps<SVGSVGElement> & { className?: string; }":"",k=o?`props: ${T}`:"props",O=p?"memo(":"",_=m?`forwardRef<SVGSVGElement, ${T}>(`:"";g=`${y}${S}${x}
-const ${c} = ${O}${_}(${k}) => {
-  return ${g};
-}${`${m?")":""}${p?")":""}`};
-
-${c}.displayName = "${c}";
-${N}`;let A=$("react",o),j=w("icon.svg",c,A);return {code:g,filename:j,componentName:c}}catch(a){throw new Error(`Failed to convert SVG to React: ${a}`)}}function R(e,t={}){let{name:r,prefix:n,suffix:s,optimize:i=!0,typescript:o=!0,compositionApi:p=!0,scriptSetup:m=!0}=t;try{let l=e;i&&(l=u(e));let a=h(r||"icon",n,s),b=l.replace(/<\?xml[^>]*\?>\s*/,"").replace(/xmlns="[^"]*"/g,"").replace(/width="[^"]*"/g,"").replace(/height="[^"]*"/g,"").replace(/<svg/,'<svg v-bind="$attrs"').replace(/class="([^"]*)"/g,'class="$1"').replace(/currentColor/g,"currentColor"),c=m?Y(o,a):ee(a,o),G=`<template>
-  ${b}
-</template>`,y=`${c}
-
-${G}
-
-<style scoped>
-/* Add component-specific styles here */
-</style>`,S=$("vue",o),x=w("icon.svg",a,S);return {code:y,filename:x,componentName:a}}catch(l){throw new Error(`Failed to convert SVG to Vue: ${l}`)}}function Y(e,t){return `<script setup${e?' lang="ts"':""}>${e?`
-interface Props {
-  class?: string;
-  style?: string | Record<string, any>;
-}`:""}${e?`
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  style: undefined,
-});`:`
-const props = withDefaults(defineProps(), {
-  class: '',
-  style: undefined,
-});`}
-
-// Component name for debugging
-const __name = '${t}';
-</script>`}function ee(e,t){let r=t?' lang="ts"':"",n=t?`
-interface Props {
-  class?: string;
-  style?: string | Record<string, any>;
-}`:"",s=t?`
-const ${e} = defineComponent({
-  name: '${e}',
-  props: {
-    class: {
-      type: String,
-      default: '',
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
-  },
-  setup(props: Props) {
-    return {};
-  },
-});
-
-export default ${e};
-export { ${e} };`:`
-const ${e} = defineComponent({
-  name: '${e}',
-  props: {
-    class: {
-      type: String,
-      default: '',
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
-  },
-  setup(props) {
-    return {};
-  },
-});
-
-export default ${e};
-export { ${e} };`;return `<script${r}>
-import { defineComponent } from 'vue';${n}${s}
-</script>`}var se=fileURLToPath(import.meta.url),ie=dirname(se),ae=JSON.parse(readFileSync(join(ie,"..","package.json"),"utf-8")),F=new Command;F.name("svgfusion").description("Transform SVG files into production-ready React and Vue 3 components").version(ae.version);F.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("-f, --framework <framework>","Target framework (react|vue)","react").option("-t, --typescript","Generate TypeScript files",!1).option("--no-optimize","Skip SVG optimization").action(async(e,t)=>{console.log("\u{1F504} Processing SVG files...");try{let{framework:r,output:n,typescript:s,optimize:i}=t;if(r!=="react"&&r!=="vue")throw new Error('Framework must be either "react" or "vue"');let o=await C(e);if(o.length===0)throw new Error("No SVG files found in the input path");console.log(`\u{1F504} Converting ${o.length} SVG file(s)...`);for(let p of o){let m=await z(p),l=i?u(m):m,f=r==="react"?await P(l,{typescript:s}):R(l,{typescript:s}),a=join(n,f.filename);await E(a,f.code);}console.log(`\u2705 Successfully converted ${o.length} SVG file(s) to ${r} components`);}catch(r){console.error(`\u274C Error: ${r instanceof Error?r.message:"Unknown error"}`),process.exit(1);}});F.parse();