svger-cli 1.0.2 → 1.0.4

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,8 @@
-export declare function reactTemplate({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, }: {
+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,37 @@
-export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) {
-    // پاکسازی XML/DOCTYPE و style inline و class/id
+export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", defaultStroke = "none", }) {
+    // convert style string to React object
+    function styleStringToObject(style) {
+        const obj = {};
+        style.split(";").forEach((pair) => {
+            if (!pair.trim())
+                return;
+            const [key, value] = pair.split(":");
+            if (!key || value === undefined)
+                return;
+            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
     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
         .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}>`);
+    // fix style attributes
+    cleaned = cleaned.replace(/style="([^"]*)"/g, (_, styleContent) => {
+        return `style={${JSON.stringify(styleStringToObject(styleContent))}}`;
+    });
+    // fix svg tag
+    cleaned = cleaned.replace(/<svg([^>]*)>/, `<svg$1 width={props.width || ${defaultWidth}} height={props.height || ${defaultHeight}} fill={props.fill || "${defaultFill}"} stroke={props.stroke || "${defaultStroke}"} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" {...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.4",
   "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

@@ -4,43 +4,52 @@ export function reactTemplate({
   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
+  // convert style string to React 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;
+      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
   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
     .trim();
 
-  // تبدیل attribute svg به props-react compatible
+  // fix style attributes
+  cleaned = cleaned.replace(/style="([^"]*)"/g, (_, styleContent) => {
+    return `style={${JSON.stringify(styleStringToObject(styleContent))}}`;
+  });
+
+  // fix 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}"} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" {...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}
 );