vectify 2.0.0

package/dist/chunk-4BWKFV7W.mjs

@@ -0,0 +1,1311 @@
+import {
+  ensureDir,
+  fileExists,
+  findProjectRoot,
+  getComponentName,
+  getSvgFiles,
+  readFile,
+  writeFile
+} from "./chunk-CIKTK6HI.mjs";
+
+// src/parsers/svg-parser.ts
+import * as cheerio from "cheerio";
+var SUPPORTED_ELEMENTS = [
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  "g"
+];
+function parseSvg(svgContent) {
+  const $ = cheerio.load(svgContent, {
+    xml: true
+  });
+  const svgElement = $("svg");
+  if (svgElement.length === 0) {
+    throw new Error("Invalid SVG: No <svg> tag found");
+  }
+  const iconNodes = [];
+  svgElement.children().each((_, element) => {
+    const node = parseElement($, element);
+    if (node) {
+      iconNodes.push(node);
+    }
+  });
+  return iconNodes;
+}
+function parseElement($, element) {
+  if (element.type !== "tag") {
+    return null;
+  }
+  const tagName = element.name;
+  if (!SUPPORTED_ELEMENTS.includes(tagName)) {
+    return null;
+  }
+  const attrs = parseAttributes(element);
+  const $element = $(element);
+  const children = [];
+  $element.children().each((_, child) => {
+    const childNode = parseElement($, child);
+    if (childNode) {
+      children.push(childNode);
+    }
+  });
+  if (children.length > 0) {
+    return [tagName, attrs, children];
+  }
+  return [tagName, attrs];
+}
+function parseAttributes(element) {
+  const attrs = {};
+  if (element.type !== "tag" || !element.attribs) {
+    return attrs;
+  }
+  const attributes = element.attribs;
+  for (const [key, value] of Object.entries(attributes)) {
+    if (key.startsWith("xmlns")) {
+      continue;
+    }
+    if (typeof value !== "string") {
+      continue;
+    }
+    const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    const numValue = Number.parseFloat(value);
+    attrs[camelKey] = Number.isNaN(numValue) ? value : numValue;
+  }
+  return attrs;
+}
+function formatIconNode(node, indent = 2) {
+  const [elementType, attrs, children] = node;
+  const indentStr = " ".repeat(indent);
+  const attrsStr = formatAttrs(attrs);
+  if (children && children.length > 0) {
+    const childrenStr = children.map((child) => formatIconNode(child, indent + 2)).join(",\n");
+    return `${indentStr}['${elementType}', ${attrsStr}, [
+${childrenStr}
+${indentStr}]]`;
+  }
+  return `${indentStr}['${elementType}', ${attrsStr}]`;
+}
+function formatAttrs(attrs) {
+  const entries = Object.entries(attrs);
+  if (entries.length === 0) {
+    return "{}";
+  }
+  const formatted = entries.map(([key, value]) => {
+    if (typeof value === "number") {
+      return `${key}: ${value}`;
+    }
+    const escaped = value.replace(/'/g, "\\'");
+    return `${key}: '${escaped}'`;
+  }).join(", ");
+  return `{ ${formatted} }`;
+}
+
+// src/generators/templates/template-engine.ts
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import Handlebars from "handlebars";
+function getTemplatesDir() {
+  if (typeof __dirname !== "undefined") {
+    return path.join(__dirname, "templates");
+  }
+  const currentFile = fileURLToPath(import.meta.url);
+  return path.join(path.dirname(currentFile), "templates");
+}
+function loadTemplate(templatePath) {
+  const templatesDir = getTemplatesDir();
+  const fullPath = path.join(templatesDir, templatePath);
+  const templateContent = fs.readFileSync(fullPath, "utf-8");
+  return Handlebars.compile(templateContent, { noEscape: true });
+}
+function renderTemplate(templatePath, data) {
+  const template = loadTemplate(templatePath);
+  return template(data);
+}
+function getReactTemplatePath(typescript, type) {
+  const ext = typescript ? "tsx" : "jsx";
+  return `react/${type}.${ext}.hbs`;
+}
+function getVueTemplatePath(typescript, type) {
+  const suffix = typescript ? "ts" : "js";
+  return `vue/${type}.${suffix}.vue.hbs`;
+}
+function getSvelteTemplatePath(typescript, type) {
+  const suffix = typescript ? "ts" : "js";
+  return `svelte/${type}.${suffix}.svelte.hbs`;
+}
+function getSolidTemplatePath(typescript, type) {
+  const ext = typescript ? "tsx" : "jsx";
+  return `solid/${type}.${ext}.hbs`;
+}
+function getPreactTemplatePath(typescript, type) {
+  const ext = typescript ? "tsx" : "jsx";
+  return `preact/${type}.${ext}.hbs`;
+}
+function getVanillaTemplatePath(typescript, type) {
+  const ext = typescript ? "ts" : "js";
+  return `vanilla/${type}.${ext}.hbs`;
+}
+function getQwikTemplatePath(typescript, type) {
+  const ext = typescript ? "tsx" : "jsx";
+  return `qwik/${type}.${ext}.hbs`;
+}
+
+// src/generators/angular.ts
+function getAngularTemplatePath(type) {
+  return `angular/${type}.ts.hbs`;
+}
+function generateAngularComponent(componentName, iconNode, typescript, keepColors = false) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
+  const templatePath = getAngularTemplatePath("component");
+  return renderTemplate(templatePath, {
+    componentName,
+    formattedNodes,
+    typescript,
+    keepColors
+  });
+}
+function generateAngularBaseComponent(typescript) {
+  const templatePath = getAngularTemplatePath("createIcon");
+  return {
+    code: renderTemplate(templatePath, { typescript }),
+    fileName: "createIcon.ts"
+  };
+}
+
+// src/generators/astro.ts
+function getAstroTemplatePath(type) {
+  return `astro/${type}.astro.hbs`;
+}
+function generateAstroComponent(componentName, iconNode, typescript, keepColors = false) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
+  const templatePath = getAstroTemplatePath("component");
+  return renderTemplate(templatePath, {
+    componentName,
+    formattedNodes,
+    typescript,
+    keepColors
+  });
+}
+function generateAstroBaseComponent(typescript) {
+  const templatePath = getAstroTemplatePath("createIcon");
+  return {
+    code: renderTemplate(templatePath, { typescript }),
+    fileName: "createIcon.astro"
+  };
+}
+
+// src/generators/lit.ts
+function getLitTemplatePath(typescript, type) {
+  const ext = typescript ? "ts" : "js";
+  return `lit/${type}.${ext}.hbs`;
+}
+function generateLitComponent(componentName, iconNode, typescript, keepColors = false) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
+  const templatePath = getLitTemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    componentName,
+    formattedNodes,
+    typescript,
+    keepColors
+  });
+}
+function generateLitBaseComponent(typescript) {
+  const templatePath = getLitTemplatePath(typescript, "createIcon");
+  return {
+    code: renderTemplate(templatePath, { typescript }),
+    fileName: typescript ? "createIcon.ts" : "createIcon.js"
+  };
+}
+
+// src/generators/react.ts
+function generateReactComponent(componentName, iconNode, typescript, keepColors = false) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
+  const templatePath = getReactTemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    typescript,
+    componentName,
+    formattedNodes,
+    keepColors
+  });
+}
+function generateCreateIcon(typescript) {
+  const templatePath = getReactTemplatePath(typescript, "createIcon");
+  return renderTemplate(templatePath, { typescript });
+}
+
+// src/generators/react-like.ts
+function generateReactLikeComponent(componentName, iconNode, typescript, keepColors, framework) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
+  let templatePath;
+  if (framework === "solid") {
+    templatePath = getSolidTemplatePath(typescript, "component");
+  } else if (framework === "preact") {
+    templatePath = getPreactTemplatePath(typescript, "component");
+  } else if (framework === "qwik") {
+    templatePath = getQwikTemplatePath(typescript, "component");
+  } else {
+    throw new Error(`Unsupported framework: ${framework}`);
+  }
+  return renderTemplate(templatePath, {
+    componentName,
+    formattedNodes,
+    typescript,
+    keepColors
+  });
+}
+function generateReactLikeBaseComponent(typescript, framework) {
+  let templatePath;
+  if (framework === "solid") {
+    templatePath = getSolidTemplatePath(typescript, "createIcon");
+  } else if (framework === "preact") {
+    templatePath = getPreactTemplatePath(typescript, "createIcon");
+  } else if (framework === "qwik") {
+    templatePath = getQwikTemplatePath(typescript, "createIcon");
+  } else {
+    throw new Error(`Unsupported framework: ${framework}`);
+  }
+  return {
+    code: renderTemplate(templatePath, { typescript }),
+    fileName: typescript ? "createIcon.tsx" : "createIcon.jsx"
+  };
+}
+
+// src/generators/svelte.ts
+function generateSvelteComponent(_componentName, iconNode, typescript) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
+  const templatePath = getSvelteTemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    typescript,
+    formattedNodes
+  });
+}
+function generateSvelteIcon(typescript) {
+  const templatePath = getSvelteTemplatePath(typescript, "icon");
+  return renderTemplate(templatePath, { typescript });
+}
+
+// src/generators/vanilla.ts
+function generateVanillaComponent(componentName, iconNode, typescript, keepColors) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
+  const templatePath = getVanillaTemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    componentName,
+    formattedNodes,
+    typescript,
+    keepColors
+  });
+}
+function generateVanillaBaseComponent(typescript) {
+  const templatePath = getVanillaTemplatePath(typescript, "createIcon");
+  return {
+    code: renderTemplate(templatePath, { typescript }),
+    fileName: typescript ? "createIcon.ts" : "createIcon.js"
+  };
+}
+
+// src/generators/vue.ts
+function generateVueComponent(componentName, iconNode, typescript) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
+  const templatePath = getVueTemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    typescript,
+    componentName,
+    formattedNodes
+  });
+}
+function generateVueIcon(typescript) {
+  const templatePath = getVueTemplatePath(typescript, "icon");
+  return renderTemplate(templatePath, { typescript });
+}
+
+// src/generators/framework-strategy.ts
+var ReactStrategy = class {
+  constructor() {
+    this.name = "react";
+    this.getComponentExtension = (typescript) => {
+      return typescript ? "tsx" : "jsx";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript, keepColors = false) => {
+      return generateReactComponent(componentName, iconNode, typescript, keepColors);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return {
+        code: generateCreateIcon(typescript),
+        fileName: `createIcon.${this.getComponentExtension(typescript)}`
+      };
+    };
+  }
+};
+var VueStrategy = class {
+  constructor() {
+    this.name = "vue";
+    this.getComponentExtension = (_typescript) => {
+      return "vue";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript) => {
+      return generateVueComponent(componentName, iconNode, typescript);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return {
+        code: generateVueIcon(typescript),
+        fileName: "Icon.vue"
+      };
+    };
+  }
+};
+var SvelteStrategy = class {
+  constructor() {
+    this.name = "svelte";
+    this.getComponentExtension = (_typescript) => {
+      return "svelte";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript) => {
+      return generateSvelteComponent(componentName, iconNode, typescript);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return {
+        code: generateSvelteIcon(typescript),
+        fileName: "Icon.svelte"
+      };
+    };
+  }
+};
+var SolidStrategy = class {
+  constructor() {
+    this.name = "solid";
+    this.getComponentExtension = (typescript) => {
+      return typescript ? "tsx" : "jsx";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
+      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, "solid");
+    };
+    this.generateBaseComponent = (typescript) => {
+      return generateReactLikeBaseComponent(typescript, "solid");
+    };
+  }
+};
+var PreactStrategy = class {
+  constructor() {
+    this.name = "preact";
+    this.getComponentExtension = (typescript) => {
+      return typescript ? "tsx" : "jsx";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
+      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, "preact");
+    };
+    this.generateBaseComponent = (typescript) => {
+      return generateReactLikeBaseComponent(typescript, "preact");
+    };
+  }
+};
+var VanillaStrategy = class {
+  constructor() {
+    this.name = "vanilla";
+    this.getComponentExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
+      return generateVanillaComponent(componentName, iconNode, typescript, keepColors ?? false);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return generateVanillaBaseComponent(typescript);
+    };
+  }
+};
+var LitStrategy = class {
+  constructor() {
+    this.name = "lit";
+    this.getComponentExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
+      return generateLitComponent(componentName, iconNode, typescript, keepColors ?? false);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return generateLitBaseComponent(typescript);
+    };
+  }
+};
+var QwikStrategy = class {
+  constructor() {
+    this.name = "qwik";
+    this.getComponentExtension = (typescript) => {
+      return typescript ? "tsx" : "jsx";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
+      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, "qwik");
+    };
+    this.generateBaseComponent = (typescript) => {
+      return generateReactLikeBaseComponent(typescript, "qwik");
+    };
+  }
+};
+var AstroStrategy = class {
+  constructor() {
+    this.name = "astro";
+    this.getComponentExtension = (_typescript) => {
+      return "astro";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
+      return generateAstroComponent(componentName, iconNode, typescript, keepColors ?? false);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return generateAstroBaseComponent(typescript);
+    };
+  }
+};
+var AngularStrategy = class {
+  constructor() {
+    this.name = "angular";
+    this.getComponentExtension = (_typescript) => {
+      return "ts";
+    };
+    this.getIndexExtension = (_typescript) => {
+      return "ts";
+    };
+    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
+      return generateAngularComponent(componentName, iconNode, typescript, keepColors ?? false);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return generateAngularBaseComponent(typescript);
+    };
+  }
+};
+var FrameworkRegistry = class {
+  constructor() {
+    this.strategies = /* @__PURE__ */ new Map();
+    this.register(new ReactStrategy());
+    this.register(new VueStrategy());
+    this.register(new SvelteStrategy());
+    this.register(new SolidStrategy());
+    this.register(new PreactStrategy());
+    this.register(new VanillaStrategy());
+    this.register(new LitStrategy());
+    this.register(new QwikStrategy());
+    this.register(new AstroStrategy());
+    this.register(new AngularStrategy());
+  }
+  /**
+   * Register a framework strategy
+   */
+  register(strategy) {
+    this.strategies.set(strategy.name, strategy);
+  }
+  /**
+   * Get a framework strategy
+   */
+  get(framework) {
+    const strategy = this.strategies.get(framework);
+    if (!strategy) {
+      throw new Error(`Unsupported framework: ${framework}`);
+    }
+    return strategy;
+  }
+  /**
+   * Check if a framework is supported
+   */
+  has(framework) {
+    return this.strategies.has(framework);
+  }
+  /**
+   * Get all supported frameworks
+   */
+  getSupportedFrameworks() {
+    return Array.from(this.strategies.keys());
+  }
+};
+var frameworkRegistry = new FrameworkRegistry();
+function getFrameworkStrategy(framework) {
+  return frameworkRegistry.get(framework);
+}
+
+// src/config/loader.ts
+import path2 from "path";
+import process2 from "process";
+import { createJiti } from "jiti";
+var DEFAULT_CONFIG = {
+  input: "./icons",
+  output: "./src/icons",
+  typescript: true,
+  optimize: true,
+  keepColors: false,
+  prefix: "",
+  suffix: "",
+  configDir: ".",
+  generateOptions: {
+    index: true,
+    types: true,
+    preview: false,
+    cleanOutput: false
+  },
+  watch: {
+    enabled: false,
+    ignore: ["**/node_modules/**", "**/.git/**"],
+    debounce: 300
+  }
+};
+async function loadConfig(configPath) {
+  const absolutePath = path2.resolve(process2.cwd(), configPath);
+  const configDir = path2.dirname(absolutePath);
+  const jiti = createJiti(configDir, {
+    interopDefault: true
+  });
+  let config;
+  try {
+    config = await jiti.import(absolutePath);
+  } catch (error) {
+    throw new Error(`Failed to load config from ${configPath}: ${error.message}`);
+  }
+  let loadedConfig = config.default || config;
+  if (Array.isArray(loadedConfig)) {
+    loadedConfig = loadedConfig[0];
+  }
+  const mergedConfig = {
+    ...DEFAULT_CONFIG,
+    ...loadedConfig,
+    generateOptions: {
+      ...DEFAULT_CONFIG.generateOptions,
+      ...loadedConfig.generateOptions
+    },
+    watch: {
+      ...DEFAULT_CONFIG.watch,
+      ...loadedConfig.watch
+    }
+  };
+  if (mergedConfig.configDir && mergedConfig.configDir !== ".") {
+    const projectRoot = path2.resolve(configDir, mergedConfig.configDir);
+    mergedConfig.input = path2.resolve(projectRoot, mergedConfig.input);
+    mergedConfig.output = path2.resolve(projectRoot, mergedConfig.output);
+  } else {
+    mergedConfig.input = path2.resolve(configDir, mergedConfig.input);
+    mergedConfig.output = path2.resolve(configDir, mergedConfig.output);
+  }
+  if (!mergedConfig.framework) {
+    const supported = frameworkRegistry.getSupportedFrameworks().join(", ");
+    throw new Error(`Config must specify a framework (${supported})`);
+  }
+  if (!frameworkRegistry.has(mergedConfig.framework)) {
+    const supported = frameworkRegistry.getSupportedFrameworks().join(", ");
+    throw new Error(`Invalid framework: ${mergedConfig.framework}. Supported: ${supported}`);
+  }
+  return mergedConfig;
+}
+async function findConfig() {
+  const { fileExists: fileExists2 } = await import("./helpers-UPZEBRGK.mjs");
+  const configFiles = [
+    "vectify.config.ts",
+    "vectify.config.js"
+  ];
+  for (const file of configFiles) {
+    const configPath = path2.resolve(process2.cwd(), file);
+    if (await fileExists2(configPath)) {
+      return configPath;
+    }
+  }
+  return null;
+}
+
+// src/generators/index.ts
+import path3 from "path";
+
+// src/parsers/optimizer.ts
+import { optimize } from "svgo";
+var DEFAULT_SVGO_CONFIG = {
+  plugins: [
+    "preset-default",
+    "removeViewBox",
+    "removeDimensions",
+    "convertShapeToPath",
+    {
+      name: "removeAttrs",
+      params: {
+        attrs: ["class", "data-name"]
+      }
+    }
+  ]
+};
+async function optimizeSvg(svgContent, config) {
+  if (!config.optimize) {
+    return svgContent;
+  }
+  try {
+    const result = optimize(svgContent, {
+      ...DEFAULT_SVGO_CONFIG,
+      ...config.svgoConfig
+    });
+    return result.data;
+  } catch (error) {
+    console.warn(`SVGO optimization failed: ${error.message}`);
+    return svgContent;
+  }
+}
+
+// src/generators/index.ts
+async function generateIcons(config, dryRun = false) {
+  const stats = {
+    success: 0,
+    failed: 0,
+    total: 0,
+    errors: []
+  };
+  try {
+    if (!dryRun) {
+      await ensureDir(config.output);
+    }
+    const svgFiles = await getSvgFiles(config.input);
+    stats.total = svgFiles.length;
+    if (svgFiles.length === 0) {
+      console.warn(`No SVG files found in ${config.input}`);
+      return stats;
+    }
+    if (config.generateOptions?.cleanOutput && !dryRun) {
+      await cleanOutputDirectory(svgFiles, config);
+    }
+    await generateBaseComponent(config, dryRun);
+    for (const svgFile of svgFiles) {
+      try {
+        await generateIconComponent(svgFile, config, dryRun);
+        stats.success++;
+      } catch (error) {
+        stats.failed++;
+        stats.errors.push({
+          file: svgFile,
+          error: error.message
+        });
+        console.error(`Failed to generate ${svgFile}: ${error.message}`);
+      }
+    }
+    if (config.generateOptions?.index) {
+      await generateIndexFile(svgFiles, config, dryRun);
+    }
+    if (config.generateOptions?.preview && !dryRun) {
+      await generatePreviewHtml(svgFiles, config);
+    }
+    if (config.hooks?.onComplete) {
+      await config.hooks.onComplete(stats);
+    }
+  } catch (error) {
+    throw new Error(`Generation failed: ${error.message}`);
+  }
+  return stats;
+}
+async function generateIconComponent(svgFile, config, dryRun = false) {
+  let svgContent = await readFile(svgFile);
+  const fileName = path3.basename(svgFile);
+  if (config.hooks?.beforeParse) {
+    svgContent = await config.hooks.beforeParse(svgContent, fileName);
+  }
+  svgContent = await optimizeSvg(svgContent, config);
+  const iconNode = parseSvg(svgContent);
+  const componentName = getComponentName(
+    fileName,
+    config.prefix,
+    config.suffix,
+    config.transform
+  );
+  const strategy = getFrameworkStrategy(config.framework);
+  const typescript = config.typescript ?? true;
+  let code = strategy.generateComponent(
+    componentName,
+    iconNode,
+    typescript,
+    config.keepColors ?? false
+  );
+  if (config.hooks?.afterGenerate) {
+    code = await config.hooks.afterGenerate(code, componentName);
+  }
+  const fileExt = strategy.getComponentExtension(typescript);
+  const outputPath = path3.join(config.output, `${componentName}.${fileExt}`);
+  if (dryRun) {
+    console.log(`  ${componentName}.${fileExt}`);
+  } else {
+    await writeFile(outputPath, code);
+  }
+}
+async function generateBaseComponent(config, dryRun = false) {
+  const typescript = config.typescript ?? true;
+  const strategy = getFrameworkStrategy(config.framework);
+  const { code, fileName } = strategy.generateBaseComponent(typescript);
+  const outputPath = path3.join(config.output, fileName);
+  if (dryRun) {
+    console.log(`  ${fileName}`);
+  } else {
+    await writeFile(outputPath, code);
+  }
+}
+async function generateIndexFile(svgFiles, config, dryRun = false) {
+  const typescript = config.typescript ?? true;
+  const strategy = getFrameworkStrategy(config.framework);
+  const ext = strategy.getIndexExtension(typescript);
+  const usesDefaultExport = config.framework === "vue" || config.framework === "svelte" || config.framework === "preact";
+  const exports = svgFiles.map((svgFile) => {
+    const fileName = path3.basename(svgFile);
+    const componentName = getComponentName(
+      fileName,
+      config.prefix,
+      config.suffix,
+      config.transform
+    );
+    if (usesDefaultExport) {
+      return `export { default as ${componentName} } from './${componentName}'`;
+    } else {
+      return `export { ${componentName} } from './${componentName}'`;
+    }
+  }).join("\n");
+  const indexPath = path3.join(config.output, `index.${ext}`);
+  if (dryRun) {
+    console.log(`  index.${ext}`);
+  } else {
+    await writeFile(indexPath, `${exports}
+`);
+  }
+}
+async function generatePreviewHtml(svgFiles, config) {
+  const componentNames = svgFiles.map((svgFile) => {
+    const fileName = path3.basename(svgFile);
+    return getComponentName(
+      fileName,
+      config.prefix,
+      config.suffix,
+      config.transform
+    );
+  });
+  const svgContents = await Promise.all(
+    svgFiles.map(async (svgFile) => {
+      return await readFile(svgFile);
+    })
+  );
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Icons - ${componentNames.length} Total</title>
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</head>
+<body class="bg-white">
+  <div class="max-w-[1400px] mx-auto px-6 py-12">
+    <header class="mb-12">
+      <h1 class="text-3xl font-semibold text-gray-900 mb-2">Icons</h1>
+      <p class="text-sm text-gray-600">${componentNames.length} icons \u2022 ${config.framework} \u2022 Click to copy name</p>
+    </header>
+
+    <div class="flex items-center gap-4 mb-8 pb-6 border-b border-gray-200">
+      <div class="flex-1">
+        <input
+          type="search"
+          id="search"
+          placeholder="Search icons..."
+          class="w-full h-10 px-4 text-sm border border-gray-300 rounded-lg focus:outline-none focus:border-gray-900 transition-colors"
+        />
+      </div>
+
+      <div class="flex items-center gap-3">
+        <label for="size" class="text-sm text-gray-600">Size</label>
+        <input
+          type="range"
+          id="size"
+          min="16"
+          max="96"
+          value="32"
+          step="8"
+          class="w-24 h-1 accent-gray-900"
+        />
+        <span id="sizeValue" class="text-sm text-gray-900 w-10">32px</span>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <label for="color" class="text-sm text-gray-600">Color</label>
+        <input
+          type="color"
+          id="color"
+          value="#171717"
+          class="w-10 h-10 rounded-lg border border-gray-300 cursor-pointer"
+        />
+      </div>
+    </div>
+
+    <div id="iconGrid" class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-12 gap-1"></div>
+  </div>
+
+  <script>
+    const icons = ${JSON.stringify(componentNames)};
+    const svgContents = ${JSON.stringify(svgContents)};
+
+    let currentSize = 32;
+    let currentColor = '#171717';
+    let searchQuery = '';
+
+    function renderIcons() {
+      const grid = document.getElementById('iconGrid');
+      grid.innerHTML = '';
+
+      const filteredIcons = icons.filter((name) =>
+        name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+
+      if (filteredIcons.length === 0) {
+        grid.innerHTML = '<div class="col-span-full text-center py-20 text-gray-400 text-sm">No icons found</div>';
+        return;
+      }
+
+      for (let i = 0; i < filteredIcons.length; i++) {
+        const iconName = filteredIcons[i];
+        const svgIndex = icons.indexOf(iconName);
+        const svgContent = svgContents[svgIndex];
+
+        const card = document.createElement('div');
+        card.className = 'group relative aspect-square flex flex-col items-center justify-center p-4 rounded-lg border border-transparent hover:border-gray-200 hover:bg-gray-50 transition-all cursor-pointer';
+        card.onclick = () => copyToClipboard(iconName);
+        card.title = iconName;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'flex items-center justify-center mb-2';
+
+        wrapper.innerHTML = svgContent;
+
+        const svg = wrapper.querySelector('svg');
+        if (svg) {
+          svg.setAttribute('width', currentSize);
+          svg.setAttribute('height', currentSize);
+          svg.setAttribute('stroke', currentColor);
+          svg.setAttribute('fill', 'none');
+
+          // Update stroke color for all child elements
+          const elements = svg.querySelectorAll('[stroke]');
+          elements.forEach(el => {
+            el.setAttribute('stroke', currentColor);
+          });
+        }
+
+        const name = document.createElement('div');
+        name.className = 'text-[10px] text-gray-500 text-center truncate w-full group-hover:text-gray-900';
+        name.textContent = iconName;
+
+        card.appendChild(wrapper);
+        card.appendChild(name);
+        grid.appendChild(card);
+      }
+    }
+
+    function copyToClipboard(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        showCopiedNotification(text);
+      });
+    }
+
+    function showCopiedNotification(text) {
+      const existing = document.querySelector('.toast');
+      if (existing) existing.remove();
+
+      const notification = document.createElement('div');
+      notification.className = 'toast fixed bottom-6 right-6 bg-gray-900 text-white text-sm px-4 py-2.5 rounded-lg shadow-lg flex items-center gap-2 transition-opacity';
+      notification.innerHTML = \`
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+        </svg>
+        <span>Copied \${text}</span>
+      \`;
+      document.body.appendChild(notification);
+
+      setTimeout(() => {
+        notification.style.opacity = '0';
+        setTimeout(() => notification.remove(), 200);
+      }, 1800);
+    }
+
+    document.getElementById('size').addEventListener('input', (e) => {
+      currentSize = e.target.value;
+      document.getElementById('sizeValue').textContent = currentSize + 'px';
+      renderIcons();
+    });
+
+    document.getElementById('color').addEventListener('input', (e) => {
+      currentColor = e.target.value;
+      renderIcons();
+    });
+
+    document.getElementById('search').addEventListener('input', (e) => {
+      searchQuery = e.target.value;
+      renderIcons();
+    });
+
+    renderIcons();
+  </script>
+</body>
+</html>`;
+  const previewPath = path3.join(config.output, "preview.html");
+  await writeFile(previewPath, html);
+}
+async function cleanOutputDirectory(svgFiles, config) {
+  const { readdir, unlink } = await import("fs/promises");
+  const strategy = getFrameworkStrategy(config.framework);
+  const fileExt = strategy.getComponentExtension(config.typescript ?? true);
+  const expectedComponents = new Set(
+    svgFiles.map((svgFile) => {
+      const fileName = path3.basename(svgFile, ".svg");
+      const componentName = getComponentName(
+        fileName,
+        config.prefix,
+        config.suffix,
+        config.transform
+      );
+      return `${componentName}.${fileExt}`;
+    })
+  );
+  const protectedFiles = /* @__PURE__ */ new Set([
+    `Icon.${fileExt}`,
+    `createIcon.${fileExt}`,
+    `index.${config.typescript ? "ts" : "js"}`,
+    `index.d.ts`,
+    "preview.html"
+  ]);
+  try {
+    const files = await readdir(config.output);
+    for (const file of files) {
+      if (protectedFiles.has(file)) {
+        continue;
+      }
+      if (!file.endsWith(`.${fileExt}`)) {
+        continue;
+      }
+      if (!expectedComponents.has(file)) {
+        const filePath = path3.join(config.output, file);
+        await unlink(filePath);
+        console.log(`Deleted orphaned component: ${file}`);
+      }
+    }
+  } catch (error) {
+    console.warn(`Failed to clean output directory: ${error.message}`);
+  }
+}
+
+// src/commands/generate.ts
+import chalk from "chalk";
+import ora from "ora";
+async function generate(options = {}) {
+  const spinner = ora("Loading configuration...").start();
+  try {
+    let configPath = options.config;
+    if (!configPath) {
+      const foundConfig = await findConfig();
+      if (!foundConfig) {
+        spinner.fail("No config file found");
+        console.log(chalk.yellow("\nRun"), chalk.cyan("svg-icon init"), chalk.yellow("to create a config file"));
+        return;
+      }
+      configPath = foundConfig;
+    }
+    const config = await loadConfig(configPath);
+    spinner.succeed(`Config loaded from ${chalk.green(configPath)}`);
+    if (options.dryRun) {
+      spinner.info(chalk.cyan("Dry run mode - no files will be written"));
+      console.log(`
+${chalk.bold("Files that would be generated:")}
+`);
+    }
+    const actionText = options.dryRun ? "Analyzing icons..." : "Generating icon components...";
+    spinner.start(actionText);
+    const stats = await generateIcons(config, options.dryRun);
+    if (stats.failed > 0) {
+      spinner.warn(`${options.dryRun ? "Analyzed" : "Generated"} ${chalk.green(stats.success)} icons, ${chalk.red(stats.failed)} failed`);
+      if (stats.errors.length > 0) {
+        console.log(`
+${chalk.bold.red("Errors:")}`);
+        stats.errors.forEach(({ file, error }) => {
+          console.log(`  ${chalk.red("\u2717")} ${file}: ${error}`);
+        });
+      }
+    } else {
+      const message = options.dryRun ? `Would generate ${chalk.green(stats.success)} icon components` : `Generated ${chalk.green(stats.success)} icon components`;
+      spinner.succeed(message);
+    }
+    if (options.dryRun) {
+      console.log(`
+${chalk.bold("Target directory:")} ${chalk.cyan(config.output)}`);
+      console.log(chalk.gray("\nRun without --dry-run to generate files"));
+    } else {
+      console.log(`
+${chalk.bold("Output:")} ${chalk.cyan(config.output)}`);
+      if (config.generateOptions?.preview) {
+        console.log(`${chalk.bold("Preview:")} ${chalk.cyan(`${config.output}/preview.html`)}`);
+      }
+    }
+  } catch (error) {
+    spinner.fail("Generation failed");
+    console.error(chalk.red(error.message));
+    throw error;
+  }
+}
+
+// src/commands/init.ts
+import path4 from "path";
+import process3 from "process";
+import chalk2 from "chalk";
+import inquirer from "inquirer";
+import ora2 from "ora";
+async function init(options = {}) {
+  try {
+    const projectRoot = await findProjectRoot();
+    const currentDir = process3.cwd();
+    if (currentDir !== projectRoot) {
+      console.log(chalk2.yellow(`
+Note: Project root detected at ${chalk2.cyan(projectRoot)}`));
+      console.log(chalk2.yellow(`Current directory: ${chalk2.cyan(currentDir)}
+`));
+    }
+    const pathAnswers = await inquirer.prompt([
+      {
+        type: "input",
+        name: "configPath",
+        message: "Where should we create the config file?",
+        default: options.config || "./vectify.config.ts",
+        validate: (input) => {
+          if (!input.endsWith(".ts") && !input.endsWith(".js")) {
+            return "Config file must have .ts or .js extension";
+          }
+          return true;
+        }
+      }
+    ]);
+    const configPath = path4.resolve(projectRoot, pathAnswers.configPath);
+    const configDir = path4.dirname(configPath);
+    if (!options.force && await fileExists(configPath)) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "overwrite",
+          message: "Config file already exists. Overwrite?",
+          default: false
+        }
+      ]);
+      if (!overwrite) {
+        console.log(chalk2.yellow("Cancelled"));
+        return;
+      }
+    }
+    const supportedFrameworks = frameworkRegistry.getSupportedFrameworks();
+    const frameworkChoices = supportedFrameworks.map((fw) => ({
+      name: fw.charAt(0).toUpperCase() + fw.slice(1),
+      value: fw
+    }));
+    const answers = await inquirer.prompt([
+      {
+        type: "list",
+        name: "framework",
+        message: "Which framework are you using?",
+        choices: frameworkChoices
+      },
+      {
+        type: "input",
+        name: "input",
+        message: "Where are your SVG files located?",
+        default: "./icons"
+      },
+      {
+        type: "input",
+        name: "output",
+        message: "Where should we output the components?",
+        default: "./src/icons"
+      },
+      {
+        type: "confirm",
+        name: "typescript",
+        message: "Use TypeScript?",
+        default: true
+      },
+      {
+        type: "confirm",
+        name: "optimize",
+        message: "Optimize SVG files with SVGO?",
+        default: true
+      },
+      {
+        type: "input",
+        name: "prefix",
+        message: "Component name prefix (optional):",
+        default: ""
+      },
+      {
+        type: "input",
+        name: "suffix",
+        message: "Component name suffix (optional):",
+        default: ""
+      }
+    ]);
+    const inputPath = path4.resolve(projectRoot, answers.input);
+    const outputPath = path4.resolve(projectRoot, answers.output);
+    const spinner = ora2("Setting up directories...").start();
+    await ensureDir(inputPath);
+    spinner.text = `Created input directory: ${chalk2.cyan(answers.input)}`;
+    await ensureDir(outputPath);
+    spinner.succeed(`Created output directory: ${chalk2.cyan(answers.output)}`);
+    const relativeConfigDir = path4.relative(configDir, projectRoot) || ".";
+    const configContent = generateConfigContent(answers, relativeConfigDir);
+    spinner.start("Creating config file...");
+    await writeFile(configPath, configContent);
+    spinner.succeed(`Config file created at ${chalk2.green(configPath)}`);
+    console.log(`
+${chalk2.bold("Next steps:")}`);
+    console.log(`  1. Place your SVG files in ${chalk2.cyan(answers.input)}`);
+    console.log(`  2. Run ${chalk2.cyan("svg-icon generate")} to generate components`);
+    console.log(`  3. Import and use your icons!
+`);
+  } catch (error) {
+    console.error(chalk2.red("Initialization failed"));
+    throw error;
+  }
+}
+function generateConfigContent(answers, configDir) {
+  return `import { defineConfig } from 'vectify'
+
+export default defineConfig({
+  framework: '${answers.framework}',
+  configDir: '${configDir}',
+  input: '${answers.input}',
+  output: '${answers.output}',
+  typescript: ${answers.typescript},
+  optimize: ${answers.optimize},
+  prefix: '${answers.prefix}',
+  suffix: '${answers.suffix}',
+  generateOptions: {
+    index: true,
+    types: true,
+    preview: false
+  },
+  watch: {
+    enabled: false,
+    ignore: ['**/node_modules/**', '**/.git/**'],
+    debounce: 300,
+  },
+})
+`;
+}
+
+// src/commands/watch.ts
+import path5 from "path";
+import chalk3 from "chalk";
+import chokidar from "chokidar";
+import ora3 from "ora";
+async function watch(options = {}) {
+  const spinner = ora3("Loading configuration...").start();
+  try {
+    let configPath = options.config;
+    if (!configPath) {
+      const foundConfig = await findConfig();
+      if (!foundConfig) {
+        spinner.fail("No config file found");
+        console.log(chalk3.yellow("\nRun"), chalk3.cyan("svg-icon init"), chalk3.yellow("to create a config file"));
+        return;
+      }
+      configPath = foundConfig;
+    }
+    const config = await loadConfig(configPath);
+    spinner.succeed(`Config loaded from ${chalk3.green(configPath)}`);
+    spinner.start("Generating icon components...");
+    const initialStats = await generateIcons(config);
+    spinner.succeed(`Generated ${chalk3.green(initialStats.success)} icon components`);
+    const watchPath = path5.join(config.input, "**/*.svg");
+    const debounce = config.watch?.debounce ?? 300;
+    const ignore = config.watch?.ignore ?? ["**/node_modules/**", "**/.git/**"];
+    console.log(chalk3.bold("\nWatching for changes..."));
+    console.log(`  ${chalk3.cyan(watchPath)}`);
+    console.log(`  ${chalk3.gray("Press Ctrl+C to stop")}
+`);
+    const debounceTimer = null;
+    const watcher = chokidar.watch(watchPath, {
+      ignored: ignore,
+      persistent: true,
+      ignoreInitial: true
+    });
+    watcher.on("add", (filePath) => {
+      handleChange("added", filePath, config, debounce, debounceTimer);
+    }).on("change", (filePath) => {
+      handleChange("changed", filePath, config, debounce, debounceTimer);
+    }).on("unlink", (filePath) => {
+      console.log(chalk3.yellow(`SVG file removed: ${path5.basename(filePath)}`));
+      handleChange("removed", filePath, config, debounce, debounceTimer);
+    }).on("error", (error) => {
+      console.error(chalk3.red(`Watcher error: ${error.message}`));
+    });
+    process.on("SIGINT", () => {
+      console.log(`
+
+${chalk3.yellow("Stopping watch mode...")}`);
+      watcher.close();
+      process.exit(0);
+    });
+  } catch (error) {
+    spinner.fail("Watch mode failed");
+    console.error(chalk3.red(error.message));
+    throw error;
+  }
+}
+function handleChange(event, filePath, config, debounce, timer) {
+  const fileName = path5.basename(filePath);
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(async () => {
+    const spinner = ora3(`Regenerating icons...`).start();
+    try {
+      const stats = await generateIcons(config);
+      if (stats.failed > 0) {
+        spinner.warn(
+          `Regenerated ${chalk3.green(stats.success)} icons, ${chalk3.red(stats.failed)} failed`
+        );
+      } else {
+        spinner.succeed(`Regenerated ${chalk3.green(stats.success)} icon components`);
+      }
+      console.log(chalk3.gray(`  Triggered by: ${fileName} (${event})
+`));
+    } catch (error) {
+      spinner.fail("Regeneration failed");
+      console.error(chalk3.red(error.message));
+    }
+  }, debounce);
+}
+
+export {
+  frameworkRegistry,
+  getFrameworkStrategy,
+  loadConfig,
+  findConfig,
+  generateIcons,
+  generate,
+  init,
+  watch
+};