svger-cli 1.0.0 → 1.0.2

package/dist/templates/ComponentTemplate.d.ts

@@ -1,31 +1,3 @@
-/**
- * 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);
- */
 export declare function reactTemplate({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, }: {
     componentName: string;
     svgContent: string;

package/dist/templates/ComponentTemplate.js

@@ -1,46 +1,30 @@
-/**
- * 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);
- */
 export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) {
-    const cleaned = svgContent
-        .replace(/<\?xml.*?\?>/g, "") // Remove XML declarations
-        .replace(/<!DOCTYPE.*?>/g, "") // Remove DOCTYPE lines
-        .replace(/\r?\n|\r/g, "") // Remove newlines
+    // پاکسازی XML/DOCTYPE و style inline و class/id
+    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}>`);
     return `import * as React from "react";
+import type { SVGProps } from "react";
 
-export const ${componentName}: React.FC<React.SVGProps<SVGSVGElement>> = ({
+export const ${componentName}: React.FC<SVGProps<SVGSVGElement>> = ({
   width = ${defaultWidth},
   height = ${defaultHeight},
   fill = "${defaultFill}",
   ...props
 }) => (
-  ${cleaned.replace(/<svg/, `<svg width={width} height={height} fill={fill} {...props}`)}
+  ${cleaned}
 );
 
 export default ${componentName};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svger-cli",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "CLI and runtime for converting SVGs to React components with watch support",
   "main": "dist/cli.js",
   "type": "module",

package/src/templates/ComponentTemplate.ts

@@ -1,31 +1,3 @@
-/**
- * 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);
- */
 export function reactTemplate({
   componentName,
   svgContent,
@@ -39,24 +11,37 @@ export function reactTemplate({
   defaultHeight?: number;
   defaultFill?: string;
 }) {
-  const cleaned = svgContent
-    .replace(/<\?xml.*?\?>/g, "") // Remove XML declarations
-    .replace(/<!DOCTYPE.*?>/g, "") // Remove DOCTYPE lines
-    .replace(/\r?\n|\r/g, "") // Remove newlines
+  // پاکسازی XML/DOCTYPE و style inline و class/id
+  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}>`
+  );
+
   return `import * as React from "react";
+import type { SVGProps } from "react";
 
-export const ${componentName}: React.FC<React.SVGProps<SVGSVGElement>> = ({
+export const ${componentName}: React.FC<SVGProps<SVGSVGElement>> = ({
   width = ${defaultWidth},
   height = ${defaultHeight},
   fill = "${defaultFill}",
   ...props
 }) => (
-  ${cleaned.replace(
-    /<svg/,
-    `<svg width={width} height={height} fill={fill} {...props}`
-  )}
+  ${cleaned}
 );
 
 export default ${componentName};

package/.svg-lock

@@ -1 +0,0 @@
-[]