svgfusion 1.2.0 → 1.3.0
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.
- package/README.md +33 -1
- package/dist/cli.js +7 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
A powerful Node.js CLI tool and library that converts SVG files into optimized React and Vue components with complex SVG support, TypeScript integration, and smart optimization for modern development workflows.
|
|
9
9
|
|
|
10
|
-
[](https://www.npmjs.com/package/svgfusion)
|
|
11
11
|
[](https://www.typescriptlang.org/)
|
|
12
12
|
[](https://reactjs.org/)
|
|
13
13
|
[](https://vuejs.org/)
|
|
@@ -41,6 +41,9 @@ npm install -g svgfusion
|
|
|
41
41
|
npx svgfusion convert ./icons --output ./components
|
|
42
42
|
|
|
43
43
|
# Or install locally for programmatic usage
|
|
44
|
+
|
|
45
|
+
# Add prefix and suffix to component names
|
|
46
|
+
svgfusion convert ./icons --output ./components --prefix Icon --suffix Svg
|
|
44
47
|
npm install svgfusion
|
|
45
48
|
# or
|
|
46
49
|
yarn add svgfusion
|
|
@@ -48,6 +51,33 @@ yarn add svgfusion
|
|
|
48
51
|
pnpm add svgfusion
|
|
49
52
|
```
|
|
50
53
|
|
|
54
|
+
## CLI Options
|
|
55
|
+
|
|
56
|
+
svgfusion convert ./icons --output ./components --prefix Icon --suffix Svg
|
|
57
|
+
|
|
58
|
+
You can add a prefix and/or suffix to the generated component names using the `--prefix` and `--suffix` options:
|
|
59
|
+
|
|
60
|
+
```sh
|
|
61
|
+
npx svgfusion convert ./svgs --prefix Icon --suffix Svg
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
This will generate components like `IconStarSvg`, `IconUserSvg`, etc.
|
|
65
|
+
|
|
66
|
+
Both options sanitize input to remove symbols and spaces. If omitted, no prefix/suffix is added.
|
|
67
|
+
|
|
68
|
+
#### Example
|
|
69
|
+
|
|
70
|
+
```sh
|
|
71
|
+
npx svgfusion convert ./svgs --prefix App --suffix Widget
|
|
72
|
+
# Output: AppStarWidget, AppUserWidget, ...
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
For more details, run:
|
|
76
|
+
|
|
77
|
+
```sh
|
|
78
|
+
npx svgfusion --help
|
|
79
|
+
```
|
|
80
|
+
|
|
51
81
|
### CLI Usage
|
|
52
82
|
|
|
53
83
|
```bash
|
|
@@ -77,6 +107,8 @@ Options:
|
|
|
77
107
|
-f, --framework <framework> Target framework (react|vue) (default: "react")
|
|
78
108
|
-t, --typescript Generate TypeScript files
|
|
79
109
|
--no-optimize Skip SVG optimization
|
|
110
|
+
--prefix <prefix> Add prefix to component name (sanitized)
|
|
111
|
+
--suffix <suffix> Add suffix to component name (sanitized)
|
|
80
112
|
-h, --help Show help
|
|
81
113
|
```
|
|
82
114
|
|
package/dist/cli.js
CHANGED
|
@@ -620,12 +620,12 @@ program.command("convert").description("Convert SVG files to React or Vue compon
|
|
|
620
620
|
"-f, --framework <framework>",
|
|
621
621
|
"Target framework (react|vue)",
|
|
622
622
|
"react"
|
|
623
|
-
).option("-t, --typescript", "Generate TypeScript files", false).option("--no-optimize", "Skip SVG optimization").action(
|
|
623
|
+
).option("-t, --typescript", "Generate TypeScript files", false).option("--no-optimize", "Skip SVG optimization").option("--prefix <prefix>", "Add prefix to component name").option("--suffix <suffix>", "Add suffix to component name").action(
|
|
624
624
|
async (input, options) => {
|
|
625
625
|
console.log(createBanner());
|
|
626
626
|
console.log(`${colors.blue}\u{1F504} Processing SVG files...${colors.reset}`);
|
|
627
627
|
try {
|
|
628
|
-
const { framework, output, typescript, optimize: optimize2 } = options;
|
|
628
|
+
const { framework, output, typescript, optimize: optimize2, prefix, suffix } = options;
|
|
629
629
|
if (framework !== "react" && framework !== "vue") {
|
|
630
630
|
throw new Error('Framework must be either "react" or "vue"');
|
|
631
631
|
}
|
|
@@ -652,7 +652,11 @@ program.command("convert").description("Convert SVG files to React or Vue compon
|
|
|
652
652
|
const svgContent = await readSvgFile(filePath);
|
|
653
653
|
const optimizedSvg = optimize2 ? optimizeSvg(svgContent) : svgContent;
|
|
654
654
|
const filename = (0, import_path2.basename)(filePath);
|
|
655
|
-
const componentName =
|
|
655
|
+
const componentName = formatComponentName(
|
|
656
|
+
svgToComponentName(filename),
|
|
657
|
+
prefix,
|
|
658
|
+
suffix
|
|
659
|
+
);
|
|
656
660
|
const result = framework === "react" ? await convertToReact(optimizedSvg, {
|
|
657
661
|
typescript,
|
|
658
662
|
name: componentName
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svgfusion",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "A powerful CLI tool and library that converts SVG files into production-ready React and Vue 3 components with TypeScript support and automatic optimization.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|