svgfusion 1.0.0 → 1.0.2

package/README.md

@@ -1,33 +1,33 @@
 <div align="center">
-  <img src="./logo.png" alt="SVGFusion Logo" width="120" height="120">
-  
-  # SVGFusion
-  
-  **Transform SVG files into production-ready React and Vue 3 components**
-  
-  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/)
-  [![React](https://img.shields.io/badge/React-20232A?style=flat&logo=react&logoColor=61DAFB)](https://reactjs.org/)
-  [![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=flat&logo=vue.js&logoColor=4FC08D)](https://vuejs.org/)
-  
-  [📚 Documentation](https://svgfusion.netlify.app) • [🎮 Playground](https://svgfusion.netlify.app/playground) • [📦 NPM](https://www.npmjs.com/package/svgfusion)
-  
+  <img src="https://i.ibb.co/TZFfpFL/logo.png" alt="SVGFusion Logo" width="120" height="120">
+
+# SVGFusion
+
+**Transform SVG files into production-ready React and Vue 3 components**
+
+A powerful Node.js CLI tool and library that converts SVG files into optimized React and Vue components with complex SVG support, TypeScript integration, and smart optimization for modern development workflows.
+
+[![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/)
+[![React](https://img.shields.io/badge/React-20232A?style=flat&logo=react&logoColor=61DAFB)](https://reactjs.org/)
+[![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=flat&logo=vue.js&logoColor=4FC08D)](https://vuejs.org/)
+
+[📚 Documentation](https://svgfusion.netlify.app) • [⚡ CLI Reference](https://svgfusion.netlify.app/docs/cli-usage) • [📦 NPM](https://www.npmjs.com/package/svgfusion)
+
 </div>
 
 ## Features
 
 - **Dual Framework Support**: Generate both React and Vue 3 components from the same SVG
+- **Complex SVG Support**: Handles gradients, masks, filters, patterns, and Figma exports
+- **ID Collision Prevention**: Automatic unique ID generation for complex SVGs
 - **Optimized Output**: Built-in SVGO optimization with customizable settings
-- **Multi-Color Support**: Preserves gradients, patterns, and complex color schemes
-- **Class-Based Styling**: Supports CSS classes, Tailwind, and framework-specific styling
+- **Icon Builder Ready**: Perfect for design systems and icon libraries
 - **TypeScript Ready**: Full TypeScript support with proper type definitions
 - **Flexible API**: Both CLI and programmatic usage
 - **Batch Processing**: Convert entire directories of SVG files
-- **Complex Filenames**: Handles design system metadata and special characters
+- **Production Ready**: Robust output with proper error handling
 - **Zero Configuration**: Works out of the box with sensible defaults
-- **Production Ready**: Optimized output with proper TypeScript types
 
 ## Quick Start
 
@@ -343,7 +343,3 @@ Contributions are welcome! Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for
 ## Changelog
 
 See [CHANGELOG.md](./CHANGELOG.md) for details.
-
----
-
-**Made with care for the developer community**

package/dist/cli.d.ts

@@ -1,2 +1,2 @@
 
-export { }
+export {  }

package/dist/cli.js

@@ -6,6 +6,13 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -22,18 +29,29 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), 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");
+// node_modules/.pnpm/tsup@8.5.0_typescript@5.8.3/node_modules/tsup/assets/cjs_shims.js
+var getImportMetaUrl, importMetaUrl;
+var init_cjs_shims = __esm({
+  "node_modules/.pnpm/tsup@8.5.0_typescript@5.8.3/node_modules/tsup/assets/cjs_shims.js"() {
+    "use strict";
+    getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
+    importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
+  }
+});
 
 // src/utils/files.ts
-var import_promises = require("fs/promises");
-var import_path = require("path");
-var import_fs = require("fs");
+var files_exports = {};
+__export(files_exports, {
+  ensureDirectoryExists: () => ensureDirectoryExists,
+  getComponentFilename: () => getComponentFilename,
+  getFileExtension: () => getFileExtension,
+  readSvgDirectory: () => readSvgDirectory,
+  readSvgFile: () => readSvgFile,
+  writeComponentFile: () => writeComponentFile,
+  writeSvgFile: () => writeSvgFile
+});
 async function readSvgFile(filePath) {
   try {
     const content = await (0, import_promises.readFile)(filePath, "utf-8");
@@ -42,6 +60,14 @@ async function readSvgFile(filePath) {
     throw new Error(`Failed to read SVG file: ${filePath}. ${error}`);
   }
 }
+async function writeSvgFile(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 SVG file: ${filePath}. ${error}`);
+  }
+}
 async function writeComponentFile(filePath, content) {
   try {
     await ensureDirectoryExists((0, import_path.dirname)(filePath));
@@ -84,11 +110,31 @@ function getFileExtension(framework, typescript = true) {
 function getComponentFilename(_svgFilename, componentName, extension) {
   return `${componentName}${extension}`;
 }
+var import_promises, import_path, import_fs;
+var init_files = __esm({
+  "src/utils/files.ts"() {
+    "use strict";
+    init_cjs_shims();
+    import_promises = require("fs/promises");
+    import_path = require("path");
+    import_fs = require("fs");
+  }
+});
+
+// src/cli.ts
+init_cjs_shims();
+var import_commander = require("commander");
+init_files();
 
-// src/converters/react.ts
+// src/core/react-converter.ts
+init_cjs_shims();
 var import_core = require("@svgr/core");
 
+// src/core/converter.ts
+init_cjs_shims();
+
 // src/utils/svgo.ts
+init_cjs_shims();
 var import_svgo = require("svgo");
 var defaultConfig = {
   plugins: [
@@ -125,6 +171,7 @@ function optimizeSvg(svgContent, config = defaultConfig) {
 }
 
 // src/utils/name.ts
+init_cjs_shims();
 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("");
 }
@@ -135,186 +182,328 @@ function formatComponentName(name, prefix, suffix) {
   return `${prefixPart}${baseName}${suffixPart}`;
 }
 
-// src/converters/react.ts
-async function convertToReact(svgContent, options = {}) {
+// src/core/converter.ts
+var BaseConverter = class {
+  /**
+   * Process SVG content with optimization
+   */
+  async processSvg(svgContent, options) {
+    const { optimize: optimize2 = true } = options;
+    if (optimize2) {
+      return optimizeSvg(svgContent);
+    }
+    return svgContent;
+  }
+  /**
+   * Generate component name from options
+   */
+  generateComponentName(options) {
+    const { name, prefix, suffix } = options;
+    const baseName = name || "Icon";
+    return formatComponentName(baseName, prefix, suffix);
+  }
+  /**
+   * Generate filename for component
+   */
+  generateFilename(componentName, framework, typescript = true) {
+    try {
+      const {
+        getFileExtension: getFileExtension2,
+        getComponentFilename: getComponentFilename2
+      } = (init_files(), __toCommonJS(files_exports));
+      const extension = getFileExtension2(framework, typescript);
+      return getComponentFilename2("icon.svg", componentName, extension);
+    } catch {
+      const extensions = {
+        react: typescript ? ".tsx" : ".jsx",
+        vue: ".vue"
+      };
+      return `${componentName}${extensions[framework]}`;
+    }
+  }
+};
+
+// src/core/processors/svgr-processor.ts
+init_cjs_shims();
+function createSvgrConfig(options) {
   const {
-    name,
-    prefix,
-    suffix,
-    optimize: optimize2 = true,
     typescript = true,
     memo = true,
     ref = true,
     titleProp = true,
-    descProp = true
+    descProp = true,
+    icon = true,
+    dimensions = false,
+    replaceAttrValues = { "#000": "currentColor", "#000000": "currentColor" },
+    svgProps = {},
+    expandProps = false,
+    nativeProps = true,
+    ariaLabelledBy = false,
+    ariaHidden = false,
+    role = "img"
   } = 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};
+  const config = {
+    typescript,
+    memo,
+    ref,
+    titleProp,
+    descProp,
+    icon,
+    dimensions,
+    expandProps,
+    svgProps: {
+      className: "{className}",
+      ...ref && { ref: "{ref}" },
+      ...nativeProps && {
+        width: "{width}",
+        height: "{height}",
+        style: "{style}"
+      },
+      // Accessibility attributes
+      ...ariaLabelledBy && titleProp && descProp && {
+        "aria-labelledby": "{titleId} {descId}"
+      },
+      ...ariaHidden && { "aria-hidden": "true" },
+      role,
+      ...svgProps
+    },
+    replaceAttrValues,
+    plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx", "@svgr/plugin-prettier"]
+  };
+  config.svgoConfig = {
+    plugins: [
+      {
+        name: "preset-default",
+        params: {
+          overrides: {
+            removeViewBox: false,
+            removeTitle: titleProp ? false : true,
+            removeDesc: descProp ? false : true,
+            removeUselessStrokeAndFill: false,
+            removeUnusedNS: false,
+            // Preserve complex features
+            removeUselessDefs: false,
+            convertShapeToPath: false,
+            mergePaths: false,
+            convertColors: false
+            // Disable color conversion to preserve gradients
+          }
+        }
+      },
+      ...icon && !dimensions ? [{ name: "removeAttrs", params: { attrs: ["width", "height"] } }] : [],
+      ...icon ? ["cleanupNumericValues"] : []
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]
+    // Type assertion to handle SVGO v3 plugin configuration complexity
+  };
+  return config;
+}
+function postProcessReactComponent(svgrOutput, componentName, _options) {
+  let processedCode = svgrOutput;
+  if (hasComplexFeatures(processedCode)) {
+    processedCode = addUniqueIds(processedCode, componentName);
+  }
+  return processedCode;
+}
+function hasComplexFeatures(code) {
+  const complexFeatures = [
+    "linearGradient",
+    "radialGradient",
+    "pattern",
+    "mask",
+    "filter",
+    "clipPath",
+    "marker",
+    "symbol",
+    "use"
+  ];
+  return complexFeatures.some(
+    (feature) => code.includes(`<${feature}`) || code.includes(`</${feature}`)
+  );
+}
+function addUniqueIds(code, componentName) {
+  const uniquePrefix = `${componentName.toLowerCase()}_`;
+  code = code.replace(/id="([^"]+)"/g, `id="${uniquePrefix}$1"`);
+  code = code.replace(/url\(#([^)]+)\)/g, `url(#${uniquePrefix}$1)`);
+  code = code.replace(/href="#([^"]+)"/g, `href="#${uniquePrefix}$1"`);
+  return code;
+}
 
-${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/core/react-converter.ts
+var ReactConverter = class extends BaseConverter {
+  /**
+   * Convert SVG to React component using SVGR
+   */
+  async convert(svgContent, options = {}) {
+    try {
+      const componentName = this.generateComponentName(options);
+      let processedSvg = await this.processSvg(svgContent, options);
+      if (hasComplexFeatures(processedSvg)) {
+        processedSvg = addUniqueIds(processedSvg, componentName);
+      }
+      const svgrConfig = createSvgrConfig(options);
+      const svgrResult = await (0, import_core.transform)(processedSvg, svgrConfig, {
+        componentName
+      });
+      const code = postProcessReactComponent(
+        svgrResult,
+        componentName,
+        options
+      );
+      const filename = this.generateFilename(
+        componentName,
+        "react",
+        options.typescript ?? true
+      );
+      return {
+        code,
+        filename,
+        componentName
+      };
+    } catch (error) {
+      throw new Error(`Failed to convert SVG to React: ${error}`);
+    }
   }
+};
+async function convertToReact(svgContent, options = {}) {
+  const converter = new ReactConverter();
+  return converter.convert(svgContent, options);
 }
 
-// src/converters/vue.ts
-function convertToVue(svgContent, options = {}) {
+// src/core/vue-converter.ts
+init_cjs_shims();
+
+// src/core/processors/vue-processor.ts
+init_cjs_shims();
+function generateVueComponent(svgContent, options) {
   const {
     name,
     prefix,
     suffix,
-    optimize: optimize2 = true,
-    typescript = true,
-    compositionApi: _compositionApi = true,
-    // eslint-disable-line @typescript-eslint/no-unused-vars
-    scriptSetup = true
+    props = true,
+    replaceAttrValues = { "#000": "currentColor", "#000000": "currentColor" }
   } = 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>`;
-    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}`);
+  const baseName = name || "Icon";
+  const componentName = formatComponentName(baseName, prefix, suffix);
+  let processedSvg = cleanSvgForVue(svgContent);
+  processedSvg = applyAttributeReplacements(processedSvg, replaceAttrValues);
+  if (hasComplexFeatures2(processedSvg)) {
+    processedSvg = addUniqueIds2(processedSvg, componentName);
   }
+  processedSvg = addVueAttributes(processedSvg, props);
+  const code = generateVueComponentCode(processedSvg, componentName, options);
+  return { code, componentName };
 }
-function generateScriptSetup(typescript, componentName) {
-  const lang = typescript ? ' lang="ts"' : "";
-  const propsType = typescript ? `
-interface Props {
-  class?: string;
-  style?: string | Record<string, any>;
-}` : "";
-  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 = '${componentName}';
-</script>`;
+function cleanSvgForVue(svgContent) {
+  return svgContent.replace(/<\?xml[^>]*\?>\s*/, "").replace(/<!--[\s\S]*?-->/g, "").replace(/xmlns="[^"]*"/g, "").trim();
+}
+function applyAttributeReplacements(svg, replacements) {
+  let processedSvg = svg;
+  for (const [from, to] of Object.entries(replacements)) {
+    const regex = new RegExp(from.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
+    processedSvg = processedSvg.replace(regex, to);
+  }
+  return processedSvg;
+}
+function hasComplexFeatures2(svg) {
+  const complexFeatures = [
+    "linearGradient",
+    "radialGradient",
+    "pattern",
+    "mask",
+    "filter",
+    "clipPath",
+    "marker",
+    "symbol",
+    "use"
+  ];
+  return complexFeatures.some(
+    (feature) => svg.includes(`<${feature}`) || svg.includes(`</${feature}`)
+  );
 }
-function generateCompositionScript(componentName, typescript) {
-  const lang = typescript ? ' lang="ts"' : "";
-  const propsType = typescript ? `
+function addUniqueIds2(svg, componentName) {
+  const uniquePrefix = `${componentName.toLowerCase()}_`;
+  svg = svg.replace(/id="([^"]+)"/g, `id="${uniquePrefix}$1"`);
+  svg = svg.replace(/url\(#([^)]+)\)/g, `url(#${uniquePrefix}$1)`);
+  svg = svg.replace(/href="#([^"]+)"/g, `href="#${uniquePrefix}$1"`);
+  return svg;
+}
+function addVueAttributes(svg, enableProps) {
+  if (!enableProps) return svg;
+  return svg.replace(
+    "<svg",
+    '<svg :class="className" :style="style" v-bind="$attrs"'
+  );
+}
+function generateVueComponentCode(svg, componentName, options) {
+  const { typescript, compositionApi, props } = options;
+  const scriptLang = typescript ? ' lang="ts"' : "";
+  const scriptSetup = compositionApi ? " setup" : "";
+  let script = `<script${scriptLang}${scriptSetup}>`;
+  if (compositionApi) {
+    if (props) {
+      script += `
 interface Props {
-  class?: string;
-  style?: string | Record<string, any>;
-}` : "";
-  const exportStatement = typescript ? `
-const ${componentName} = defineComponent({
-  name: '${componentName}',
-  props: {
-    class: {
-      type: String,
-      default: '',
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
-  },
-  setup(props: Props) {
-    return {};
-  },
-});
+  className?: string;
+  style?: Record<string, any>;
+}
 
-export default ${componentName};
-export { ${componentName} };` : `
-const ${componentName} = defineComponent({
+defineProps<Props>();
+`;
+    }
+  } else {
+    script += `
+export default {
   name: '${componentName}',
   props: {
-    class: {
-      type: String,
-      default: '',
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
+    className: String,
+    style: Object,
   },
-  setup(props) {
-    return {};
-  },
-});
+};
+`;
+  }
+  script += `</script>`;
+  const template = `
+<template>
+  ${svg}
+</template>`;
+  const style = `
+<style scoped>
+/* Component styles */
+</style>`;
+  return [script, template, style].filter(Boolean).join("\n");
+}
 
-export default ${componentName};
-export { ${componentName} };`;
-  return `<script${lang}>
-import { defineComponent } from 'vue';${propsType}${exportStatement}
-</script>`;
+// src/core/vue-converter.ts
+var VueConverter = class extends BaseConverter {
+  /**
+   * Convert SVG to Vue component
+   */
+  async convert(svgContent, options = {}) {
+    try {
+      const processedSvg = await this.processSvg(svgContent, options);
+      const { code, componentName } = generateVueComponent(
+        processedSvg,
+        options
+      );
+      const filename = this.generateFilename(
+        componentName,
+        "vue",
+        options.typescript ?? true
+      );
+      return {
+        code,
+        filename,
+        componentName
+      };
+    } catch (error) {
+      throw new Error(`Failed to convert SVG to Vue: ${error}`);
+    }
+  }
+};
+async function convertToVue(svgContent, options = {}) {
+  const converter = new VueConverter();
+  return converter.convert(svgContent, options);
 }
 
 // src/cli.ts
@@ -382,7 +571,7 @@ program.command("convert").description("Convert SVG files to React or Vue compon
       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 result = framework === "react" ? await convertToReact(optimizedSvg, { typescript }) : await convertToVue(optimizedSvg, { typescript });
         const outputPath = (0, import_path2.join)(output, result.filename);
         await writeComponentFile(outputPath, result.code);
       }

package/dist/index.d.mts

@@ -13,10 +13,22 @@ interface ReactConversionOptions extends ConversionOptions {
     ref?: boolean;
     titleProp?: boolean;
     descProp?: boolean;
+    icon?: boolean;
+    dimensions?: boolean;
+    replaceAttrValues?: Record<string, string>;
+    svgProps?: Record<string, string>;
+    expandProps?: boolean | 'start' | 'end';
+    nativeProps?: boolean;
+    ariaLabelledBy?: boolean;
+    ariaHidden?: boolean;
+    role?: 'img' | 'graphics-document' | 'graphics-symbol' | 'presentation';
 }
 interface VueConversionOptions extends ConversionOptions {
     compositionApi?: boolean;
     scriptSetup?: boolean;
+    props?: boolean;
+    dimensions?: boolean;
+    replaceAttrValues?: Record<string, string>;
 }
 interface ConversionResult {
     code: string;
@@ -60,19 +72,13 @@ interface CliOptions {
 
 /**
  * Convert SVG to React component
- * @param svgContent - SVG content string
- * @param options - Conversion options
- * @returns Conversion result with React component code
  */
 declare function convertToReact(svgContent: string, options?: ReactConversionOptions): Promise<ConversionResult>;
 
 /**
- * Convert SVG to Vue 3 component
- * @param svgContent - SVG content string
- * @param options - Conversion options
- * @returns Conversion result with Vue component code
+ * Convert SVG to Vue component
  */
-declare function convertToVue(svgContent: string, options?: VueConversionOptions): ConversionResult;
+declare function convertToVue(svgContent: string, options?: VueConversionOptions): Promise<ConversionResult>;
 
 /**
  * Optimize SVG content using SVGO
@@ -149,4 +155,4 @@ declare function pascalCase(str: string): string;
  */
 declare function formatComponentName(name: string, prefix?: string, suffix?: string): string;
 
-export { BatchConversionOptions, BatchConversionResult, CliOptions, ConversionError, ConversionOptions, ConversionResult, Framework, ReactConversionOptions, VueConversionOptions, convertToReact, convertToVue, createSvgoConfig, formatComponentName, optimizeSvg, pascalCase, 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

@@ -13,10 +13,22 @@ interface ReactConversionOptions extends ConversionOptions {
     ref?: boolean;
     titleProp?: boolean;
     descProp?: boolean;
+    icon?: boolean;
+    dimensions?: boolean;
+    replaceAttrValues?: Record<string, string>;
+    svgProps?: Record<string, string>;
+    expandProps?: boolean | 'start' | 'end';
+    nativeProps?: boolean;
+    ariaLabelledBy?: boolean;
+    ariaHidden?: boolean;
+    role?: 'img' | 'graphics-document' | 'graphics-symbol' | 'presentation';
 }
 interface VueConversionOptions extends ConversionOptions {
     compositionApi?: boolean;
     scriptSetup?: boolean;
+    props?: boolean;
+    dimensions?: boolean;
+    replaceAttrValues?: Record<string, string>;
 }
 interface ConversionResult {
     code: string;
@@ -60,19 +72,13 @@ interface CliOptions {
 
 /**
  * Convert SVG to React component
- * @param svgContent - SVG content string
- * @param options - Conversion options
- * @returns Conversion result with React component code
  */
 declare function convertToReact(svgContent: string, options?: ReactConversionOptions): Promise<ConversionResult>;
 
 /**
- * Convert SVG to Vue 3 component
- * @param svgContent - SVG content string
- * @param options - Conversion options
- * @returns Conversion result with Vue component code
+ * Convert SVG to Vue component
  */
-declare function convertToVue(svgContent: string, options?: VueConversionOptions): ConversionResult;
+declare function convertToVue(svgContent: string, options?: VueConversionOptions): Promise<ConversionResult>;
 
 /**
  * Optimize SVG content using SVGO
@@ -149,4 +155,4 @@ declare function pascalCase(str: string): string;
  */
 declare function formatComponentName(name: string, prefix?: string, suffix?: string): string;
 
-export { BatchConversionOptions, BatchConversionResult, CliOptions, ConversionError, ConversionOptions, ConversionResult, Framework, ReactConversionOptions, VueConversionOptions, convertToReact, convertToVue, createSvgoConfig, formatComponentName, optimizeSvg, pascalCase, 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,101 +1,23 @@
-'use strict';
-
-var core = require('@svgr/core');
-var svgo = require('svgo');
-var promises = require('fs/promises');
-var path = require('path');
-var fs = require('fs');
-
-var j={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 g(e,t=j){try{return svgo.optimize(e,t).data}catch(r){throw new Error(`Failed to optimize SVG: ${r}`)}}function B(e){let t=[{name:"preset-default",params:{overrides:{removeViewBox:!e.removeViewBox,removeTitle:!e.removeTitle,removeDesc:!e.removeDesc,removeUselessStrokeAndFill:!e.preserveClasses,convertColors:e.preserveColors?!1:{currentColor:!0,names2hex:!0,rgb2hex:!0,shorthex:!0,shortname:!0}}}},"cleanupNumericValues"];return e.removeDimensions!==!1&&t.push("removeDimensions"),{plugins:t}}function _(e){let t=e.replace(/\.svg$/i,"");return t=k(t),u(t)}function k(e){let t=e,r=t.match(/^([^,]+),\s*Type=([^,]+)/i);if(r)return t=`${r[1]} ${r[2]}`,t;let n=t.match(/Size=(\w+)/i),s=t.match(/Color=(\w+)/i),i=t.match(/Type=(\w+)/i);if(n||s||i){let o=[];if(i&&o.push(i[1]),s&&o.push(s[1]),n&&o.push(n[1]),o.length>0)return t=o.join(" "),t}return t=t.replace(/\b\w+=\w+\b/g,"").replace(/,\s*/g," ").replace(/[=]/g," ").replace(/\s+/g," ").trim(),(!t||t.length<2)&&(t=e),t}function M(e){return u(e.replace(/[^a-zA-Z0-9]/g," "))}function u(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 v(e,t,r){let n=t?u(t):"",s=r?u(r):"",i=u(e);return `${n}${i}${s}`}async function J(e){try{return await promises.readFile(e,"utf-8")}catch(t){throw new Error(`Failed to read SVG file: ${e}. ${t}`)}}async function K(e,t){try{await D(path.dirname(e)),await promises.writeFile(e,t,"utf-8");}catch(r){throw new Error(`Failed to write SVG file: ${e}. ${r}`)}}async function Q(e,t){try{await D(path.dirname(e)),await promises.writeFile(e,t,"utf-8");}catch(r){throw new Error(`Failed to write component file: ${e}. ${r}`)}}async function T(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 c=await T(i,t);n.push(...c);}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 D(e){fs.existsSync(e)||await promises.mkdir(e,{recursive:!0});}function C(e,t=!0){return e==="react"?t?".tsx":".jsx":".vue"}function $(e,t,r){return `${t}${r}`}async function Y(e,t={}){let{name:r,prefix:n,suffix:s,optimize:i=!0,typescript:o=!0,memo:c=!0,ref:l=!0,titleProp:m=!0,descProp:h=!0}=t;try{let p=e;i&&(p=g(e));let a=v(r||"icon",n,s),d=await core.transform(p,{typescript:o,memo:c,ref:l,titleProp:m,descProp:h,svgProps:{className:"{className}"}},{componentName:a}),x=o?`import { SVGProps } from 'react';
-`:"",w=c?`import { memo } from 'react';
-`:"",y=l?`import { forwardRef } from 'react';
-`:"",N=`
-export default ${a};
-export { ${a} };`,b=o?"SVGProps<SVGSVGElement> & { className?: string; }":"",z=o?`props: ${b}`:"props",E=c?"memo(":"",O=l?`forwardRef<SVGSVGElement, ${b}>(`:"";d=`${x}${w}${y}
-const ${a} = ${E}${O}(${z}) => {
-  return ${d};
-}${`${l?")":""}${c?")":""}`};
-
-${a}.displayName = "${a}";
-${N}`;let P=C("react",o),G=$("icon.svg",a,P);return {code:d,filename:G,componentName:a}}catch(p){throw new Error(`Failed to convert SVG to React: ${p}`)}}function ee(e,t={}){let{name:r,prefix:n,suffix:s,optimize:i=!0,typescript:o=!0,compositionApi:c=!0,scriptSetup:l=!0}=t;try{let m=e;i&&(m=g(e));let p=v(r||"icon",n,s),S=m.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"),a=l?te(o,p):re(p,o),F=`<template>
-  ${S}
-</template>`,x=`${a}
-
-${F}
-
-<style scoped>
-/* Add component-specific styles here */
-</style>`,w=C("vue",o),y=$("icon.svg",p,w);return {code:x,filename:y,componentName:p}}catch(m){throw new Error(`Failed to convert SVG to Vue: ${m}`)}}function te(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 re(e,t){let r=t?' lang="ts"':"",n=t?`
+'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 I=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var R=(e,r)=>()=>(e&&(r=e(e=0)),r);var _=(e,r)=>{for(var t in r)d(e,t,{get:r[t],enumerable:true});},q=(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=>q(d({},"__esModule",{value:true}),e);var a=R(()=>{});var T={};_(T,{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),i=await promises.stat(s);if(i.isDirectory()&&r){let p=await x(s,r);o.push(...p);}else i.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(()=>{a();});a();a();a();a();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}}a();function K(e){let r=e.replace(/\.svg$/i,"");return r=Q(r),u(r)}function Q(e){let r=e,t=r.match(/^([^,]+),\s*Type=([^,]+)/i);if(t)return r=`${t[1]} ${t[2]}`,r;let o=r.match(/Size=(\w+)/i),n=r.match(/Color=(\w+)/i),s=r.match(/Type=(\w+)/i);if(o||n||s){let i=[];if(s&&i.push(s[1]),n&&i.push(n[1]),o&&i.push(o[1]),i.length>0)return r=i.join(" "),r}return r=r.replace(/\b\w+=\w+\b/g,"").replace(/,\s*/g," ").replace(/[=]/g," ").replace(/\s+/g," ").trim(),(!r||r.length<2)&&(r=e),r}function W(e){return u(e.replace(/[^a-zA-Z0-9]/g," "))}function u(e){return e.replace(/[^a-zA-Z0-9\s-_]/g," ").split(/[\s-_]+/).filter(r=>r.length>0).map(r=>r.charAt(0).toUpperCase()+r.slice(1).toLowerCase()).join("")}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}=(w(),M(T)),i=n(t,o);return s("icon.svg",r,i)}catch{return `${r}${{react:o?".tsx":".jsx",vue:".vue"}[t]}`}}};a();function U(e){let{typescript:r=true,memo:t=true,ref:o=true,titleProp:n=true,descProp:s=true,icon:i=true,dimensions:p=false,replaceAttrValues:c={"#000":"currentColor","#000000":"currentColor"},svgProps:l={},expandProps:v=false,nativeProps:E=true,ariaLabelledBy:j=false,ariaHidden:B=false,role:G="img"}=e,b={typescript:r,memo:t,ref:o,titleProp:n,descProp:s,icon:i,dimensions:p,expandProps:v,svgProps:{className:"{className}",...o&&{ref:"{ref}"},...E&&{width:"{width}",height:"{height}",style:"{style}"},...j&&n&&s&&{"aria-labelledby":"{titleId} {descId}"},...B&&{"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}}},...i&&!p?[{name:"removeAttrs",params:{attrs:["width","height"]}}]:[],...i?["cleanupNumericValues"]:[]]},b}function A(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 S=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=U(t),i=await core.transform(n,s,{componentName:o}),p=A(i,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 S().convert(e,r)}a();a();function z(e,r){let{name:t,prefix:o,suffix:n,props:s=true,replaceAttrValues:i={"#000":"currentColor","#000000":"currentColor"}}=r,c=f(t||"Icon",o,n),l=le(e);return l=pe(l,i),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+=`
 interface Props {
-  class?: string;
-  style?: string | Record<string, any>;
-}`:"",s=t?`
-const ${e} = defineComponent({
-  name: '${e}',
+  className?: string;
+  style?: Record<string, any>;
+}
+
+defineProps<Props>();
+`):c+=`
+export default {
+  name: '${r}',
   props: {
-    class: {
-      type: String,
-      default: '',
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
+    className: String,
+    style: Object,
   },
-  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>`}
-
-exports.convertToReact = Y;
-exports.convertToVue = ee;
-exports.createSvgoConfig = B;
-exports.formatComponentName = v;
-exports.optimizeSvg = g;
-exports.pascalCase = u;
-exports.readSvgDirectory = T;
-exports.readSvgFile = J;
-exports.sanitizeComponentName = M;
-exports.svgToComponentName = _;
-exports.writeComponentFile = Q;
-exports.writeSvgFile = K;
+};
+`,c+="</script>";let l=`
+<template>
+  ${e}
+</template>`;return [c,l,`
+<style scoped>
+/* Component styles */
+</style>`].filter(Boolean).join(`
+`)}var F=class extends g{async convert(r,t={}){try{let o=await this.processSvg(r,t),{code:n,componentName:s}=z(o,t),i=this.generateFilename(s,"vue",t.typescript??!0);return {code:n,filename:i,componentName:s}}catch(o){throw new Error(`Failed to convert SVG to Vue: ${o}`)}}};async function ve(e,r={}){return new F().convert(e,r)}w();exports.convertToReact=ce;exports.convertToVue=ve;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=D;exports.writeSvgFile=P;

package/dist/index.mjs

@@ -1,88 +1,23 @@
-import { transform } from '@svgr/core';
-import { optimize } from 'svgo';
-import { readFile, writeFile, readdir, stat, mkdir } from 'fs/promises';
-import { dirname, join, extname } from 'path';
-import { existsSync } from 'fs';
-
-var B={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 v(e,t=B){try{return optimize(e,t).data}catch(r){throw new Error(`Failed to optimize SVG: ${r}`)}}function _(e){let t=[{name:"preset-default",params:{overrides:{removeViewBox:!e.removeViewBox,removeTitle:!e.removeTitle,removeDesc:!e.removeDesc,removeUselessStrokeAndFill:!e.preserveClasses,convertColors:e.preserveColors?!1:{currentColor:!0,names2hex:!0,rgb2hex:!0,shorthex:!0,shortname:!0}}}},"cleanupNumericValues"];return e.removeDimensions!==!1&&t.push("removeDimensions"),{plugins:t}}function k(e){let t=e.replace(/\.svg$/i,"");return t=M(t),u(t)}function M(e){let t=e,r=t.match(/^([^,]+),\s*Type=([^,]+)/i);if(r)return t=`${r[1]} ${r[2]}`,t;let n=t.match(/Size=(\w+)/i),s=t.match(/Color=(\w+)/i),i=t.match(/Type=(\w+)/i);if(n||s||i){let o=[];if(i&&o.push(i[1]),s&&o.push(s[1]),n&&o.push(n[1]),o.length>0)return t=o.join(" "),t}return t=t.replace(/\b\w+=\w+\b/g,"").replace(/,\s*/g," ").replace(/[=]/g," ").replace(/\s+/g," ").trim(),(!t||t.length<2)&&(t=e),t}function I(e){return u(e.replace(/[^a-zA-Z0-9]/g," "))}function u(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 d(e,t,r){let n=t?u(t):"",s=r?u(r):"",i=u(e);return `${n}${i}${s}`}async function K(e){try{return await readFile(e,"utf-8")}catch(t){throw new Error(`Failed to read SVG file: ${e}. ${t}`)}}async function Q(e,t){try{await N(dirname(e)),await writeFile(e,t,"utf-8");}catch(r){throw new Error(`Failed to write SVG file: ${e}. ${r}`)}}async function X(e,t){try{await N(dirname(e)),await writeFile(e,t,"utf-8");}catch(r){throw new Error(`Failed to write component file: ${e}. ${r}`)}}async function D(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 c=await D(i,t);n.push(...c);}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 N(e){existsSync(e)||await mkdir(e,{recursive:!0});}function $(e,t=!0){return e==="react"?t?".tsx":".jsx":".vue"}function x(e,t,r){return `${t}${r}`}async function ee(e,t={}){let{name:r,prefix:n,suffix:s,optimize:i=!0,typescript:o=!0,memo:c=!0,ref:l=!0,titleProp:m=!0,descProp:S=!0}=t;try{let p=e;i&&(p=v(e));let a=d(r||"icon",n,s),C=await transform(p,{typescript:o,memo:c,ref:l,titleProp:m,descProp:S,svgProps:{className:"{className}"}},{componentName:a}),w=o?`import { SVGProps } from 'react';
-`:"",y=c?`import { memo } from 'react';
-`:"",h=l?`import { forwardRef } from 'react';
-`:"",z=`
-export default ${a};
-export { ${a} };`,V=o?"SVGProps<SVGSVGElement> & { className?: string; }":"",E=o?`props: ${V}`:"props",O=c?"memo(":"",P=l?`forwardRef<SVGSVGElement, ${V}>(`:"";C=`${w}${y}${h}
-const ${a} = ${O}${P}(${E}) => {
-  return ${C};
-}${`${l?")":""}${c?")":""}`};
-
-${a}.displayName = "${a}";
-${z}`;let G=$("react",o),A=x("icon.svg",a,G);return {code:C,filename:A,componentName:a}}catch(p){throw new Error(`Failed to convert SVG to React: ${p}`)}}function te(e,t={}){let{name:r,prefix:n,suffix:s,optimize:i=!0,typescript:o=!0,compositionApi:c=!0,scriptSetup:l=!0}=t;try{let m=e;i&&(m=v(e));let p=d(r||"icon",n,s),F=m.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"),a=l?re(o,p):oe(p,o),b=`<template>
-  ${F}
-</template>`,w=`${a}
-
-${b}
-
-<style scoped>
-/* Add component-specific styles here */
-</style>`,y=$("vue",o),h=x("icon.svg",p,y);return {code:w,filename:h,componentName:p}}catch(m){throw new Error(`Failed to convert SVG to Vue: ${m}`)}}function re(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 oe(e,t){let r=t?' lang="ts"':"",n=t?`
+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 L=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});},M=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of L(r))!I.call(e,n)&&n!==t&&d(e,n,{get:()=>r[n],enumerable:!(o=k(r,n))||o.enumerable});return e};var Z=e=>M(d({},"__esModule",{value:true}),e);var a=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),i=await stat(s);if(i.isDirectory()&&r){let p=await h(s,r);o.push(...p);}else i.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(()=>{a();});a();a();a();a();var J={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=J){try{return optimize(e,r).data}catch(t){throw new Error(`Failed to optimize SVG: ${t}`)}}function K(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}}a();function Q(e){let r=e.replace(/\.svg$/i,"");return r=W(r),g(r)}function W(e){let r=e,t=r.match(/^([^,]+),\s*Type=([^,]+)/i);if(t)return r=`${t[1]} ${t[2]}`,r;let o=r.match(/Size=(\w+)/i),n=r.match(/Color=(\w+)/i),s=r.match(/Type=(\w+)/i);if(o||n||s){let i=[];if(s&&i.push(s[1]),n&&i.push(n[1]),o&&i.push(o[1]),i.length>0)return r=i.join(" "),r}return r=r.replace(/\b\w+=\w+\b/g,"").replace(/,\s*/g," ").replace(/[=]/g," ").replace(/\s+/g," ").trim(),(!r||r.length<2)&&(r=e),r}function X(e){return g(e.replace(/[^a-zA-Z0-9]/g," "))}function g(e){return e.replace(/[^a-zA-Z0-9\s-_]/g," ").split(/[\s-_]+/).filter(r=>r.length>0).map(r=>r.charAt(0).toUpperCase()+r.slice(1).toLowerCase()).join("")}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(),Z(A)),i=n(t,o);return s("icon.svg",r,i)}catch{return `${r}${{react:o?".tsx":".jsx",vue:".vue"}[t]}`}}};a();function z(e){let{typescript:r=true,memo:t=true,ref:o=true,titleProp:n=true,descProp:s=true,icon:i=true,dimensions:p=false,replaceAttrValues:c={"#000":"currentColor","#000000":"currentColor"},svgProps:l={},expandProps:C=false,nativeProps:B=true,ariaLabelledBy:U=false,ariaHidden:_=false,role:G="img"}=e,V={typescript:r,memo:t,ref:o,titleProp:n,descProp:s,icon:i,dimensions:p,expandProps:C,svgProps:{className:"{className}",...o&&{ref:"{ref}"},...B&&{width:"{width}",height:"{height}",style:"{style}"},...U&&n&&s&&{"aria-labelledby":"{titleId} {descId}"},..._&&{"aria-hidden":"true"},role:G,...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}}},...i&&!p?[{name:"removeAttrs",params:{attrs:["width","height"]}}]:[],...i?["cleanupNumericValues"]:[]]},V}function E(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=z(t),i=await transform(n,s,{componentName:o}),p=E(i,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)}a();a();function j(e,r){let{name:t,prefix:o,suffix:n,props:s=true,replaceAttrValues:i={"#000":"currentColor","#000000":"currentColor"}}=r,c=v(t||"Icon",o,n),l=pe(e);return l=me(l,i),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 {
-  class?: string;
-  style?: string | Record<string, any>;
-}`:"",s=t?`
-const ${e} = defineComponent({
-  name: '${e}',
+  className?: string;
+  style?: Record<string, any>;
+}
+
+defineProps<Props>();
+`):c+=`
+export default {
+  name: '${r}',
   props: {
-    class: {
-      type: String,
-      default: '',
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
-  },
-  setup(props: Props) {
-    return {};
+    className: String,
+    style: Object,
   },
-});
-
-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>`}
-
-export { ee as convertToReact, te as convertToVue, _ as createSvgoConfig, d as formatComponentName, v as optimizeSvg, u as pascalCase, D as readSvgDirectory, K as readSvgFile, I as sanitizeComponentName, k as svgToComponentName, X as writeComponentFile, Q as writeSvgFile };
+};
+`,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}=j(o,t),i=this.generateFilename(s,"vue",t.typescript??!0);return {code:n,filename:i,componentName:s}}catch(o){throw new Error(`Failed to convert SVG to Vue: ${o}`)}}};async function Ce(e,r={}){return new b().convert(e,r)}y();export{le as convertToReact,Ce as convertToVue,K as createSvgoConfig,v as formatComponentName,x as optimizeSvg,g as pascalCase,h as readSvgDirectory,O as readSvgFile,X as sanitizeComponentName,Q as svgToComponentName,T as writeComponentFile,D as writeSvgFile};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svgfusion",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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",
@@ -13,6 +13,10 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./browser": {
+      "import": "./dist/browser.mjs",
+      "types": "./dist/browser.d.ts"
+    },
     "./cli": {
       "import": "./dist/cli.mjs",
       "require": "./dist/cli.js"
@@ -48,16 +52,16 @@
     "type": "git",
     "url": "git+https://github.com/lolvOid/svgfusion.git"
   },
-  "homepage": "https://github.com/lolvOid/svgfusion#readme",
+  "homepage": "https://svgfusion.netlify.app",
   "bugs": {
     "url": "https://github.com/lolvOid/svgfusion/issues"
   },
   "scripts": {
     "build": "tsup && chmod +x dist/cli.js",
     "dev": "tsup --watch",
-    "test": "vitest",
-    "test:coverage": "vitest --coverage",
-    "test:watch": "vitest --watch",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
     "lint": "eslint src/**/*.ts tests/**/*.ts",
     "lint:fix": "eslint src/**/*.ts tests/**/*.ts --fix",
     "format": "prettier --write src/**/*.ts tests/**/*.ts *.md",
@@ -65,15 +69,18 @@
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist",
     "prepare": "husky install",
-    "prepublishOnly": "npm run clean && npm run build && npm run test",
+    "prepublishOnly": "pnpm run clean && pnpm run build && pnpm run test",
     "release": "semantic-release",
     "release:dry": "semantic-release --dry-run",
-    "postinstall": "cd docs && npm ci && cd .. && echo 'Documentation dependencies installed.'",
-    "dev:docs": "cd docs && npm run start",
-    "build:docs": "cd docs && npm run build"
+    "dev:docs": "cd docs && pnpm run start",
+    "build:docs": "cd docs && pnpm run build",
+    "postinstall": "if [ -d docs ]; then cd docs && pnpm install; fi"
   },
   "dependencies": {
     "@svgr/core": "^8.0.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
     "@types/figlet": "^1.7.0",
     "chalk": "^5.0.0",
     "commander": "^11.0.0",
@@ -88,18 +95,19 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.3",
     "@semantic-release/npm": "^12.0.2",
+    "@types/jest": "^30.0.0",
     "@types/node": "^20.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^8.57.0",
     "husky": "^8.0.3",
+    "jest": "^30.0.4",
     "lint-staged": "^15.2.2",
     "prettier": "^2.8.8",
     "semantic-release": "^24.2.6",
-    "tsup": "^7.0.0",
-    "typescript": "^5.0.0",
-    "vitest": "^3.2.4"
+    "ts-jest": "^29.4.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.0.0"
   },
   "engines": {
     "node": ">=18.0.0"