svger-cli 1.0.5 → 1.0.6

package/.svgconfig.json

@@ -0,0 +1,3 @@
+{
+  "defaultHeight": 32
+}

package/dist/templates/ComponentTemplate.d.ts

@@ -1,9 +1,7 @@
-interface TemplateProps {
+export declare function reactTemplate({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, }: {
     componentName: string;
     svgContent: string;
     defaultWidth?: number;
     defaultHeight?: number;
     defaultFill?: string;
-}
-export declare const reactTemplate: ({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, }: TemplateProps) => string;
-export {};
+}): string;

package/dist/templates/ComponentTemplate.js

@@ -1,20 +1,29 @@
-export const reactTemplate = ({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) => {
-    const cleanedSvg = svgContent
+export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) {
+    const cleaned = svgContent
+        .replace(/<\?xml.*?\?>/g, "")
+        .replace(/<!DOCTYPE.*?>/g, "")
+        .replace(/\r?\n|\r/g, "")
+        .replace(/\s{2,}/g, " ")
         .replace(/style="[^"]*"/g, "")
-        .replace(/\s+xmlns:xlink=/g, " xmlnsXlink=");
+        .replace(/\s+xmlns(:xlink)?="[^"]*"/g, "")
+        .trim()
+        .replace(/^.*?<svg[^>]*>(.*?)<\/svg>.*$/i, "$1");
     return `import type { SVGProps } from "react";
-
-const ${componentName} = (props: SVGProps<SVGSVGElement>) => (
-  ${cleanedSvg
-        .replace(/<svg([^>]*)>/, `<svg$1
+const Svg${componentName} = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
     width={props.width || ${defaultWidth}}
     height={props.height || ${defaultHeight}}
     fill={props.fill || "${defaultFill}"}
     stroke={props.stroke || "none"}
     className={props.className}
-    {...props}>`)}
+    {...props}
+  >
+    ${cleaned}
+  </svg>
 );
-
-export default ${componentName};
+export default Svg${componentName};
 `;
-};
+}

package/my-icons/ArrowBendDownLeft.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+const SvgArrowBendDownLeft = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 32"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width={props.width || 24}
+    height={props.height || 32}
+    fill={props.fill || "currentColor"}
+    stroke={props.stroke || "none"}
+    className={props.className}
+    {...props}
+  >
+    <g id="surface1"><path  d="M 2.25 5.25 C 2.253906 7.835938 3.28125 10.3125 5.109375 12.140625 C 6.9375 13.96875 9.414062 14.996094 12 15 L 19.1875 15 L 15.96875 18.21875 C 15.828125 18.359375 15.75 18.550781 15.75 18.75 C 15.75 18.949219 15.828125 19.140625 15.96875 19.28125 C 16.109375 19.421875 16.300781 19.5 16.5 19.5 C 16.699219 19.5 16.890625 19.421875 17.03125 19.28125 L 21.53125 14.78125 C 21.601562 14.710938 21.65625 14.628906 21.691406 14.539062 C 21.730469 14.445312 21.75 14.347656 21.75 14.25 C 21.75 14.152344 21.730469 14.054688 21.691406 13.960938 C 21.65625 13.871094 21.601562 13.789062 21.53125 13.71875 L 17.03125 9.21875 C 16.890625 9.078125 16.699219 9 16.5 9 C 16.300781 9 16.109375 9.078125 15.96875 9.21875 C 15.828125 9.359375 15.75 9.550781 15.75 9.75 C 15.75 9.949219 15.828125 10.140625 15.96875 10.28125 L 19.1875 13.5 L 12 13.5 C 9.8125 13.496094 7.714844 12.628906 6.167969 11.082031 C 4.621094 9.535156 3.75 7.4375 3.75 5.25 C 3.75 5.050781 3.671875 4.859375 3.53125 4.71875 C 3.390625 4.578125 3.199219 4.5 3 4.5 C 2.800781 4.5 2.609375 4.578125 2.46875 4.71875 C 2.328125 4.859375 2.25 5.050781 2.25 5.25 Z M 2.25 5.25 "/></g>
+  </svg>
+);
+export default SvgArrowBendDownLeft;

package/my-icons/Vite.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+const SvgVite = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 32"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width={props.width || 24}
+    height={props.height || 32}
+    fill={props.fill || "currentColor"}
+    stroke={props.stroke || "none"}
+    className={props.className}
+    {...props}
+  >
+    <defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
+  </svg>
+);
+export default SvgVite;

