vectify 2.0.5 → 2.1.1

package/dist/cli.js

@@ -40,10 +40,10 @@ __export(helpers_exports, {
   getComponentName: () => getComponentName,
   getSvgFiles: () => getSvgFiles,
   mergeClasses: () => mergeClasses,
-  readFile: () => readFile,
+  readFile: () => readFile3,
   toKebabCase: () => toKebabCase,
   toPascalCase: () => toPascalCase,
-  writeFile: () => writeFile
+  writeFile: () => writeFile2
 });
 function toPascalCase(str) {
   return str.replace(/[-_](.)/g, (_, char) => char.toUpperCase()).replace(/^(.)/, (char) => char.toUpperCase()).replace(/[^a-z0-9]/gi, "");
@@ -93,11 +93,11 @@ async function fileExists(filePath) {
     return false;
   }
 }
-async function readFile(filePath) {
+async function readFile3(filePath) {
   const fs2 = await import("fs/promises");
   return await fs2.readFile(filePath, "utf-8");
 }
-async function writeFile(filePath, content) {
+async function writeFile2(filePath, content) {
   const fs2 = await import("fs/promises");
   await fs2.writeFile(filePath, content, "utf-8");
 }
@@ -133,8 +133,8 @@ var init_helpers = __esm({
 });
 
 // src/cli.ts
-var import_node_fs2 = require("fs");
-var import_node_path7 = require("path");
+var import_node_fs3 = require("fs");
+var import_node_path8 = require("path");
 var import_node_url2 = require("url");
 var import_chalk4 = __toESM(require("chalk"));
 var import_commander = require("commander");
@@ -143,8 +143,288 @@ var import_commander = require("commander");
 var import_chalk = __toESM(require("chalk"));
 var import_ora = __toESM(require("ora"));
 
+// src/cache/cache-manager.ts
+var import_node_fs = require("fs");
+var import_promises2 = require("fs/promises");
+var import_node_path = require("path");
+
+// src/cache/hash-utils.ts
+var import_node_crypto = require("crypto");
+var import_promises = require("fs/promises");
+function hashContent(content) {
+  return (0, import_node_crypto.createHash)("sha256").update(content).digest("hex");
+}
+async function hashFile(filePath) {
+  try {
+    const content = await (0, import_promises.readFile)(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/cache/cache-manager.ts
+var CACHE_VERSION = "1.0.0";
+var CacheManager = class {
+  constructor(outputDir, cacheDir = ".vectify") {
+    this.cache = {
+      version: CACHE_VERSION,
+      configHash: "",
+      entries: {},
+      baseComponentHash: ""
+    };
+    this.cacheFilePath = (0, import_node_path.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 (!(0, import_node_fs.existsSync)(this.cacheFilePath)) {
+        return;
+      }
+      const content = await (0, import_promises2.readFile)(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 = (0, import_node_path.dirname)(this.cacheFilePath);
+      await (0, import_promises2.mkdir)(cacheDir, { recursive: true });
+      const tempPath = `${this.cacheFilePath}.tmp`;
+      await (0, import_promises2.writeFile)(tempPath, JSON.stringify(this.cache, null, 2), "utf-8");
+      await (0, import_promises2.writeFile)(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 = (0, import_node_path.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 (!(0, import_node_fs.existsSync)(componentPath)) {
+      this.stats.misses++;
+      return true;
+    }
+    const entry = this.cache.entries[svgPath];
+    if (!entry) {
+      this.stats.misses++;
+      return true;
+    }
+    try {
+      const stats = await (0, import_promises2.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 (0, import_promises2.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/config/loader.ts
-var import_node_path2 = __toESM(require("path"));
+var import_node_path3 = __toESM(require("path"));
 var import_node_process = __toESM(require("process"));
 var import_jiti = require("jiti");
 
@@ -168,6 +448,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);
@@ -175,7 +456,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") {
@@ -246,22 +549,22 @@ function formatAttrs(attrs) {
 }
 
 // src/generators/templates/template-engine.ts
-var import_node_fs = __toESM(require("fs"));
-var import_node_path = __toESM(require("path"));
+var import_node_fs2 = __toESM(require("fs"));
+var import_node_path2 = __toESM(require("path"));
 var import_node_url = require("url");
 var import_handlebars = __toESM(require("handlebars"));
 var import_meta = {};
 function getTemplatesDir() {
   if (typeof __dirname !== "undefined") {
-    return import_node_path.default.join(__dirname, "templates");
+    return import_node_path2.default.join(__dirname, "templates");
   }
   const currentFile = (0, import_node_url.fileURLToPath)(import_meta.url);
-  return import_node_path.default.join(import_node_path.default.dirname(currentFile), "templates");
+  return import_node_path2.default.join(import_node_path2.default.dirname(currentFile), "templates");
 }
 function loadTemplate(templatePath) {
   const templatesDir = getTemplatesDir();
-  const fullPath = import_node_path.default.join(templatesDir, templatePath);
-  const templateContent = import_node_fs.default.readFileSync(fullPath, "utf-8");
+  const fullPath = import_node_path2.default.join(templatesDir, templatePath);
+  const templateContent = import_node_fs2.default.readFileSync(fullPath, "utf-8");
   return import_handlebars.default.compile(templateContent, { noEscape: true });
 }
 function renderTemplate(templatePath, data) {
@@ -305,14 +608,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) {
@@ -327,14 +631,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) {
@@ -350,14 +655,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) {
@@ -369,14 +675,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) {
@@ -385,7 +692,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") {
@@ -401,7 +708,8 @@ function generateReactLikeComponent(componentName, iconNode, typescript, keepCol
     componentName,
     formattedNodes,
     typescript,
-    keepColors
+    keepColors,
+    viewBox
   });
 }
 function generateReactLikeBaseComponent(typescript, framework) {
@@ -422,12 +730,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) {
@@ -436,14 +746,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) {
@@ -455,13 +766,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) {
@@ -470,13 +783,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) {
@@ -494,8 +809,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 {
@@ -514,8 +829,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 {
@@ -534,8 +849,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 {
@@ -554,8 +869,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 {
@@ -574,8 +889,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");
@@ -591,8 +906,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");
@@ -608,8 +923,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);
@@ -625,8 +940,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);
@@ -642,8 +957,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");
@@ -659,8 +974,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);
@@ -676,8 +991,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);
@@ -739,7 +1054,6 @@ var DEFAULT_CONFIG = {
   output: "./src/icons",
   typescript: true,
   optimize: true,
-  keepColors: false,
   prefix: "",
   suffix: "",
   configDir: ".",
@@ -756,8 +1070,8 @@ var DEFAULT_CONFIG = {
   }
 };
 async function loadConfig(configPath) {
-  const absolutePath = import_node_path2.default.resolve(import_node_process.default.cwd(), configPath);
-  const configDir = import_node_path2.default.dirname(absolutePath);
+  const absolutePath = import_node_path3.default.resolve(import_node_process.default.cwd(), configPath);
+  const configDir = import_node_path3.default.dirname(absolutePath);
   const jiti = (0, import_jiti.createJiti)(configDir, {
     interopDefault: true
   });
@@ -784,12 +1098,12 @@ async function loadConfig(configPath) {
     }
   };
   if (mergedConfig.configDir && mergedConfig.configDir !== ".") {
-    const projectRoot = import_node_path2.default.resolve(configDir, mergedConfig.configDir);
-    mergedConfig.input = import_node_path2.default.resolve(projectRoot, mergedConfig.input);
-    mergedConfig.output = import_node_path2.default.resolve(projectRoot, mergedConfig.output);
+    const projectRoot = import_node_path3.default.resolve(configDir, mergedConfig.configDir);
+    mergedConfig.input = import_node_path3.default.resolve(projectRoot, mergedConfig.input);
+    mergedConfig.output = import_node_path3.default.resolve(projectRoot, mergedConfig.output);
   } else {
-    mergedConfig.input = import_node_path2.default.resolve(configDir, mergedConfig.input);
-    mergedConfig.output = import_node_path2.default.resolve(configDir, mergedConfig.output);
+    mergedConfig.input = import_node_path3.default.resolve(configDir, mergedConfig.input);
+    mergedConfig.output = import_node_path3.default.resolve(configDir, mergedConfig.output);
   }
   if (!mergedConfig.framework) {
     const supported = frameworkRegistry.getSupportedFrameworks().join(", ");
@@ -808,7 +1122,7 @@ async function findConfig() {
     "vectify.config.js"
   ];
   for (const file of configFiles) {
-    const configPath = import_node_path2.default.resolve(import_node_process.default.cwd(), file);
+    const configPath = import_node_path3.default.resolve(import_node_process.default.cwd(), file);
     if (await fileExists2(configPath)) {
       return configPath;
     }
@@ -817,7 +1131,7 @@ async function findConfig() {
 }
 
 // src/generators/index.ts
-var import_node_path4 = __toESM(require("path"));
+var import_node_path5 = __toESM(require("path"));
 
 // src/parsers/optimizer.ts
 var import_svgo = require("svgo");
@@ -853,7 +1167,7 @@ async function optimizeSvg(svgContent, config) {
 
 // src/utils/formatter.ts
 var import_node_child_process = require("child_process");
-var import_node_path3 = __toESM(require("path"));
+var import_node_path4 = __toESM(require("path"));
 var import_node_process2 = __toESM(require("process"));
 var import_node_util = require("util");
 init_helpers();
@@ -908,7 +1222,7 @@ async function detectFormatter() {
   for (const tool of priority) {
     const patterns = FORMATTER_PATTERNS[tool];
     for (const pattern of patterns) {
-      const configPath = import_node_path3.default.join(cwd, pattern);
+      const configPath = import_node_path4.default.join(cwd, pattern);
       if (await fileExists(configPath)) {
         return tool;
       }
@@ -1004,90 +1318,206 @@ async function generateIcons(config, dryRun = false) {
   }
   return stats;
 }
-async function generateIconComponent(svgFile, config, dryRun = false) {
-  let svgContent = await readFile(svgFile);
-  const fileName = import_node_path4.default.basename(svgFile);
+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 = import_node_path5.default.basename(svgFile);
+      const componentName = getComponentName(
+        fileName,
+        config.prefix,
+        config.suffix,
+        config.componentNameTransform
+      );
+      const componentPath = import_node_path5.default.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 readFile3(svgFile);
+  const fileName = import_node_path5.default.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);
   }
   const fileExt = strategy.getComponentExtension(typescript);
-  const outputPath = import_node_path4.default.join(config.output, `${componentName}.${fileExt}`);
+  const outputPath = import_node_path5.default.join(config.output, `${componentName}.${fileExt}`);
   if (dryRun) {
     console.log(`  ${componentName}.${fileExt}`);
   } else {
-    await writeFile(outputPath, code);
+    await writeFile2(outputPath, code);
+    if (cacheManager) {
+      const componentHash = hashContent(code);
+      await cacheManager.updateEntry(
+        svgFile,
+        outputPath,
+        componentName,
+        componentHash,
+        config
+      );
+    }
   }
 }
 async function generateBaseComponent(config, dryRun = false) {
   const typescript = config.typescript ?? true;
   const strategy = getFrameworkStrategy(config.framework);
   const { code, fileName } = strategy.generateBaseComponent(typescript);
-  const outputPath = import_node_path4.default.join(config.output, fileName);
+  const outputPath = import_node_path5.default.join(config.output, fileName);
   if (dryRun) {
     console.log(`  ${fileName}`);
   } else {
-    await writeFile(outputPath, code);
+    await writeFile2(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 componentExt = strategy.getComponentExtension(typescript);
   const usesDefaultExport = ["vue", "vue2", "svelte", "react", "preact"].includes(config.framework);
+  const needsExtension = ["vue", "vue2", "svelte"].includes(config.framework);
   const exports2 = svgFiles.map((svgFile) => {
-    const fileName = import_node_path4.default.basename(svgFile);
+    const fileName = import_node_path5.default.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 = import_node_path4.default.join(config.output, `index.${ext}`);
+  const indexPath = import_node_path5.default.join(config.output, `index.${ext}`);
   if (dryRun) {
     console.log(`  index.${ext}`);
   } else {
-    await writeFile(indexPath, `${exports2}
+    await writeFile2(indexPath, `${exports2}
 `);
   }
 }
 async function generatePreviewHtml(svgFiles, config) {
   const componentNames = svgFiles.map((svgFile) => {
-    const fileName = import_node_path4.default.basename(svgFile);
+    const fileName = import_node_path5.default.basename(svgFile);
     return getComponentName(
       fileName,
       config.prefix,
       config.suffix,
-      config.transform
+      config.componentNameTransform
     );
   });
   const svgContents = await Promise.all(
     svgFiles.map(async (svgFile) => {
-      return await readFile(svgFile);
+      return await readFile3(svgFile);
     })
   );
   const html = `<!DOCTYPE html>
@@ -1249,8 +1679,8 @@ async function generatePreviewHtml(svgFiles, config) {
   </script>
 </body>
 </html>`;
-  const previewPath = import_node_path4.default.join(config.output, "preview.html");
-  await writeFile(previewPath, html);
+  const previewPath = import_node_path5.default.join(config.output, "preview.html");
+  await writeFile2(previewPath, html);
 }
 async function cleanOutputDirectory(svgFiles, config) {
   const { readdir, unlink } = await import("fs/promises");
@@ -1258,12 +1688,12 @@ async function cleanOutputDirectory(svgFiles, config) {
   const fileExt = strategy.getComponentExtension(config.typescript ?? true);
   const expectedComponents = new Set(
     svgFiles.map((svgFile) => {
-      const fileName = import_node_path4.default.basename(svgFile, ".svg");
+      const fileName = import_node_path5.default.basename(svgFile, ".svg");
       const componentName = getComponentName(
         fileName,
         config.prefix,
         config.suffix,
-        config.transform
+        config.componentNameTransform
       );
       return `${componentName}.${fileExt}`;
     })
@@ -1285,7 +1715,7 @@ async function cleanOutputDirectory(svgFiles, config) {
         continue;
       }
       if (!expectedComponents.has(file)) {
-        const filePath = import_node_path4.default.join(config.output, file);
+        const filePath = import_node_path5.default.join(config.output, file);
         await unlink(filePath);
         console.log(`Deleted orphaned component: ${file}`);
       }
@@ -1317,9 +1747,19 @@ async function generate(options = {}) {
 ${import_chalk.default.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(import_chalk.default.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"} ${import_chalk.default.green(stats.success)} icons, ${import_chalk.default.red(stats.failed)} failed`);
       if (stats.errors.length > 0) {
@@ -1352,7 +1792,7 @@ ${import_chalk.default.bold("Output:")} ${import_chalk.default.cyan(config.outpu
 }
 
 // src/commands/init.ts
-var import_node_path5 = __toESM(require("path"));
+var import_node_path6 = __toESM(require("path"));
 var import_node_process3 = __toESM(require("process"));
 var import_chalk2 = __toESM(require("chalk"));
 var import_inquirer = __toESM(require("inquirer"));
@@ -1382,8 +1822,8 @@ Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
         }
       }
     ]);
-    const configPath = import_node_path5.default.resolve(projectRoot, pathAnswers.configPath);
-    const configDir = import_node_path5.default.dirname(configPath);
+    const configPath = import_node_path6.default.resolve(projectRoot, pathAnswers.configPath);
+    const configDir = import_node_path6.default.dirname(configPath);
     if (!options.force && await fileExists(configPath)) {
       const { overwrite } = await import_inquirer.default.prompt([
         {
@@ -1457,18 +1897,18 @@ Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
         default: ""
       }
     ]);
-    const inputPath = import_node_path5.default.resolve(projectRoot, answers.input);
-    const outputPath = import_node_path5.default.resolve(projectRoot, answers.output);
+    const inputPath = import_node_path6.default.resolve(projectRoot, answers.input);
+    const outputPath = import_node_path6.default.resolve(projectRoot, answers.output);
     const spinner = (0, import_ora2.default)("Setting up directories...").start();
     await ensureDir(inputPath);
     spinner.text = `Created input directory: ${import_chalk2.default.cyan(answers.input)}`;
     await ensureDir(outputPath);
     spinner.succeed(`Created output directory: ${import_chalk2.default.cyan(answers.output)}`);
-    const relativeConfigDir = import_node_path5.default.relative(configDir, projectRoot) || ".";
+    const relativeConfigDir = import_node_path6.default.relative(configDir, projectRoot) || ".";
     const finalFramework = answers.vueVersion || answers.framework;
     const configContent = generateConfigContent({ ...answers, framework: finalFramework }, relativeConfigDir);
     spinner.start("Creating config file...");
-    await writeFile(configPath, configContent);
+    await writeFile2(configPath, configContent);
     spinner.succeed(`Config file created at ${import_chalk2.default.green(configPath)}`);
     console.log(`
 ${import_chalk2.default.bold("Next steps:")}`);
@@ -1508,10 +1948,93 @@ export default defineConfig({
 }
 
 // src/commands/watch.ts
-var import_node_path6 = __toESM(require("path"));
+var import_node_path7 = __toESM(require("path"));
 var import_chalk3 = __toESM(require("chalk"));
 var import_chokidar = __toESM(require("chokidar"));
 var import_ora3 = __toESM(require("ora"));
+
+// src/cache/svg-validator.ts
+var import_promises3 = require("fs/promises");
+var import_cheerio = require("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 (0, import_promises3.stat)(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 (0, import_promises3.readFile)(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 $ = (0, import_cheerio.load)(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 = (0, import_ora3.default)("Loading configuration...").start();
   try {
@@ -1527,16 +2050,24 @@ async function watch(options = {}) {
     }
     const config = await loadConfig(configPath);
     spinner.succeed(`Config loaded from ${import_chalk3.default.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 ${import_chalk3.default.green(initialStats.success)} icon components`);
-    const watchPath = import_node_path6.default.join(config.input, "**/*.svg");
+    const watchPath = import_node_path7.default.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(import_chalk3.default.bold("\nWatching for changes..."));
     console.log(`  ${import_chalk3.default.cyan(watchPath)}`);
     console.log(`  ${import_chalk3.default.gray("Press Ctrl+C to stop")}
 `);
+    const pendingChanges = /* @__PURE__ */ new Map();
     const debounceTimer = null;
     const watcher = import_chokidar.default.watch(watchPath, {
       ignored: ignore,
@@ -1544,12 +2075,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(import_chalk3.default.yellow(`SVG file removed: ${import_node_path6.default.basename(filePath)}`));
-      handleChange("removed", filePath, config, debounce, debounceTimer);
+      console.log(import_chalk3.default.yellow(`SVG file removed: ${import_node_path7.default.basename(filePath)}`));
+      handleChange("removed", filePath, config, cacheManager, debounce, emptyFileRetryDelay, pendingChanges, debounceTimer);
     }).on("error", (error) => {
       console.error(import_chalk3.default.red(`Watcher error: ${error.message}`));
     });
@@ -1566,23 +2097,51 @@ ${import_chalk3.default.yellow("Stopping watch mode...")}`);
     throw error;
   }
 }
-function handleChange(event, filePath, config, debounce, timer) {
-  const fileName = import_node_path6.default.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 = (0, import_ora3.default)(`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(import_chalk3.default.yellow(`\u23F3 Waiting for content: ${import_node_path7.default.basename(file)}`));
+          setTimeout(() => {
+            handleChange(changeEvent, file, config, cacheManager, debounce, emptyFileRetryDelay, pendingChanges, timer);
+          }, emptyFileRetryDelay);
+        } else {
+          console.error(import_chalk3.default.red(`\u274C Invalid SVG: ${import_node_path7.default.basename(file)} - ${validation.reason}`));
+          invalidFiles.push(file);
+        }
+        continue;
+      }
+      validChanges.push([file, changeEvent]);
+    }
+    if (validChanges.length === 0) {
+      return;
+    }
+    const spinner = (0, import_ora3.default)(`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 ${import_chalk3.default.green(stats.success)} icons, ${import_chalk3.default.red(stats.failed)} failed`
         );
       } else {
-        spinner.succeed(`Regenerated ${import_chalk3.default.green(stats.success)} icon components`);
+        spinner.succeed(`\u2713 Updated ${import_chalk3.default.green(stats.success)} icon components`);
       }
-      console.log(import_chalk3.default.gray(`  Triggered by: ${fileName} (${event})
+      const triggerFiles = validChanges.map(([file, evt]) => `${import_node_path7.default.basename(file)} (${evt})`).join(", ");
+      console.log(import_chalk3.default.gray(`  Triggered by: ${triggerFiles}
 `));
     } catch (error) {
       spinner.fail("Regeneration failed");
@@ -1596,13 +2155,13 @@ var import_meta2 = {};
 function getPackageJson() {
   let pkgPath;
   if (typeof __dirname !== "undefined") {
-    pkgPath = (0, import_node_path7.join)(__dirname, "../package.json");
+    pkgPath = (0, import_node_path8.join)(__dirname, "../package.json");
   } else {
     const __filename = (0, import_node_url2.fileURLToPath)(import_meta2.url);
-    const __dirname2 = (0, import_node_path7.dirname)(__filename);
-    pkgPath = (0, import_node_path7.join)(__dirname2, "../package.json");
+    const __dirname2 = (0, import_node_path8.dirname)(__filename);
+    pkgPath = (0, import_node_path8.join)(__dirname2, "../package.json");
   }
-  return JSON.parse((0, import_node_fs2.readFileSync)(pkgPath, "utf-8"));
+  return JSON.parse((0, import_node_fs3.readFileSync)(pkgPath, "utf-8"));
 }
 var packageJson = getPackageJson();
 var program = new import_commander.Command();
@@ -1615,7 +2174,7 @@ program.command("init").description("Initialize a new configuration file").optio
     process.exit(1);
   }
 });
-program.command("generate").description("Generate icon components from SVG files").option("-c, --config <path>", "Path to config file").option("--dry-run", "Preview what will be generated without writing files").action(async (options) => {
+program.command("generate").description("Generate icon components from SVG files").option("-c, --config <path>", "Path to config file").option("--dry-run", "Preview what will be generated without writing files").option("--force", "Force full regeneration, ignoring cache").action(async (options) => {
   try {
     await generate(options);
   } catch (error) {