vectify 2.0.4 → 2.1.0

package/dist/{chunk-GY4VNET5.mjs → chunk-5RWOYQAG.mjs}

@@ -28,6 +28,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 +36,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 +187,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 +210,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 +234,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 +254,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 +271,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 +287,8 @@ function generateReactLikeComponent(componentName, iconNode, typescript, keepCol
     componentName,
     formattedNodes,
     typescript,
-    keepColors
+    keepColors,
+    viewBox
   });
 }
 function generateReactLikeBaseComponent(typescript, framework) {
@@ -281,12 +309,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 +325,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 +345,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 +362,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 +388,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 +408,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 +428,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 +448,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 +468,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 +485,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 +502,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 +519,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 +536,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 +553,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 +570,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 +636,6 @@ var DEFAULT_CONFIG = {
   output: "./src/icons",
   typescript: true,
   optimize: true,
-  keepColors: false,
   prefix: "",
   suffix: "",
   configDir: ".",
@@ -870,8 +904,9 @@ async function generateIconComponent(svgFile, config, dryRun = false) {
   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,
@@ -880,11 +915,13 @@ async function generateIconComponent(svgFile, config, dryRun = false) {
   );
   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);
@@ -912,7 +949,9 @@ 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(
@@ -921,10 +960,11 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
       config.suffix,
       config.transform
     );
+    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}`);