package/my-svgs/ArrowBendDownLeft.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,48.235294%,82.352942%);fill-opacity:1;" d="M 2.25 5.25 C 2.253906 7.835938 3.28125 10.3125 5.109375 12.140625 C 6.9375 13.96875 9.414062 14.996094 12 15 L 19.1875 15 L 15.96875 18.21875 C 15.828125 18.359375 15.75 18.550781 15.75 18.75 C 15.75 18.949219 15.828125 19.140625 15.96875 19.28125 C 16.109375 19.421875 16.300781 19.5 16.5 19.5 C 16.699219 19.5 16.890625 19.421875 17.03125 19.28125 L 21.53125 14.78125 C 21.601562 14.710938 21.65625 14.628906 21.691406 14.539062 C 21.730469 14.445312 21.75 14.347656 21.75 14.25 C 21.75 14.152344 21.730469 14.054688 21.691406 13.960938 C 21.65625 13.871094 21.601562 13.789062 21.53125 13.71875 L 17.03125 9.21875 C 16.890625 9.078125 16.699219 9 16.5 9 C 16.300781 9 16.109375 9.078125 15.96875 9.21875 C 15.828125 9.359375 15.75 9.550781 15.75 9.75 C 15.75 9.949219 15.828125 10.140625 15.96875 10.28125 L 19.1875 13.5 L 12 13.5 C 9.8125 13.496094 7.714844 12.628906 6.167969 11.082031 C 4.621094 9.535156 3.75 7.4375 3.75 5.25 C 3.75 5.050781 3.671875 4.859375 3.53125 4.71875 C 3.390625 4.578125 3.199219 4.5 3 4.5 C 2.800781 4.5 2.609375 4.578125 2.46875 4.71875 C 2.328125 4.859375 2.25 5.050781 2.25 5.25 Z M 2.25 5.25 "/>
+</g>
+</svg>

package/my-svgs/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

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

package/src/builder.ts

@@ -1,7 +1,7 @@
 import fs from "fs-extra";
 import path from "path";
 import { pascalCase } from "change-case";
- import { isLocked } from "./lock.js";
+import { isLocked } from "./lock.js";
 import { readConfig } from "./config.js";
 import { reactTemplate } from "./templates/ComponentTemplate.js";
 

package/src/templates/ComponentTemplate.ts

@@ -1,40 +1,57 @@
- 
-interface TemplateProps {
-  componentName: string;
-  svgContent: string;
-  defaultWidth?: number;
-  defaultHeight?: number;
-  defaultFill?: string;
-}
-
-export const reactTemplate = ({
+/**
+ * Generates a React SVG component template from provided SVG content.
+ *
+ * This function processes raw SVG content by cleaning it (removing XML declarations,
+ * DOCTYPE, extra whitespace, inline styles, and xmlns attributes), then wraps it in
+ * a React functional component that accepts standard SVGProps for flexibility.
+ *
+ * @param options - Configuration object for generating the component.
+ * @param options.componentName - The name of the React component (e.g., "IconName").
+ * @param options.svgContent - The raw SVG markup as a string.
+ * @param [options.defaultWidth=24] - The default width attribute for the SVG.
+ * @param [options.defaultHeight=24] - The default height attribute for the SVG.
+ * @param [options.defaultFill="currentColor"] - The default fill color for the SVG.
+ * @returns A string containing the complete TypeScript code for the React SVG component.
+ */
+export function reactTemplate({
   componentName,
   svgContent,
   defaultWidth = 24,
   defaultHeight = 24,
   defaultFill = "currentColor",
-}: TemplateProps) => {
-  
-  const cleanedSvg = svgContent
-    .replace(/style="[^"]*"/g, "")  
-    .replace(/\s+xmlns:xlink=/g, " xmlnsXlink=");  
+}: {
+  componentName: string;
+  svgContent: string;
+  defaultWidth?: number;
+  defaultHeight?: number;
+  defaultFill?: string;
+}) {
+  const cleaned = svgContent
+    .replace(/<\?xml.*?\?>/g, "")
+    .replace(/<!DOCTYPE.*?>/g, "") 
+    .replace(/\r?\n|\r/g, "")
+    .replace(/\s{2,}/g, " ")
+    .replace(/style="[^"]*"/g, "")
+    .replace(/\s+xmlns(:xlink)?="[^"]*"/g, "") 
+    .trim()
+    .replace(/^.*?<svg[^>]*>(.*?)<\/svg>.*$/i, "$1");
 
   return `import type { SVGProps } from "react";
-
-const ${componentName} = (props: SVGProps<SVGSVGElement>) => (
-  ${cleanedSvg
-     .replace(
-      /<svg([^>]*)>/,
-      `<svg$1
+const Svg${componentName} = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
     width={props.width || ${defaultWidth}}
     height={props.height || ${defaultHeight}}
     fill={props.fill || "${defaultFill}"}
     stroke={props.stroke || "none"}
     className={props.className}
-    {...props}>`
-    )}
+    {...props}
+  >
+    ${cleaned}
+  </svg>
 );
-
-export default ${componentName};
+export default Svg${componentName};
 `;
-};
+}