svger-cli 1.0.3 → 1.0.4

package/dist/templates/ComponentTemplate.d.ts

@@ -1,7 +1,3 @@
-/**
- * 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;

package/dist/templates/ComponentTemplate.js

@@ -1,9 +1,5 @@
-/**
- * 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
+    // convert style string to React object
     function styleStringToObject(style) {
         const obj = {};
         style.split(";").forEach((pair) => {
@@ -12,7 +8,6 @@ export function reactTemplate({ componentName, svgContent, defaultWidth = 24, de
             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)))
@@ -21,18 +16,18 @@ export function reactTemplate({ componentName, svgContent, defaultWidth = 24, de
         });
         return obj;
     }
-    // clean SVG content
+    // clean SVG
     let cleaned = svgContent
-        .replace(/<\?xml.*?\?>/g, "") // remove XML declaration
-        .replace(/<!DOCTYPE.*?>/g, "") // remove DOCTYPE
-        .replace(/\r?\n|\r/g, "") // remove newlines
+        .replace(/<\?xml.*?\?>/g, "")
+        .replace(/<!DOCTYPE.*?>/g, "")
+        .replace(/\r?\n|\r/g, "")
         .trim();
-    // convert all style="..." to React objects
+    // fix style attributes
     cleaned = cleaned.replace(/style="([^"]*)"/g, (_, styleContent) => {
-        return `{...{style: ${JSON.stringify(styleStringToObject(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}>`);
+    // 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";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svger-cli",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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,7 +1,3 @@
-/**
- * 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,
@@ -17,14 +13,13 @@ export function reactTemplate({
   defaultFill?: string;
   defaultStroke?: string;
 }) {
-  // helper: convert inline style string to JS object
+  // 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;
-      // 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);
@@ -33,22 +28,22 @@ export function reactTemplate({
     return obj;
   }
 
-  // clean SVG content
+  // clean SVG
   let cleaned = svgContent
-    .replace(/<\?xml.*?\?>/g, "") // remove XML declaration
-    .replace(/<!DOCTYPE.*?>/g, "") // remove DOCTYPE
-    .replace(/\r?\n|\r/g, "") // remove newlines
+    .replace(/<\?xml.*?\?>/g, "")
+    .replace(/<!DOCTYPE.*?>/g, "")
+    .replace(/\r?\n|\r/g, "")
     .trim();
 
-  // convert all style="..." to React objects
+  // fix style attributes
   cleaned = cleaned.replace(/style="([^"]*)"/g, (_, styleContent) => {
-    return `{...{style: ${JSON.stringify(styleStringToObject(styleContent))}}}`;
+    return `style={${JSON.stringify(styleStringToObject(styleContent))}}`;
   });
 
-  // inject React props into <svg> tag
+  // 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}"} {...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";