svger-cli 1.0.1 → 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,35 +1,12 @@
 /**
- * Generates a React functional component string from an SVG file's content.
- *
- * This template replaces XML/DOCTYPE declarations, cleans up formatting,
- * and injects React props (`width`, `height`, `fill`, and any others via `...props`)
- * directly into the root `<svg>` tag.
- *
- * @param {Object} params - Template generation parameters.
- * @param {string} params.componentName - The name of the generated React component.
- * @param {string} params.svgContent - The raw SVG markup to transform into a React component.
- * @param {number} [params.defaultWidth=24] - Default width of the SVG (used if none is provided via props).
- * @param {number} [params.defaultHeight=24] - Default height of the SVG (used if none is provided via props).
- * @param {string} [params.defaultFill="currentColor"] - Default fill color of the SVG.
- *
- * @returns {string} The complete TypeScript React component code as a string.
- *
- * @example
- * const svg = '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>';
- * const componentCode = reactTemplate({
- *   componentName: "MyIcon",
- *   svgContent: svg,
- *   defaultWidth: 32,
- *   defaultHeight: 32,
- * });
- *
- * // Result: a ready-to-write .tsx file containing a typed React component
- * console.log(componentCode);
+ * 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, }: {
+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,57 +1,42 @@
 /**
- * Generates a React functional component string from an SVG file's content.
- *
- * This template replaces XML/DOCTYPE declarations, cleans up formatting,
- * and injects React props (`width`, `height`, `fill`, and any others via `...props`)
- * directly into the root `<svg>` tag.
- *
- * @param {Object} params - Template generation parameters.
- * @param {string} params.componentName - The name of the generated React component.
- * @param {string} params.svgContent - The raw SVG markup to transform into a React component.
- * @param {number} [params.defaultWidth=24] - Default width of the SVG (used if none is provided via props).
- * @param {number} [params.defaultHeight=24] - Default height of the SVG (used if none is provided via props).
- * @param {string} [params.defaultFill="currentColor"] - Default fill color of the SVG.
- *
- * @returns {string} The complete TypeScript React component code as a string.
- *
- * @example
- * const svg = '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>';
- * const componentCode = reactTemplate({
- *   componentName: "MyIcon",
- *   svgContent: svg,
- *   defaultWidth: 32,
- *   defaultHeight: 32,
- * });
- *
- * // Result: a ready-to-write .tsx file containing a typed React component
- * console.log(componentCode);
+ * 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", }) {
-    // پاکسازی XML/DOCTYPE و حذف style های inline که React قبول نداره
+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(/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 به React-compatible و اضافه کردن props
-    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.1",
+  "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,30 +1,6 @@
 /**
- * Generates a React functional component string from an SVG file's content.
- *
- * This template replaces XML/DOCTYPE declarations, cleans up formatting,
- * and injects React props (`width`, `height`, `fill`, and any others via `...props`)
- * directly into the root `<svg>` tag.
- *
- * @param {Object} params - Template generation parameters.
- * @param {string} params.componentName - The name of the generated React component.
- * @param {string} params.svgContent - The raw SVG markup to transform into a React component.
- * @param {number} [params.defaultWidth=24] - Default width of the SVG (used if none is provided via props).
- * @param {number} [params.defaultHeight=24] - Default height of the SVG (used if none is provided via props).
- * @param {string} [params.defaultFill="currentColor"] - Default fill color of the SVG.
- *
- * @returns {string} The complete TypeScript React component code as a string.
- *
- * @example
- * const svg = '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>';
- * const componentCode = reactTemplate({
- *   componentName: "MyIcon",
- *   svgContent: svg,
- *   defaultWidth: 32,
- *   defaultHeight: 32,
- * });
- *
- * // Result: a ready-to-write .tsx file containing a typed React component
- * console.log(componentCode);
+ * 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,
@@ -32,43 +8,53 @@ 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 که React قبول نداره
+  // 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(/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 به React-compatible و اضافه کردن 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={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}
 );