svgfusion 1.10.0 → 1.11.0

package/dist/cli.js

@@ -81063,7 +81063,8 @@ var SVGTransformer = class {
       metadata: {
         originalColors: colorMappings.map((m5) => m5.originalColor),
         optimizationApplied: optimize,
-        features
+        features,
+        hasClassAttributes: this.hasClassAttributes(transformedAst)
       }
     };
   }
@@ -81179,6 +81180,18 @@ var SVGTransformer = class {
       children: element.children.map((child) => this.deepCloneElement(child))
     };
   }
+  /**
+   * Check if the SVG has any class attributes in its elements
+   */
+  hasClassAttributes(ast) {
+    const checkElement = (element) => {
+      if (element.attributes.class || element.attributes.className) {
+        return true;
+      }
+      return element.children.some((child) => checkElement(child));
+    };
+    return checkElement(ast.root);
+  }
 };
 
 // src/generators/react.ts
@@ -81272,17 +81285,25 @@ var ComponentGenerator = class {
   /**
    * Generate color props interface/type definitions
    */
-  generateColorProps(colorMappings) {
+  generateColorProps(colorMappings, includeClassProps = true) {
     if (colorMappings.length === 0) return "";
     return colorMappings.map((mapping) => {
       const propName = mapping.variableName;
       const className = `${propName}Class`;
       if (this.options.typescript) {
-        return `  ${propName}?: string;
+        let props = `  ${propName}?: string;`;
+        if (includeClassProps) {
+          props += `
   ${className}?: string;`;
+        }
+        return props;
       } else {
-        return `  ${propName}: PropTypes.string,
+        let props = `  ${propName}: PropTypes.string,`;
+        if (includeClassProps) {
+          props += `
   ${className}: PropTypes.string,`;
+        }
+        return props;
       }
     }).join("\n");
   }
@@ -101444,6 +101465,7 @@ ${childrenJsx}
   attributesToJsxWithClasses(attributes) {
     const jsxAttributes = [];
     const classNames = [];
+    const hasOriginalClass = "class" in attributes || "className" in attributes;
     Object.entries(attributes).forEach(([key2, value]) => {
       const jsxKey = toReactProp(key2);
       if ((key2 === "fill" || key2 === "stroke") && value.startsWith("{") && value.endsWith("}")) {
@@ -101463,11 +101485,29 @@ ${childrenJsx}
       }
     });
     if (classNames.length > 0) {
+      const originalClass = attributes.class || attributes.className;
       if (classNames.length === 1) {
-        jsxAttributes.push(`className={${classNames[0]}}`);
+        if (originalClass) {
+          jsxAttributes.push(
+            `className={\`${originalClass} \${${classNames[0]}}\`}`
+          );
+        } else {
+          jsxAttributes.push(`className={${classNames[0]}}`);
+        }
       } else {
         const combinedClasses = classNames.map((cls) => `\${${cls}}`).join(" ");
-        jsxAttributes.push(`className={\`${combinedClasses}\`}`);
+        if (originalClass) {
+          jsxAttributes.push(
+            `className={\`${originalClass} ${combinedClasses}\`}`
+          );
+        } else {
+          jsxAttributes.push(`className={\`${combinedClasses}\`}`);
+        }
+      }
+    } else if (hasOriginalClass) {
+      const originalClass = attributes.class || attributes.className;
+      if (originalClass) {
+        jsxAttributes.push(`className="${originalClass}"`);
       }
     }
     return jsxAttributes;
@@ -101598,6 +101638,7 @@ ${children}
     const { tag, attributes, children, content } = element;
     const vueAttributes = [];
     const classVars = [];
+    const hasOriginalClass = "class" in attributes;
     Object.entries(attributes).forEach(([key2, value]) => {
       if (value.startsWith("{") && value.endsWith("}")) {
         const variableName = value.slice(1, -1);
@@ -101611,7 +101652,19 @@ ${children}
       }
     });
     if (classVars.length > 0) {
-      vueAttributes.push(`:class="[${classVars.join(", ")}]"`);
+      const originalClass = attributes.class;
+      if (originalClass) {
+        vueAttributes.push(
+          `:class="[${classVars.join(", ")}, '${originalClass}']"`
+        );
+      } else {
+        vueAttributes.push(`:class="[${classVars.join(", ")}]"`);
+      }
+    } else if (hasOriginalClass) {
+      const originalClass = attributes.class;
+      if (originalClass) {
+        vueAttributes.push(`class="${originalClass}"`);
+      }
     }
     const attributeString = vueAttributes.length > 0 ? " " + vueAttributes.join(" ") : "";
     if (children.length === 0 && !content) {

package/dist/index.d.mts

@@ -91,6 +91,7 @@ interface TransformationResult {
         originalColors: string[];
         optimizationApplied: boolean;
         features: string[];
+        hasClassAttributes: boolean;
     };
 }
 /**
@@ -145,6 +146,10 @@ declare class SVGTransformer {
      * Deep clone SVG element
      */
     private deepCloneElement;
+    /**
+     * Check if the SVG has any class attributes in its elements
+     */
+    private hasClassAttributes;
 }
 
 /**
@@ -195,7 +200,7 @@ declare abstract class ComponentGenerator {
     /**
      * Generate color props interface/type definitions
      */
-    protected generateColorProps(colorMappings: ColorMapping[]): string;
+    protected generateColorProps(colorMappings: ColorMapping[], includeClassProps?: boolean): string;
     /**
      * Generate default props for colors
      */

package/dist/index.d.ts

@@ -91,6 +91,7 @@ interface TransformationResult {
         originalColors: string[];
         optimizationApplied: boolean;
         features: string[];
+        hasClassAttributes: boolean;
     };
 }
 /**
@@ -145,6 +146,10 @@ declare class SVGTransformer {
      * Deep clone SVG element
      */
     private deepCloneElement;
+    /**
+     * Check if the SVG has any class attributes in its elements
+     */
+    private hasClassAttributes;
 }
 
 /**
@@ -195,7 +200,7 @@ declare abstract class ComponentGenerator {
     /**
      * Generate color props interface/type definitions
      */
-    protected generateColorProps(colorMappings: ColorMapping[]): string;
+    protected generateColorProps(colorMappings: ColorMapping[], includeClassProps?: boolean): string;
     /**
      * Generate default props for colors
      */