svgfusion-cmd 1.0.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 +166 -0
- package/dist/index.d.mts +34 -0
- package/dist/index.d.ts +34 -0
- package/dist/index.js +675 -0
- package/dist/index.mjs +675 -0
- package/dist/main.d.mts +2 -0
- package/dist/main.d.ts +2 -0
- package/dist/main.js +675 -0
- package/dist/main.mjs +675 -0
- package/package.json +88 -0
package/README.md
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
# SVGFusion CLI
|
|
2
|
+
|
|
3
|
+
🚀 Command-line interface for converting SVG files into production-ready React and Vue 3 components with TypeScript support and batch processing capabilities.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install -g svgfusion-cmd
|
|
9
|
+
# or
|
|
10
|
+
npx svgfusion-cmd
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# Convert single SVG to React component
|
|
17
|
+
svgfusion-cmd input.svg --output ./components --framework react
|
|
18
|
+
|
|
19
|
+
# Batch convert all SVGs in a directory
|
|
20
|
+
svgfusion-cmd ./icons --output ./components --framework vue --typescript
|
|
21
|
+
|
|
22
|
+
# Watch mode for development
|
|
23
|
+
svgfusion-cmd ./icons --output ./components --watch
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Features
|
|
27
|
+
|
|
28
|
+
- **Batch Processing** - Convert entire directories of SVG files
|
|
29
|
+
- **Fast & Efficient** - Optimized for large-scale conversions
|
|
30
|
+
- **Framework Support** - React and Vue 3 components
|
|
31
|
+
- **TypeScript Ready** - Generate .tsx/.ts files with full type support
|
|
32
|
+
- **Watch Mode** - Automatically convert files on changes
|
|
33
|
+
- **Customizable** - Extensive configuration options
|
|
34
|
+
- **Zero Dependencies** - Standalone CLI tool
|
|
35
|
+
|
|
36
|
+
<img src="https://i.ibb.co/mfRb84x/cli.png" alt="SVGFusion CLI" width="512" >
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
### Basic Commands
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
# Convert single file
|
|
44
|
+
svgfusion-cmd icon.svg --framework react --output ./components
|
|
45
|
+
|
|
46
|
+
# Convert directory
|
|
47
|
+
svgfusion-cmd ./icons --framework vue --output ./src/components
|
|
48
|
+
|
|
49
|
+
# With TypeScript
|
|
50
|
+
svgfusion-cmd ./icons --framework react --typescript --output ./components
|
|
51
|
+
|
|
52
|
+
# Watch mode
|
|
53
|
+
svgfusion-cmd ./icons --framework react --watch --output ./components
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Options
|
|
57
|
+
|
|
58
|
+
| Option | Alias | Description | Default |
|
|
59
|
+
| -------------- | ----- | ----------------------------- | ---------- |
|
|
60
|
+
| `--framework` | `-f` | Target framework (react, vue) | `react` |
|
|
61
|
+
| `--output` | `-o` | Output directory | `./output` |
|
|
62
|
+
| `--typescript` | `-t` | Generate TypeScript files | `false` |
|
|
63
|
+
| `--watch` | `-w` | Watch for file changes | `false` |
|
|
64
|
+
| `--config` | `-c` | Configuration file path | - |
|
|
65
|
+
| `--help` | `-h` | Show help | - |
|
|
66
|
+
| `--version` | `-v` | Show version | - |
|
|
67
|
+
|
|
68
|
+
### Configuration File
|
|
69
|
+
|
|
70
|
+
Create a `svgfusion.config.js` file:
|
|
71
|
+
|
|
72
|
+
```javascript
|
|
73
|
+
export default {
|
|
74
|
+
framework: 'react',
|
|
75
|
+
typescript: true,
|
|
76
|
+
output: './src/components/icons',
|
|
77
|
+
template: 'functional',
|
|
78
|
+
naming: 'PascalCase',
|
|
79
|
+
// Add custom transformations
|
|
80
|
+
transforms: {
|
|
81
|
+
removeIds: true,
|
|
82
|
+
addDisplayName: true,
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Examples
|
|
88
|
+
|
|
89
|
+
### React Component Output
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
// Generated IconHome.tsx
|
|
93
|
+
import React from 'react';
|
|
94
|
+
|
|
95
|
+
interface IconHomeProps extends React.SVGProps<SVGSVGElement> {}
|
|
96
|
+
|
|
97
|
+
export const IconHome: React.FC<IconHomeProps> = props => {
|
|
98
|
+
return (
|
|
99
|
+
<svg
|
|
100
|
+
width="24"
|
|
101
|
+
height="24"
|
|
102
|
+
viewBox="0 0 24 24"
|
|
103
|
+
fill="currentColor"
|
|
104
|
+
{...props}
|
|
105
|
+
>
|
|
106
|
+
<path d="M12 3l8 8v10h-6v-6H10v6H4V11l8-8z" />
|
|
107
|
+
</svg>
|
|
108
|
+
);
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
export default IconHome;
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Vue Component Output
|
|
115
|
+
|
|
116
|
+
```vue
|
|
117
|
+
<!-- Generated IconHome.vue -->
|
|
118
|
+
<template>
|
|
119
|
+
<svg
|
|
120
|
+
width="24"
|
|
121
|
+
height="24"
|
|
122
|
+
viewBox="0 0 24 24"
|
|
123
|
+
fill="currentColor"
|
|
124
|
+
v-bind="$attrs"
|
|
125
|
+
>
|
|
126
|
+
<path d="M12 3l8 8v10h-6v-6H10v6H4V11l8-8z" />
|
|
127
|
+
</svg>
|
|
128
|
+
</template>
|
|
129
|
+
|
|
130
|
+
<script setup lang="ts">
|
|
131
|
+
interface Props extends SVGAttributes {}
|
|
132
|
+
|
|
133
|
+
defineProps<Props>();
|
|
134
|
+
</script>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Advanced Usage
|
|
138
|
+
|
|
139
|
+
### Batch Processing with Naming Patterns
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
# Convert with custom naming
|
|
143
|
+
svgfusion-cmd ./icons --framework react --typescript \
|
|
144
|
+
--output ./components \
|
|
145
|
+
--naming "Icon{name}" \
|
|
146
|
+
--case PascalCase
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Integration with Build Tools
|
|
150
|
+
|
|
151
|
+
```json
|
|
152
|
+
{
|
|
153
|
+
"scripts": {
|
|
154
|
+
"icons:build": "svgfusion-cmd ./assets/icons --framework react --typescript --output ./src/components/icons",
|
|
155
|
+
"icons:watch": "svgfusion-cmd ./assets/icons --framework react --typescript --output ./src/components/icons --watch"
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Documentation
|
|
161
|
+
|
|
162
|
+
Visit [svgfusion.netlify.app](https://svgfusion.netlify.app) for complete documentation, examples, and advanced configuration options.
|
|
163
|
+
|
|
164
|
+
## License
|
|
165
|
+
|
|
166
|
+
MIT © [lolvoid](https://github.com/lolvOid)
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Framework } from 'svgfusion-core';
|
|
2
|
+
|
|
3
|
+
interface CliOptions {
|
|
4
|
+
framework: Framework;
|
|
5
|
+
input: string;
|
|
6
|
+
output?: string;
|
|
7
|
+
name?: string;
|
|
8
|
+
prefix?: string;
|
|
9
|
+
suffix?: string;
|
|
10
|
+
optimize?: boolean;
|
|
11
|
+
typescript?: boolean;
|
|
12
|
+
javascript?: boolean;
|
|
13
|
+
format?: 'esm' | 'cjs';
|
|
14
|
+
recursive?: boolean;
|
|
15
|
+
verbose?: boolean;
|
|
16
|
+
generateIndex?: boolean;
|
|
17
|
+
indexFormat?: 'ts' | 'js';
|
|
18
|
+
exportType?: 'named' | 'default';
|
|
19
|
+
splitColors?: boolean;
|
|
20
|
+
splitStrokeWidths?: boolean;
|
|
21
|
+
fixedStrokeWidth?: boolean;
|
|
22
|
+
normalizeFillStroke?: boolean;
|
|
23
|
+
accessibility?: boolean;
|
|
24
|
+
removeComments?: boolean;
|
|
25
|
+
removeDuplicates?: boolean;
|
|
26
|
+
forwardRef?: boolean;
|
|
27
|
+
memo?: boolean;
|
|
28
|
+
minifyPaths?: boolean;
|
|
29
|
+
index: boolean;
|
|
30
|
+
isFixedStrokeWidth?: boolean;
|
|
31
|
+
}
|
|
32
|
+
declare function runCli(): void;
|
|
33
|
+
|
|
34
|
+
export { type CliOptions, runCli as default, runCli };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Framework } from 'svgfusion-core';
|
|
2
|
+
|
|
3
|
+
interface CliOptions {
|
|
4
|
+
framework: Framework;
|
|
5
|
+
input: string;
|
|
6
|
+
output?: string;
|
|
7
|
+
name?: string;
|
|
8
|
+
prefix?: string;
|
|
9
|
+
suffix?: string;
|
|
10
|
+
optimize?: boolean;
|
|
11
|
+
typescript?: boolean;
|
|
12
|
+
javascript?: boolean;
|
|
13
|
+
format?: 'esm' | 'cjs';
|
|
14
|
+
recursive?: boolean;
|
|
15
|
+
verbose?: boolean;
|
|
16
|
+
generateIndex?: boolean;
|
|
17
|
+
indexFormat?: 'ts' | 'js';
|
|
18
|
+
exportType?: 'named' | 'default';
|
|
19
|
+
splitColors?: boolean;
|
|
20
|
+
splitStrokeWidths?: boolean;
|
|
21
|
+
fixedStrokeWidth?: boolean;
|
|
22
|
+
normalizeFillStroke?: boolean;
|
|
23
|
+
accessibility?: boolean;
|
|
24
|
+
removeComments?: boolean;
|
|
25
|
+
removeDuplicates?: boolean;
|
|
26
|
+
forwardRef?: boolean;
|
|
27
|
+
memo?: boolean;
|
|
28
|
+
minifyPaths?: boolean;
|
|
29
|
+
index: boolean;
|
|
30
|
+
isFixedStrokeWidth?: boolean;
|
|
31
|
+
}
|
|
32
|
+
declare function runCli(): void;
|
|
33
|
+
|
|
34
|
+
export { type CliOptions, runCli as default, runCli };
|