svger-cli 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/templates/ComponentTemplate.d.ts +0 -28
  2. package/dist/templates/ComponentTemplate.js +4 -32
  3. package/package.json +1 -1
  4. package/src/templates/ComponentTemplate.ts +4 -32
package/dist/templates/ComponentTemplate.d.ts CHANGED
@@ -1,31 +1,3 @@
1
- /**
2
- * Generates a React functional component string from an SVG file's content.
3
- *
4
- * This template replaces XML/DOCTYPE declarations, cleans up formatting,
5
- * and injects React props (`width`, `height`, `fill`, and any others via `...props`)
6
- * directly into the root `<svg>` tag.
7
- *
8
- * @param {Object} params - Template generation parameters.
9
- * @param {string} params.componentName - The name of the generated React component.
10
- * @param {string} params.svgContent - The raw SVG markup to transform into a React component.
11
- * @param {number} [params.defaultWidth=24] - Default width of the SVG (used if none is provided via props).
12
- * @param {number} [params.defaultHeight=24] - Default height of the SVG (used if none is provided via props).
13
- * @param {string} [params.defaultFill="currentColor"] - Default fill color of the SVG.
14
- *
15
- * @returns {string} The complete TypeScript React component code as a string.
16
- *
17
- * @example
18
- * const svg = '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>';
19
- * const componentCode = reactTemplate({
20
- * componentName: "MyIcon",
21
- * svgContent: svg,
22
- * defaultWidth: 32,
23
- * defaultHeight: 32,
24
- * });
25
- *
26
- * // Result: a ready-to-write .tsx file containing a typed React component
27
- * console.log(componentCode);
28
- */
29
1
  export declare function reactTemplate({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, }: {
30
2
  componentName: string;
31
3
  svgContent: string;
package/dist/templates/ComponentTemplate.js CHANGED
@@ -1,41 +1,13 @@
1
- /**
2
- * Generates a React functional component string from an SVG file's content.
3
- *
4
- * This template replaces XML/DOCTYPE declarations, cleans up formatting,
5
- * and injects React props (`width`, `height`, `fill`, and any others via `...props`)
6
- * directly into the root `<svg>` tag.
7
- *
8
- * @param {Object} params - Template generation parameters.
9
- * @param {string} params.componentName - The name of the generated React component.
10
- * @param {string} params.svgContent - The raw SVG markup to transform into a React component.
11
- * @param {number} [params.defaultWidth=24] - Default width of the SVG (used if none is provided via props).
12
- * @param {number} [params.defaultHeight=24] - Default height of the SVG (used if none is provided via props).
13
- * @param {string} [params.defaultFill="currentColor"] - Default fill color of the SVG.
14
- *
15
- * @returns {string} The complete TypeScript React component code as a string.
16
- *
17
- * @example
18
- * const svg = '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>';
19
- * const componentCode = reactTemplate({
20
- * componentName: "MyIcon",
21
- * svgContent: svg,
22
- * defaultWidth: 32,
23
- * defaultHeight: 32,
24
- * });
25
- *
26
- * // Result: a ready-to-write .tsx file containing a typed React component
27
- * console.log(componentCode);
28
- */
29
1
  export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) {
30
- // پاکسازی XML/DOCTYPE و حذف style های inline که React قبول نداره
2
+ // پاکسازی XML/DOCTYPE و style inline و class/id
31
3
  let cleaned = svgContent
32
4
  .replace(/<\?xml.*?\?>/g, "")
33
5
  .replace(/<!DOCTYPE.*?>/g, "")
34
6
  .replace(/\r?\n|\r/g, "")
35
- .replace(/style="[^"]*"/g, "") // حذف style های inline
36
- .replace(/\s(class|id)=["'][^"']*["']/g, "") // حذف class/id مستقیم
7
+ .replace(/\s*style="[^"]*"/g, "") // حذف style inline
8
+ .replace(/\s*(class|id)=["'][^"']*["']/g, "") // حذف class/id
37
9
  .trim();
38
- // تغییر attribute های SVG به React-compatible و اضافه کردن props
10
+ // تبدیل attribute svg به props-react compatible
39
11
  cleaned = cleaned.replace(/<svg([^>]*)>/, `<svg$1
40
12
  width={width}
41
13
  height={height}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svger-cli",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "CLI and runtime for converting SVGs to React components with watch support",
5
5
  "main": "dist/cli.js",
6
6
  "type": "module",
package/src/templates/ComponentTemplate.ts CHANGED
@@ -1,31 +1,3 @@
1
- /**
2
- * Generates a React functional component string from an SVG file's content.
3
- *
4
- * This template replaces XML/DOCTYPE declarations, cleans up formatting,
5
- * and injects React props (`width`, `height`, `fill`, and any others via `...props`)
6
- * directly into the root `<svg>` tag.
7
- *
8
- * @param {Object} params - Template generation parameters.
9
- * @param {string} params.componentName - The name of the generated React component.
10
- * @param {string} params.svgContent - The raw SVG markup to transform into a React component.
11
- * @param {number} [params.defaultWidth=24] - Default width of the SVG (used if none is provided via props).
12
- * @param {number} [params.defaultHeight=24] - Default height of the SVG (used if none is provided via props).
13
- * @param {string} [params.defaultFill="currentColor"] - Default fill color of the SVG.
14
- *
15
- * @returns {string} The complete TypeScript React component code as a string.
16
- *
17
- * @example
18
- * const svg = '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>';
19
- * const componentCode = reactTemplate({
20
- * componentName: "MyIcon",
21
- * svgContent: svg,
22
- * defaultWidth: 32,
23
- * defaultHeight: 32,
24
- * });
25
- *
26
- * // Result: a ready-to-write .tsx file containing a typed React component
27
- * console.log(componentCode);
28
- */
29
1
  export function reactTemplate({
30
2
  componentName,
31
3
  svgContent,
@@ -39,16 +11,16 @@ export function reactTemplate({
39
11
  defaultHeight?: number;
40
12
  defaultFill?: string;
41
13
  }) {
42
- // پاکسازی XML/DOCTYPE و حذف style های inline که React قبول نداره
14
+ // پاکسازی XML/DOCTYPE و style inline و class/id
43
15
  let cleaned = svgContent
44
16
  .replace(/<\?xml.*?\?>/g, "")
45
17
  .replace(/<!DOCTYPE.*?>/g, "")
46
18
  .replace(/\r?\n|\r/g, "")
47
- .replace(/style="[^"]*"/g, "") // حذف style های inline
48
- .replace(/\s(class|id)=["'][^"']*["']/g, "") // حذف class/id مستقیم
19
+ .replace(/\s*style="[^"]*"/g, "") // حذف style inline
20
+ .replace(/\s*(class|id)=["'][^"']*["']/g, "") // حذف class/id
49
21
  .trim();
50
22
 
51
- // تغییر attribute های SVG به React-compatible و اضافه کردن props
23
+ // تبدیل attribute svg به props-react compatible
52
24
  cleaned = cleaned.replace(
53
25
  /<svg([^>]*)>/,
54
26
  `<svg$1