vectify 2.0.5 → 2.1.1

package/dist/{chunk-GY4VNET5.mjs → chunk-QYE23M3E.mjs}

@@ -1,4 +1,5 @@
 import {
+  __require,
   ensureDir,
   fileExists,
   findProjectRoot,
@@ -6,7 +7,7 @@ import {
   getSvgFiles,
   readFile,
   writeFile
-} from "./chunk-CIKTK6HI.mjs";
+} from "./chunk-FS34P27H.mjs";
 
 // src/parsers/svg-parser.ts
 import * as cheerio from "cheerio";
@@ -28,6 +29,7 @@ function parseSvg(svgContent) {
   if (svgElement.length === 0) {
     throw new Error("Invalid SVG: No <svg> tag found");
   }
+  const viewBox = svgElement.attr("viewBox") || "0 0 24 24";
   const iconNodes = [];
   svgElement.children().each((_, element) => {
     const node = parseElement($, element);
@@ -35,7 +37,29 @@ function parseSvg(svgContent) {
       iconNodes.push(node);
     }
   });
-  return iconNodes;
+  const isMultiColor = detectMultiColor(iconNodes);
+  return { iconNodes, viewBox, isMultiColor };
+}
+function detectMultiColor(nodes) {
+  const colors = /* @__PURE__ */ new Set();
+  function collectColors(node) {
+    const [, attrs, children] = node;
+    if (attrs.fill && attrs.fill !== "none" && attrs.fill !== "transparent") {
+      colors.add(String(attrs.fill).toLowerCase());
+    }
+    if (attrs.stroke && attrs.stroke !== "none" && attrs.stroke !== "transparent") {
+      colors.add(String(attrs.stroke).toLowerCase());
+    }
+    if (children && children.length > 0) {
+      children.forEach(collectColors);
+    }
+  }
+  nodes.forEach(collectColors);
+  const realColors = Array.from(colors).filter((color) => {
+    const c = color.toLowerCase();
+    return c !== "currentcolor";
+  });
+  return realColors.length >= 2;
 }
 function parseElement($, element) {
   if (element.type !== "tag") {
@@ -164,14 +188,15 @@ function getQwikTemplatePath(typescript, type) {
 function getAngularTemplatePath(type) {
   return `angular/${type}.ts.hbs`;
 }
-function generateAngularComponent(componentName, iconNode, typescript, keepColors = false) {
+function generateAngularComponent(componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
   const templatePath = getAngularTemplatePath("component");
   return renderTemplate(templatePath, {
     componentName,
     formattedNodes,
     typescript,
-    keepColors
+    keepColors,
+    viewBox
   });
 }
 function generateAngularBaseComponent(typescript) {
@@ -186,14 +211,15 @@ function generateAngularBaseComponent(typescript) {
 function getAstroTemplatePath(type) {
   return `astro/${type}.astro.hbs`;
 }
-function generateAstroComponent(componentName, iconNode, typescript, keepColors = false) {
+function generateAstroComponent(componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
   const templatePath = getAstroTemplatePath("component");
   return renderTemplate(templatePath, {
     componentName,
     formattedNodes,
     typescript,
-    keepColors
+    keepColors,
+    viewBox
   });
 }
 function generateAstroBaseComponent(typescript) {
@@ -209,14 +235,15 @@ function getLitTemplatePath(typescript, type) {
   const ext = typescript ? "ts" : "js";
   return `lit/${type}.${ext}.hbs`;
 }
-function generateLitComponent(componentName, iconNode, typescript, keepColors = false) {
+function generateLitComponent(componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
   const templatePath = getLitTemplatePath(typescript, "component");
   return renderTemplate(templatePath, {
     componentName,
     formattedNodes,
     typescript,
-    keepColors
+    keepColors,
+    viewBox
   });
 }
 function generateLitBaseComponent(typescript) {
@@ -228,14 +255,15 @@ function generateLitBaseComponent(typescript) {
 }
 
 // src/generators/react.ts
-function generateReactComponent(componentName, iconNode, typescript, keepColors = false) {
+function generateReactComponent(componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
   const templatePath = getReactTemplatePath(typescript, "component");
   return renderTemplate(templatePath, {
     typescript,
     componentName,
     formattedNodes,
-    keepColors
+    keepColors,
+    viewBox
   });
 }
 function generateCreateIcon(typescript) {
@@ -244,7 +272,7 @@ function generateCreateIcon(typescript) {
 }
 
 // src/generators/react-like.ts
-function generateReactLikeComponent(componentName, iconNode, typescript, keepColors, framework) {
+function generateReactLikeComponent(componentName, iconNode, typescript, keepColors, viewBox, framework) {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
   let templatePath;
   if (framework === "solid") {
@@ -260,7 +288,8 @@ function generateReactLikeComponent(componentName, iconNode, typescript, keepCol
     componentName,
     formattedNodes,
     typescript,
-    keepColors
+    keepColors,
+    viewBox
   });
 }
 function generateReactLikeBaseComponent(typescript, framework) {
@@ -281,12 +310,14 @@ function generateReactLikeBaseComponent(typescript, framework) {
 }
 
 // src/generators/svelte.ts
-function generateSvelteComponent(_componentName, iconNode, typescript) {
+function generateSvelteComponent(_componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
   const templatePath = getSvelteTemplatePath(typescript, "component");
   return renderTemplate(templatePath, {
     typescript,
-    formattedNodes
+    formattedNodes,
+    keepColors,
+    viewBox
   });
 }
 function generateSvelteIcon(typescript) {
@@ -295,14 +326,15 @@ function generateSvelteIcon(typescript) {
 }
 
 // src/generators/vanilla.ts
-function generateVanillaComponent(componentName, iconNode, typescript, keepColors) {
+function generateVanillaComponent(componentName, iconNode, typescript, keepColors, viewBox) {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 2)).join(",\n");
   const templatePath = getVanillaTemplatePath(typescript, "component");
   return renderTemplate(templatePath, {
     componentName,
     formattedNodes,
     typescript,
-    keepColors
+    keepColors,
+    viewBox
   });
 }
 function generateVanillaBaseComponent(typescript) {
@@ -314,13 +346,15 @@ function generateVanillaBaseComponent(typescript) {
 }
 
 // src/generators/vue.ts
-function generateVueComponent(componentName, iconNode, typescript) {
+function generateVueComponent(componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
   const templatePath = getVueTemplatePath(typescript, "component");
   return renderTemplate(templatePath, {
     typescript,
     componentName,
-    formattedNodes
+    formattedNodes,
+    keepColors,
+    viewBox
   });
 }
 function generateVueIcon(typescript) {
@@ -329,13 +363,15 @@ function generateVueIcon(typescript) {
 }
 
 // src/generators/vue2.ts
-function generateVue2Component(componentName, iconNode, typescript) {
+function generateVue2Component(componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") {
   const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
   const templatePath = getVue2TemplatePath(typescript, "component");
   return renderTemplate(templatePath, {
     typescript,
     componentName,
-    formattedNodes
+    formattedNodes,
+    keepColors,
+    viewBox
   });
 }
 function generateVue2Icon(typescript) {
@@ -353,8 +389,8 @@ var ReactStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript, keepColors = false) => {
-      return generateReactComponent(componentName, iconNode, typescript, keepColors);
+    this.generateComponent = (componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") => {
+      return generateReactComponent(componentName, iconNode, typescript, keepColors, viewBox);
     };
     this.generateBaseComponent = (typescript) => {
       return {
@@ -373,8 +409,8 @@ var VueStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript) => {
-      return generateVueComponent(componentName, iconNode, typescript);
+    this.generateComponent = (componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") => {
+      return generateVueComponent(componentName, iconNode, typescript, keepColors, viewBox);
     };
     this.generateBaseComponent = (typescript) => {
       return {
@@ -393,8 +429,8 @@ var Vue2Strategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript) => {
-      return generateVue2Component(componentName, iconNode, typescript);
+    this.generateComponent = (componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") => {
+      return generateVue2Component(componentName, iconNode, typescript, keepColors, viewBox);
     };
     this.generateBaseComponent = (typescript) => {
       return {
@@ -413,8 +449,8 @@ var SvelteStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript) => {
-      return generateSvelteComponent(componentName, iconNode, typescript);
+    this.generateComponent = (componentName, iconNode, typescript, keepColors = false, viewBox = "0 0 24 24") => {
+      return generateSvelteComponent(componentName, iconNode, typescript, keepColors, viewBox);
     };
     this.generateBaseComponent = (typescript) => {
       return {
@@ -433,8 +469,8 @@ var SolidStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
-      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, "solid");
+    this.generateComponent = (componentName, iconNode, typescript, keepColors, viewBox) => {
+      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, viewBox ?? "0 0 24 24", "solid");
     };
     this.generateBaseComponent = (typescript) => {
       return generateReactLikeBaseComponent(typescript, "solid");
@@ -450,8 +486,8 @@ var PreactStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
-      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, "preact");
+    this.generateComponent = (componentName, iconNode, typescript, keepColors, viewBox) => {
+      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, viewBox ?? "0 0 24 24", "preact");
     };
     this.generateBaseComponent = (typescript) => {
       return generateReactLikeBaseComponent(typescript, "preact");
@@ -467,8 +503,8 @@ var VanillaStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
-      return generateVanillaComponent(componentName, iconNode, typescript, keepColors ?? false);
+    this.generateComponent = (componentName, iconNode, typescript, keepColors, viewBox) => {
+      return generateVanillaComponent(componentName, iconNode, typescript, keepColors ?? false, viewBox ?? "0 0 24 24");
     };
     this.generateBaseComponent = (typescript) => {
       return generateVanillaBaseComponent(typescript);
@@ -484,8 +520,8 @@ var LitStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
-      return generateLitComponent(componentName, iconNode, typescript, keepColors ?? false);
+    this.generateComponent = (componentName, iconNode, typescript, keepColors, viewBox) => {
+      return generateLitComponent(componentName, iconNode, typescript, keepColors ?? false, viewBox ?? "0 0 24 24");
     };
     this.generateBaseComponent = (typescript) => {
       return generateLitBaseComponent(typescript);
@@ -501,8 +537,8 @@ var QwikStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
-      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, "qwik");
+    this.generateComponent = (componentName, iconNode, typescript, keepColors, viewBox) => {
+      return generateReactLikeComponent(componentName, iconNode, typescript, keepColors ?? false, viewBox ?? "0 0 24 24", "qwik");
     };
     this.generateBaseComponent = (typescript) => {
       return generateReactLikeBaseComponent(typescript, "qwik");
@@ -518,8 +554,8 @@ var AstroStrategy = class {
     this.getIndexExtension = (typescript) => {
       return typescript ? "ts" : "js";
     };
-    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
-      return generateAstroComponent(componentName, iconNode, typescript, keepColors ?? false);
+    this.generateComponent = (componentName, iconNode, typescript, keepColors, viewBox) => {
+      return generateAstroComponent(componentName, iconNode, typescript, keepColors ?? false, viewBox ?? "0 0 24 24");
     };
     this.generateBaseComponent = (typescript) => {
       return generateAstroBaseComponent(typescript);
@@ -535,8 +571,8 @@ var AngularStrategy = class {
     this.getIndexExtension = (_typescript) => {
       return "ts";
     };
-    this.generateComponent = (componentName, iconNode, typescript, keepColors) => {
-      return generateAngularComponent(componentName, iconNode, typescript, keepColors ?? false);
+    this.generateComponent = (componentName, iconNode, typescript, keepColors, viewBox) => {
+      return generateAngularComponent(componentName, iconNode, typescript, keepColors ?? false, viewBox ?? "0 0 24 24");
     };
     this.generateBaseComponent = (typescript) => {
       return generateAngularBaseComponent(typescript);
@@ -601,7 +637,6 @@ var DEFAULT_CONFIG = {
   output: "./src/icons",
   typescript: true,
   optimize: true,
-  keepColors: false,
   prefix: "",
   suffix: "",
   configDir: ".",
@@ -664,7 +699,7 @@ async function loadConfig(configPath) {
   return mergedConfig;
 }
 async function findConfig() {
-  const { fileExists: fileExists2 } = await import("./helpers-UPZEBRGK.mjs");
+  const { fileExists: fileExists2 } = await import("./helpers-ZOR3OD66.mjs");
   const configFiles = [
     "vectify.config.ts",
     "vectify.config.js"
@@ -681,6 +716,37 @@ async function findConfig() {
 // src/generators/index.ts
 import path4 from "path";
 
+// src/cache/hash-utils.ts
+import { createHash } from "crypto";
+import { readFile as readFile2 } from "fs/promises";
+function hashContent(content) {
+  return createHash("sha256").update(content).digest("hex");
+}
+async function hashFile(filePath) {
+  try {
+    const content = await readFile2(filePath, "utf-8");
+    return hashContent(content);
+  } catch (error) {
+    throw new Error(`Failed to hash file ${filePath}: ${error}`);
+  }
+}
+function hashConfig(config) {
+  const relevantConfig = {
+    framework: config.framework,
+    typescript: config.typescript,
+    keepColors: config.keepColors,
+    prefix: config.prefix,
+    suffix: config.suffix,
+    optimize: config.optimize,
+    svgoConfig: config.svgoConfig,
+    componentNameTransform: config.componentNameTransform?.toString()
+  };
+  return hashContent(JSON.stringify(relevantConfig));
+}
+function hashSvgoConfig(svgoConfig) {
+  return hashContent(JSON.stringify(svgoConfig || {}));
+}
+
 // src/parsers/optimizer.ts
 import { optimize } from "svgo";
 var DEFAULT_SVGO_CONFIG = {
@@ -864,27 +930,130 @@ async function generateIcons(config, dryRun = false) {
   }
   return stats;
 }
-async function generateIconComponent(svgFile, config, dryRun = false) {
+async function generateIconsIncremental(config, cacheManager, 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 (cacheManager.hasConfigChanged(config)) {
+      console.log("\u26A0\uFE0F  Configuration changed, rebuilding all icons...");
+      cacheManager.invalidateAll();
+    }
+    cacheManager.updateConfigHash(config);
+    await cacheManager.cleanStaleEntries(svgFiles);
+    if (config.generateOptions?.cleanOutput && !dryRun) {
+      await cleanOutputDirectory(svgFiles, config);
+    }
+    await generateBaseComponent(config, dryRun);
+    const strategy = getFrameworkStrategy(config.framework);
+    const typescript = config.typescript ?? true;
+    const fileExt = strategy.getComponentExtension(typescript);
+    const filesToGenerate = [];
+    const cachedFiles = [];
+    for (const svgFile of svgFiles) {
+      const fileName = path4.basename(svgFile);
+      const componentName = getComponentName(
+        fileName,
+        config.prefix,
+        config.suffix,
+        config.componentNameTransform
+      );
+      const componentPath = path4.join(config.output, `${componentName}.${fileExt}`);
+      const needsRegen = await cacheManager.needsRegeneration(
+        svgFile,
+        componentPath,
+        config
+      );
+      if (needsRegen) {
+        filesToGenerate.push(svgFile);
+      } else {
+        cachedFiles.push(svgFile);
+      }
+    }
+    if (cachedFiles.length > 0) {
+      console.log(`\u{1F4E6} Cache: ${cachedFiles.length} cached, ${filesToGenerate.length} to generate`);
+    }
+    for (const svgFile of filesToGenerate) {
+      try {
+        await generateIconComponent(svgFile, config, dryRun, cacheManager);
+        stats.success++;
+      } catch (error) {
+        stats.failed++;
+        stats.errors.push({
+          file: svgFile,
+          error: error.message
+        });
+        console.error(`Failed to generate ${svgFile}: ${error.message}`);
+      }
+    }
+    stats.success += cachedFiles.length;
+    if (config.generateOptions?.index) {
+      await generateIndexFile(svgFiles, config, dryRun);
+    }
+    if (config.generateOptions?.preview && !dryRun) {
+      await generatePreviewHtml(svgFiles, config);
+    }
+    if (!dryRun) {
+      await cacheManager.save();
+      const cacheStats = cacheManager.getStats();
+      if (cacheStats.total > 0) {
+        const hitRate = cacheManager.getHitRate();
+        const timeSaved = (cacheStats.timeSaved / 1e3).toFixed(1);
+        console.log(`\u26A1 Cache saved ~${timeSaved}s (${hitRate.toFixed(1)}% hit rate)`);
+      }
+    }
+    if (config.format && !dryRun) {
+      const formatResult = await formatOutput(config.output, config.format);
+      if (formatResult.success && formatResult.tool) {
+        console.log(`Formatted with ${formatResult.tool}`);
+      } else if (formatResult.error) {
+        console.warn(formatResult.error);
+      }
+    }
+    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, cacheManager) {
   let svgContent = await readFile(svgFile);
   const fileName = path4.basename(svgFile);
   if (config.hooks?.beforeParse) {
     svgContent = await config.hooks.beforeParse(svgContent, fileName);
   }
+  const { isMultiColor: isMultiColorBeforeOptimization } = parseSvg(svgContent);
   svgContent = await optimizeSvg(svgContent, config);
-  const iconNode = parseSvg(svgContent);
+  const { iconNodes, viewBox } = parseSvg(svgContent);
   const componentName = getComponentName(
     fileName,
     config.prefix,
     config.suffix,
-    config.transform
+    config.componentNameTransform
   );
   const strategy = getFrameworkStrategy(config.framework);
   const typescript = config.typescript ?? true;
+  const keepColors = config.keepColors !== void 0 ? config.keepColors : isMultiColorBeforeOptimization;
   let code = strategy.generateComponent(
     componentName,
-    iconNode,
+    iconNodes,
     typescript,
-    config.keepColors ?? false
+    keepColors,
+    viewBox
   );
   if (config.hooks?.afterGenerate) {
     code = await config.hooks.afterGenerate(code, componentName);
@@ -895,6 +1064,16 @@ async function generateIconComponent(svgFile, config, dryRun = false) {
     console.log(`  ${componentName}.${fileExt}`);
   } else {
     await writeFile(outputPath, code);
+    if (cacheManager) {
+      const componentHash = hashContent(code);
+      await cacheManager.updateEntry(
+        svgFile,
+        outputPath,
+        componentName,
+        componentHash,
+        config
+      );
+    }
   }
 }
 async function generateBaseComponent(config, dryRun = false) {
@@ -912,19 +1091,22 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
   const typescript = config.typescript ?? true;
   const strategy = getFrameworkStrategy(config.framework);
   const ext = strategy.getIndexExtension(typescript);
+  const componentExt = strategy.getComponentExtension(typescript);
   const usesDefaultExport = ["vue", "vue2", "svelte", "react", "preact"].includes(config.framework);
+  const needsExtension = ["vue", "vue2", "svelte"].includes(config.framework);
   const exports = svgFiles.map((svgFile) => {
     const fileName = path4.basename(svgFile);
     const componentName = getComponentName(
       fileName,
       config.prefix,
       config.suffix,
-      config.transform
+      config.componentNameTransform
     );
+    const importPath = needsExtension ? `./${componentName}.${componentExt}` : `./${componentName}`;
     if (usesDefaultExport) {
-      return `export { default as ${componentName} } from './${componentName}'`;
+      return `export { default as ${componentName} } from '${importPath}'`;
     } else {
-      return `export { ${componentName} } from './${componentName}'`;
+      return `export { ${componentName} } from '${importPath}'`;
     }
   }).join("\n");
   const indexPath = path4.join(config.output, `index.${ext}`);
@@ -942,7 +1124,7 @@ async function generatePreviewHtml(svgFiles, config) {
       fileName,
       config.prefix,
       config.suffix,
-      config.transform
+      config.componentNameTransform
     );
   });
   const svgContents = await Promise.all(
@@ -1123,7 +1305,7 @@ async function cleanOutputDirectory(svgFiles, config) {
         fileName,
         config.prefix,
         config.suffix,
-        config.transform
+        config.componentNameTransform
       );
       return `${componentName}.${fileExt}`;
     })
@@ -1158,6 +1340,255 @@ async function cleanOutputDirectory(svgFiles, config) {
 // src/commands/generate.ts
 import chalk from "chalk";
 import ora from "ora";
+
+// src/cache/cache-manager.ts
+import { existsSync } from "fs";
+import { mkdir, readFile as readFile3, stat, writeFile as writeFile2 } from "fs/promises";
+import { dirname, join } from "path";
+var CACHE_VERSION = "1.0.0";
+var CacheManager = class {
+  constructor(outputDir, cacheDir = ".vectify") {
+    this.cache = {
+      version: CACHE_VERSION,
+      configHash: "",
+      entries: {},
+      baseComponentHash: ""
+    };
+    this.cacheFilePath = join(outputDir, cacheDir, "cache.json");
+    this.stats = {
+      hits: 0,
+      misses: 0,
+      total: 0,
+      timeSaved: 0
+    };
+    this.isDirty = false;
+    process.on("beforeExit", () => {
+      if (this.isDirty) {
+        this.saveSync();
+      }
+    });
+  }
+  /**
+   * Load cache from disk
+   */
+  async load() {
+    try {
+      if (!existsSync(this.cacheFilePath)) {
+        return;
+      }
+      const content = await readFile3(this.cacheFilePath, "utf-8");
+      const loadedCache = JSON.parse(content);
+      if (loadedCache.version !== CACHE_VERSION) {
+        console.log("\u26A0\uFE0F  Cache version mismatch, rebuilding cache...");
+        return;
+      }
+      this.cache = loadedCache;
+    } catch (error) {
+      console.warn("\u26A0\uFE0F  Failed to load cache, starting fresh:", error);
+      this.cache = {
+        version: CACHE_VERSION,
+        configHash: "",
+        entries: {},
+        baseComponentHash: ""
+      };
+    }
+  }
+  /**
+   * Save cache to disk (atomic write)
+   */
+  async save() {
+    try {
+      const cacheDir = dirname(this.cacheFilePath);
+      await mkdir(cacheDir, { recursive: true });
+      const tempPath = `${this.cacheFilePath}.tmp`;
+      await writeFile2(tempPath, JSON.stringify(this.cache, null, 2), "utf-8");
+      await writeFile2(this.cacheFilePath, JSON.stringify(this.cache, null, 2), "utf-8");
+      this.isDirty = false;
+    } catch (error) {
+      console.warn("\u26A0\uFE0F  Failed to save cache:", error);
+    }
+  }
+  /**
+   * Synchronous save for process exit
+   */
+  saveSync() {
+    try {
+      const fs2 = __require("fs");
+      const cacheDir = dirname(this.cacheFilePath);
+      if (!fs2.existsSync(cacheDir)) {
+        fs2.mkdirSync(cacheDir, { recursive: true });
+      }
+      fs2.writeFileSync(this.cacheFilePath, JSON.stringify(this.cache, null, 2), "utf-8");
+      this.isDirty = false;
+    } catch {
+      console.warn("\u26A0\uFE0F  Failed to save cache on exit");
+    }
+  }
+  /**
+   * Check if a file needs regeneration
+   */
+  async needsRegeneration(svgPath, componentPath, config) {
+    this.stats.total++;
+    if (!existsSync(componentPath)) {
+      this.stats.misses++;
+      return true;
+    }
+    const entry = this.cache.entries[svgPath];
+    if (!entry) {
+      this.stats.misses++;
+      return true;
+    }
+    try {
+      const stats = await stat(svgPath);
+      const currentMtime = stats.mtimeMs;
+      if (currentMtime === entry.svgMtime) {
+        if (!this.isConfigMatching(entry, config)) {
+          this.stats.misses++;
+          return true;
+        }
+        this.stats.hits++;
+        this.stats.timeSaved += 50;
+        return false;
+      }
+      const currentHash = await hashFile(svgPath);
+      if (currentHash === entry.svgHash) {
+        entry.svgMtime = currentMtime;
+        this.isDirty = true;
+        this.stats.hits++;
+        this.stats.timeSaved += 50;
+        return false;
+      }
+      this.stats.misses++;
+      return true;
+    } catch {
+      this.stats.misses++;
+      return true;
+    }
+  }
+  /**
+   * Check if config matches cache entry
+   */
+  isConfigMatching(entry, config) {
+    const snapshot = entry.configSnapshot;
+    return snapshot.framework === config.framework && snapshot.typescript === config.typescript && snapshot.keepColors === config.keepColors && snapshot.prefix === (config.prefix || "") && snapshot.suffix === (config.suffix || "") && snapshot.optimize === config.optimize && snapshot.svgoConfigHash === hashSvgoConfig(config.svgoConfig);
+  }
+  /**
+   * Update cache entry after successful generation
+   */
+  async updateEntry(svgPath, componentPath, componentName, componentHash, config) {
+    try {
+      const svgHash = await hashFile(svgPath);
+      const stats = await stat(svgPath);
+      this.cache.entries[svgPath] = {
+        svgPath,
+        svgHash,
+        svgMtime: stats.mtimeMs,
+        componentName,
+        componentPath,
+        componentHash,
+        configSnapshot: {
+          framework: config.framework,
+          typescript: config.typescript ?? true,
+          keepColors: config.keepColors ?? false,
+          prefix: config.prefix || "",
+          suffix: config.suffix || "",
+          optimize: config.optimize ?? true,
+          svgoConfigHash: hashSvgoConfig(config.svgoConfig)
+        },
+        generatedAt: Date.now()
+      };
+      this.isDirty = true;
+    } catch (error) {
+      console.warn(`\u26A0\uFE0F  Failed to update cache entry for ${svgPath}:`, error);
+    }
+  }
+  /**
+   * Remove cache entry
+   */
+  removeEntry(svgPath) {
+    if (this.cache.entries[svgPath]) {
+      delete this.cache.entries[svgPath];
+      this.isDirty = true;
+    }
+  }
+  /**
+   * Update config hash
+   */
+  updateConfigHash(config) {
+    const newHash = hashConfig(config);
+    if (this.cache.configHash !== newHash) {
+      this.cache.configHash = newHash;
+      this.isDirty = true;
+    }
+  }
+  /**
+   * Update base component hash
+   */
+  updateBaseComponentHash(hash) {
+    if (this.cache.baseComponentHash !== hash) {
+      this.cache.baseComponentHash = hash;
+      this.isDirty = true;
+    }
+  }
+  /**
+   * Check if config has changed (invalidates all cache)
+   */
+  hasConfigChanged(config) {
+    const currentHash = hashConfig(config);
+    return this.cache.configHash !== "" && this.cache.configHash !== currentHash;
+  }
+  /**
+   * Invalidate all cache entries
+   */
+  invalidateAll() {
+    this.cache.entries = {};
+    this.isDirty = true;
+  }
+  /**
+   * Clean stale entries (files that no longer exist)
+   */
+  async cleanStaleEntries(existingSvgPaths) {
+    const existingSet = new Set(existingSvgPaths);
+    let cleaned = 0;
+    for (const svgPath of Object.keys(this.cache.entries)) {
+      if (!existingSet.has(svgPath)) {
+        delete this.cache.entries[svgPath];
+        cleaned++;
+        this.isDirty = true;
+      }
+    }
+    if (cleaned > 0) {
+      console.log(`\u{1F9F9} Cleaned ${cleaned} stale cache entries`);
+    }
+  }
+  /**
+   * Get cache statistics
+   */
+  getStats() {
+    return { ...this.stats };
+  }
+  /**
+   * Reset statistics
+   */
+  resetStats() {
+    this.stats = {
+      hits: 0,
+      misses: 0,
+      total: 0,
+      timeSaved: 0
+    };
+  }
+  /**
+   * Get cache hit rate
+   */
+  getHitRate() {
+    if (this.stats.total === 0)
+      return 0;
+    return this.stats.hits / this.stats.total * 100;
+  }
+};
+
+// src/commands/generate.ts
 async function generate(options = {}) {
   const spinner = ora("Loading configuration...").start();
   try {
@@ -1179,9 +1610,19 @@ async function generate(options = {}) {
 ${chalk.bold("Files that would be generated:")}
 `);
     }
+    const useIncremental = config.incremental?.enabled !== false && !options.force && !options.dryRun;
+    let cacheManager = null;
+    if (useIncremental) {
+      const cacheDir = config.incremental?.cacheDir || ".vectify";
+      cacheManager = new CacheManager(config.output, cacheDir);
+      await cacheManager.load();
+    }
+    if (options.force) {
+      spinner.info(chalk.yellow("Force mode - ignoring cache, regenerating all icons"));
+    }
     const actionText = options.dryRun ? "Analyzing icons..." : "Generating icon components...";
     spinner.start(actionText);
-    const stats = await generateIcons(config, options.dryRun);
+    const stats = cacheManager ? await generateIconsIncremental(config, cacheManager, options.dryRun) : 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) {
@@ -1373,6 +1814,89 @@ import path6 from "path";
 import chalk3 from "chalk";
 import chokidar from "chokidar";
 import ora3 from "ora";
+
+// src/cache/svg-validator.ts
+import { readFile as readFile4, stat as stat2 } from "fs/promises";
+import { load as load2 } from "cheerio";
+var MIN_SVG_SIZE = 20;
+var DRAWABLE_ELEMENTS = [
+  "path",
+  "circle",
+  "rect",
+  "ellipse",
+  "line",
+  "polyline",
+  "polygon",
+  "text",
+  "image",
+  "use"
+];
+async function validateSVGFile(filePath) {
+  try {
+    const stats = await stat2(filePath);
+    if (stats.size < MIN_SVG_SIZE) {
+      return {
+        isValid: false,
+        isEmpty: true,
+        reason: "File is too small to be a valid SVG"
+      };
+    }
+    const content = await readFile4(filePath, "utf-8");
+    if (!content.trim()) {
+      return {
+        isValid: false,
+        isEmpty: true,
+        reason: "File is empty"
+      };
+    }
+    if (!content.includes("<svg")) {
+      return {
+        isValid: false,
+        isEmpty: false,
+        reason: "File does not contain <svg> tag"
+      };
+    }
+    if (!hasDrawableContent(content)) {
+      return {
+        isValid: false,
+        isEmpty: true,
+        reason: "SVG has no drawable content"
+      };
+    }
+    try {
+      const $ = load2(content, { xmlMode: true });
+      const svgElement = $("svg");
+      if (svgElement.length === 0) {
+        return {
+          isValid: false,
+          isEmpty: false,
+          reason: "Failed to parse SVG element"
+        };
+      }
+      return {
+        isValid: true,
+        isEmpty: false
+      };
+    } catch (parseError) {
+      return {
+        isValid: false,
+        isEmpty: false,
+        reason: `Failed to parse SVG: ${parseError}`
+      };
+    }
+  } catch (error) {
+    return {
+      isValid: false,
+      isEmpty: false,
+      reason: `Failed to read file: ${error}`
+    };
+  }
+}
+function hasDrawableContent(content) {
+  return DRAWABLE_ELEMENTS.some((element) => content.includes(`<${element}`));
+}
+
+// src/commands/watch.ts
 async function watch(options = {}) {
   const spinner = ora3("Loading configuration...").start();
   try {
@@ -1388,16 +1912,24 @@ async function watch(options = {}) {
     }
     const config = await loadConfig(configPath);
     spinner.succeed(`Config loaded from ${chalk3.green(configPath)}`);
+    const useIncremental = config.incremental?.enabled !== false;
+    const cacheDir = config.incremental?.cacheDir || ".vectify";
+    const cacheManager = useIncremental ? new CacheManager(config.output, cacheDir) : null;
+    if (cacheManager) {
+      await cacheManager.load();
+    }
     spinner.start("Generating icon components...");
-    const initialStats = await generateIcons(config);
+    const initialStats = useIncremental && cacheManager ? await generateIconsIncremental(config, cacheManager) : await generateIcons(config);
     spinner.succeed(`Generated ${chalk3.green(initialStats.success)} icon components`);
     const watchPath = path6.join(config.input, "**/*.svg");
     const debounce = config.watch?.debounce ?? 300;
     const ignore = config.watch?.ignore ?? ["**/node_modules/**", "**/.git/**"];
+    const emptyFileRetryDelay = config.watch?.emptyFileRetryDelay ?? 2e3;
     console.log(chalk3.bold("\nWatching for changes..."));
     console.log(`  ${chalk3.cyan(watchPath)}`);
     console.log(`  ${chalk3.gray("Press Ctrl+C to stop")}
 `);
+    const pendingChanges = /* @__PURE__ */ new Map();
     const debounceTimer = null;
     const watcher = chokidar.watch(watchPath, {
       ignored: ignore,
@@ -1405,12 +1937,12 @@ async function watch(options = {}) {
       ignoreInitial: true
     });
     watcher.on("add", (filePath) => {
-      handleChange("added", filePath, config, debounce, debounceTimer);
+      handleChange("added", filePath, config, cacheManager, debounce, emptyFileRetryDelay, pendingChanges, debounceTimer);
     }).on("change", (filePath) => {
-      handleChange("changed", filePath, config, debounce, debounceTimer);
+      handleChange("changed", filePath, config, cacheManager, debounce, emptyFileRetryDelay, pendingChanges, debounceTimer);
     }).on("unlink", (filePath) => {
       console.log(chalk3.yellow(`SVG file removed: ${path6.basename(filePath)}`));
-      handleChange("removed", filePath, config, debounce, debounceTimer);
+      handleChange("removed", filePath, config, cacheManager, debounce, emptyFileRetryDelay, pendingChanges, debounceTimer);
     }).on("error", (error) => {
       console.error(chalk3.red(`Watcher error: ${error.message}`));
     });
@@ -1427,23 +1959,51 @@ ${chalk3.yellow("Stopping watch mode...")}`);
     throw error;
   }
 }
-function handleChange(event, filePath, config, debounce, timer) {
-  const fileName = path6.basename(filePath);
+function handleChange(event, filePath, config, cacheManager, debounce, emptyFileRetryDelay, pendingChanges, timer) {
+  pendingChanges.set(filePath, event);
   if (timer) {
     clearTimeout(timer);
   }
   timer = setTimeout(async () => {
-    const spinner = ora3(`Regenerating icons...`).start();
+    const changes = Array.from(pendingChanges.entries());
+    pendingChanges.clear();
+    const validChanges = [];
+    const invalidFiles = [];
+    for (const [file, changeEvent] of changes) {
+      if (changeEvent === "removed") {
+        validChanges.push([file, changeEvent]);
+        continue;
+      }
+      const validation = await validateSVGFile(file);
+      if (!validation.isValid) {
+        if (validation.isEmpty) {
+          console.log(chalk3.yellow(`\u23F3 Waiting for content: ${path6.basename(file)}`));
+          setTimeout(() => {
+            handleChange(changeEvent, file, config, cacheManager, debounce, emptyFileRetryDelay, pendingChanges, timer);
+          }, emptyFileRetryDelay);
+        } else {
+          console.error(chalk3.red(`\u274C Invalid SVG: ${path6.basename(file)} - ${validation.reason}`));
+          invalidFiles.push(file);
+        }
+        continue;
+      }
+      validChanges.push([file, changeEvent]);
+    }
+    if (validChanges.length === 0) {
+      return;
+    }
+    const spinner = ora3(`Processing ${validChanges.length} change(s)...`).start();
     try {
-      const stats = await generateIcons(config);
+      const stats = cacheManager ? await generateIconsIncremental(config, cacheManager) : 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`);
+        spinner.succeed(`\u2713 Updated ${chalk3.green(stats.success)} icon components`);
       }
-      console.log(chalk3.gray(`  Triggered by: ${fileName} (${event})
+      const triggerFiles = validChanges.map(([file, evt]) => `${path6.basename(file)} (${evt})`).join(", ");
+      console.log(chalk3.gray(`  Triggered by: ${triggerFiles}
 `));
     } catch (error) {
       spinner.fail("Regeneration failed");