svger-cli 1.0.4 → 1.0.5

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 (6) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/templates/ComponentTemplate.d.ts +4 -3
  3. package/dist/templates/ComponentTemplate.js +15 -35
  4. package/package.json +1 -1
  5. package/src/builder.ts +2 -2
  6. package/src/templates/ComponentTemplate.ts +28 -46
package/dist/builder.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import fs from "fs-extra";
2
2
  import path from "path";
3
3
  import { pascalCase } from "change-case";
4
- import { reactTemplate } from "./templates/ComponentTemplate.js";
5
4
  import { isLocked } from "./lock.js";
6
5
  import { readConfig } from "./config.js";
6
+ import { reactTemplate } from "./templates/ComponentTemplate.js";
7
7
  /**
8
8
  * Converts all SVG files from a source directory into React components and writes them to an output directory.
9
9
  *
package/dist/templates/ComponentTemplate.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- export declare function reactTemplate({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, defaultStroke, }: {
1
+ interface TemplateProps {
2
2
  componentName: string;
3
3
  svgContent: string;
4
4
  defaultWidth?: number;
5
5
  defaultHeight?: number;
6
6
  defaultFill?: string;
7
- defaultStroke?: string;
8
- }): string;
7
+ }
8
+ export declare const reactTemplate: ({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, }: TemplateProps) => string;
9
+ export {};
package/dist/templates/ComponentTemplate.js CHANGED
@@ -1,40 +1,20 @@
1
- export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", defaultStroke = "none", }) {
2
- // convert style string to React object
3
- function styleStringToObject(style) {
4
- const obj = {};
5
- style.split(";").forEach((pair) => {
6
- if (!pair.trim())
7
- return;
8
- const [key, value] = pair.split(":");
9
- if (!key || value === undefined)
10
- return;
11
- const camelKey = key.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
12
- let v = value.trim();
13
- if (!isNaN(Number(v)))
14
- v = Number(v);
15
- obj[camelKey] = v;
16
- });
17
- return obj;
18
- }
19
- // clean SVG
20
- let cleaned = svgContent
21
- .replace(/<\?xml.*?\?>/g, "")
22
- .replace(/<!DOCTYPE.*?>/g, "")
23
- .replace(/\r?\n|\r/g, "")
24
- .trim();
25
- // fix style attributes
26
- cleaned = cleaned.replace(/style="([^"]*)"/g, (_, styleContent) => {
27
- return `style={${JSON.stringify(styleStringToObject(styleContent))}}`;
28
- });
29
- // fix svg tag
30
- 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}>`);
31
- return `import * as React from "react";
32
- import type { SVGProps } from "react";
1
+ export const reactTemplate = ({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) => {
2
+ const cleanedSvg = svgContent
3
+ .replace(/style="[^"]*"/g, "")
4
+ .replace(/\s+xmlns:xlink=/g, " xmlnsXlink=");
5
+ return `import type { SVGProps } from "react";
33
6
 
34
- export const ${componentName}: React.FC<SVGProps<SVGSVGElement>> = (props) => (
35
- ${cleaned}
7
+ const ${componentName} = (props: SVGProps<SVGSVGElement>) => (
8
+ ${cleanedSvg
9
+ .replace(/<svg([^>]*)>/, `<svg$1
10
+ width={props.width || ${defaultWidth}}
11
+ height={props.height || ${defaultHeight}}
12
+ fill={props.fill || "${defaultFill}"}
13
+ stroke={props.stroke || "none"}
14
+ className={props.className}
15
+ {...props}>`)}
36
16
  );
37
17
 
38
18
  export default ${componentName};
39
19
  `;
40
- }
20
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svger-cli",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
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/builder.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import fs from "fs-extra";
2
2
  import path from "path";
3
3
  import { pascalCase } from "change-case";
4
- import { reactTemplate } from "./templates/ComponentTemplate.js";
5
- import { isLocked } from "./lock.js";
4
+ import { isLocked } from "./lock.js";
6
5
  import { readConfig } from "./config.js";
6
+ import { reactTemplate } from "./templates/ComponentTemplate.js";
7
7
 
8
8
  /**
9
9
  * Converts all SVG files from a source directory into React components and writes them to an output directory.
package/src/templates/ComponentTemplate.ts CHANGED
@@ -1,58 +1,40 @@
1
- export function reactTemplate({
2
- componentName,
3
- svgContent,
4
- defaultWidth = 24,
5
- defaultHeight = 24,
6
- defaultFill = "currentColor",
7
- defaultStroke = "none",
8
- }: {
1
+
2
+ interface TemplateProps {
9
3
  componentName: string;
10
4
  svgContent: string;
11
5
  defaultWidth?: number;
12
6
  defaultHeight?: number;
13
7
  defaultFill?: string;
14
- defaultStroke?: string;
15
- }) {
16
- // convert style string to React object
17
- function styleStringToObject(style: string) {
18
- const obj: Record<string, string | number> = {};
19
- style.split(";").forEach((pair) => {
20
- if (!pair.trim()) return;
21
- const [key, value] = pair.split(":");
22
- if (!key || value === undefined) return;
23
- const camelKey = key.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
24
- let v: string | number = value.trim();
25
- if (!isNaN(Number(v))) v = Number(v);
26
- obj[camelKey] = v;
27
- });
28
- return obj;
29
- }
30
-
31
- // clean SVG
32
- let cleaned = svgContent
33
- .replace(/<\?xml.*?\?>/g, "")
34
- .replace(/<!DOCTYPE.*?>/g, "")
35
- .replace(/\r?\n|\r/g, "")
36
- .trim();
37
-
38
- // fix style attributes
39
- cleaned = cleaned.replace(/style="([^"]*)"/g, (_, styleContent) => {
40
- return `style={${JSON.stringify(styleStringToObject(styleContent))}}`;
41
- });
8
+ }
42
9
 
43
- // fix svg tag
44
- cleaned = cleaned.replace(
45
- /<svg([^>]*)>/,
46
- `<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}>`
47
- );
10
+ export const reactTemplate = ({
11
+ componentName,
12
+ svgContent,
13
+ defaultWidth = 24,
14
+ defaultHeight = 24,
15
+ defaultFill = "currentColor",
16
+ }: TemplateProps) => {
17
+
18
+ const cleanedSvg = svgContent
19
+ .replace(/style="[^"]*"/g, "")
20
+ .replace(/\s+xmlns:xlink=/g, " xmlnsXlink=");
48
21
 
49
- return `import * as React from "react";
50
- import type { SVGProps } from "react";
22
+ return `import type { SVGProps } from "react";
51
23
 
52
- export const ${componentName}: React.FC<SVGProps<SVGSVGElement>> = (props) => (
53
- ${cleaned}
24
+ const ${componentName} = (props: SVGProps<SVGSVGElement>) => (
25
+ ${cleanedSvg
26
+ .replace(
27
+ /<svg([^>]*)>/,
28
+ `<svg$1
29
+ width={props.width || ${defaultWidth}}
30
+ height={props.height || ${defaultHeight}}
31
+ fill={props.fill || "${defaultFill}"}
32
+ stroke={props.stroke || "none"}
33
+ className={props.className}
34
+ {...props}>`
35
+ )}
54
36
  );
55
37
 
56
38
  export default ${componentName};
57
39
  `;
58
- }
40
+ };