svger-cli 1.0.2 → 1.0.3

package/README.md

@@ -118,4 +118,4 @@ Cleans output folder at the end if needed.
 
 Acknowledgements
 
-This project was implemented by Faeze Mohadespor, following the ADR authored by Navid Rezadoost and based on the TDR prepared by Ehsan Jafari. Their guidance and documentation on SVG integration methods in React were instrumental in shaping the design and functionality of the svger-cli CLI.
+This project was implemented by Faeze Mohades, following the ADR authored by Navid Rezadoost and based on the TDR prepared by Ehsan Jafari. Their guidance and documentation on SVG integration methods in React were instrumental in shaping the design and functionality of the svger-cli CLI.

package/dist/templates/ComponentTemplate.d.ts

@@ -1,7 +1,12 @@
-export declare function reactTemplate({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, }: {
+/**
+ * Generates a React functional component string from an SVG file's content,
+ * safely converting any inline `style="..."` to React-compatible object.
+ */
+export declare function reactTemplate({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, defaultStroke, }: {
     componentName: string;
     svgContent: string;
     defaultWidth?: number;
     defaultHeight?: number;
     defaultFill?: string;
+    defaultStroke?: string;
 }): string;

package/dist/templates/ComponentTemplate.js

@@ -1,29 +1,42 @@
-export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) {
-    // پاکسازی XML/DOCTYPE و style inline و class/id
+/**
+ * Generates a React functional component string from an SVG file's content,
+ * safely converting any inline `style="..."` to React-compatible object.
+ */
+export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", defaultStroke = "none", }) {
+    // helper: convert inline style string to JS object
+    function styleStringToObject(style) {
+        const obj = {};
+        style.split(";").forEach((pair) => {
+            if (!pair.trim())
+                return;
+            const [key, value] = pair.split(":");
+            if (!key || value === undefined)
+                return;
+            // convert kebab-case to camelCase
+            const camelKey = key.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            let v = value.trim();
+            if (!isNaN(Number(v)))
+                v = Number(v);
+            obj[camelKey] = v;
+        });
+        return obj;
+    }
+    // clean SVG content
     let cleaned = svgContent
-        .replace(/<\?xml.*?\?>/g, "")
-        .replace(/<!DOCTYPE.*?>/g, "")
-        .replace(/\r?\n|\r/g, "")
-        .replace(/\s*style="[^"]*"/g, "") // حذف style inline
-        .replace(/\s*(class|id)=["'][^"']*["']/g, "") // حذف class/id
+        .replace(/<\?xml.*?\?>/g, "") // remove XML declaration
+        .replace(/<!DOCTYPE.*?>/g, "") // remove DOCTYPE
+        .replace(/\r?\n|\r/g, "") // remove newlines
         .trim();
-    // تبدیل attribute svg به props-react compatible
-    cleaned = cleaned.replace(/<svg([^>]*)>/, `<svg$1
-      width={width}
-      height={height}
-      fill={fill}
-      stroke={props.stroke || "none"}
-      className={props.className}
-      {...props}>`);
+    // convert all style="..." to React objects
+    cleaned = cleaned.replace(/style="([^"]*)"/g, (_, styleContent) => {
+        return `{...{style: ${JSON.stringify(styleStringToObject(styleContent))}}}`;
+    });
+    // inject React props into <svg> tag
+    cleaned = cleaned.replace(/<svg([^>]*)>/, `<svg$1 width={props.width || ${defaultWidth}} height={props.height || ${defaultHeight}} fill={props.fill || "${defaultFill}"} stroke={props.stroke || "${defaultStroke}"} {...props}>`);
     return `import * as React from "react";
 import type { SVGProps } from "react";
 
-export const ${componentName}: React.FC<SVGProps<SVGSVGElement>> = ({
-  width = ${defaultWidth},
-  height = ${defaultHeight},
-  fill = "${defaultFill}",
-  ...props
-}) => (
+export const ${componentName}: React.FC<SVGProps<SVGSVGElement>> = (props) => (
   ${cleaned}
 );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svger-cli",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "CLI and runtime for converting SVGs to React components with watch support",
   "main": "dist/cli.js",
   "type": "module",
@@ -17,7 +17,7 @@
     "cli",
     "components"
   ],
-  "author": "faeze mohadespoor",
+  "author": "faeze mohades",
   "license": "MIT",
   "dependencies": {
     "change-case": "^5.4.4",

package/src/templates/ComponentTemplate.ts

@@ -1,46 +1,60 @@
+/**
+ * Generates a React functional component string from an SVG file's content,
+ * safely converting any inline `style="..."` to React-compatible object.
+ */
 export function reactTemplate({
   componentName,
   svgContent,
   defaultWidth = 24,
   defaultHeight = 24,
   defaultFill = "currentColor",
+  defaultStroke = "none",
 }: {
   componentName: string;
   svgContent: string;
   defaultWidth?: number;
   defaultHeight?: number;
   defaultFill?: string;
+  defaultStroke?: string;
 }) {
-  // پاکسازی XML/DOCTYPE و style inline و class/id
+  // helper: convert inline style string to JS object
+  function styleStringToObject(style: string) {
+    const obj: Record<string, string | number> = {};
+    style.split(";").forEach((pair) => {
+      if (!pair.trim()) return;
+      const [key, value] = pair.split(":");
+      if (!key || value === undefined) return;
+      // convert kebab-case to camelCase
+      const camelKey = key.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      let v: string | number = value.trim();
+      if (!isNaN(Number(v))) v = Number(v);
+      obj[camelKey] = v;
+    });
+    return obj;
+  }
+
+  // clean SVG content
   let cleaned = svgContent
-    .replace(/<\?xml.*?\?>/g, "")
-    .replace(/<!DOCTYPE.*?>/g, "")
-    .replace(/\r?\n|\r/g, "")
-    .replace(/\s*style="[^"]*"/g, "") // حذف style inline
-    .replace(/\s*(class|id)=["'][^"']*["']/g, "") // حذف class/id
+    .replace(/<\?xml.*?\?>/g, "") // remove XML declaration
+    .replace(/<!DOCTYPE.*?>/g, "") // remove DOCTYPE
+    .replace(/\r?\n|\r/g, "") // remove newlines
     .trim();
 
-  // تبدیل attribute svg به props-react compatible
+  // convert all style="..." to React objects
+  cleaned = cleaned.replace(/style="([^"]*)"/g, (_, styleContent) => {
+    return `{...{style: ${JSON.stringify(styleStringToObject(styleContent))}}}`;
+  });
+
+  // inject React props into <svg> tag
   cleaned = cleaned.replace(
     /<svg([^>]*)>/,
-    `<svg$1
-      width={width}
-      height={height}
-      fill={fill}
-      stroke={props.stroke || "none"}
-      className={props.className}
-      {...props}>`
+    `<svg$1 width={props.width || ${defaultWidth}} height={props.height || ${defaultHeight}} fill={props.fill || "${defaultFill}"} stroke={props.stroke || "${defaultStroke}"} {...props}>`
   );
 
   return `import * as React from "react";
 import type { SVGProps } from "react";
 
-export const ${componentName}: React.FC<SVGProps<SVGSVGElement>> = ({
-  width = ${defaultWidth},
-  height = ${defaultHeight},
-  fill = "${defaultFill}",
-  ...props
-}) => (
+export const ${componentName}: React.FC<SVGProps<SVGSVGElement>> = (props) => (
   ${cleaned}
 );