svgfusion 1.26.0 → 1.28.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.
Files changed (2) hide show
  1. package/README.md +42 -64
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -14,15 +14,15 @@
14
14
 
15
15
  </div>
16
16
 
17
- ## Features
17
+ ## What's Included
18
18
 
19
- - **React & Vue Support**: Generate components for both frameworks from the same SVG
20
- - **TypeScript Ready**: Full TypeScript support with proper type definitions
21
- - **Advanced Color Splitting**: Intelligent color extraction with fill/stroke optimization
22
- - **Stroke Width Splitting**: Extract stroke widths as component props
23
- - **Native SVG Props**: Components extend React.SVGProps and Vue SVGAttributes
24
- - **Batch Processing**: Convert entire directories of SVG files
25
- - **Browser Support**: Use directly in browsers with full feature support
19
+ This package includes everything you need for SVG to component conversion:
20
+
21
+ - **CLI Tool** - Convert SVG files from command line
22
+ - **Node.js API** - Programmatic conversion in Node.js
23
+ - **Module API** - Browser-compatible module for web apps
24
+ - **React & Vue Support** - Generate components for both frameworks
25
+ - **TypeScript Ready** - Full TypeScript support with proper types
26
26
 
27
27
  ## Installation
28
28
 
@@ -32,83 +32,61 @@ npm install svgfusion
32
32
 
33
33
  ## Quick Start
34
34
 
35
- ### React Component
36
-
37
- ```typescript
38
- import { convertSvgToReact } from 'svgfusion';
39
-
40
- const svgCode = `<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`;
41
-
42
- const result = await convertSvgToReact(svgCode, {
43
- componentName: 'StarIcon',
44
- typescript: true,
45
- splitColors: true,
46
- });
47
-
48
- console.log(result.component);
49
- ```
50
-
51
- ### Vue Component
52
-
53
- ```typescript
54
- import { convertSvgToVue } from 'svgfusion';
55
-
56
- const result = await convertSvgToVue(svgCode, {
57
- componentName: 'StarIcon',
58
- typescript: true,
59
- splitColors: true,
60
- });
61
-
62
- console.log(result.component);
63
- ```
64
-
65
35
  ### CLI Usage
66
36
 
67
- Coming soon! For now, clone the repository and use:
68
-
69
37
  ```bash
38
+ # Clone the repository
70
39
  git clone https://github.com/lolvOid/svgfusion
71
40
  cd svgfusion
72
41
  pnpm install
42
+
43
+ # Build first (required)
73
44
  pnpm build
74
- pnpm --filter=svgfusion-bundle exec svgfusion icon.svg --react --typescript
45
+
46
+ # Use the CLI
47
+ pnpm svgfusion icon.svg --framework react --output ./components
48
+ pnpm svgfusion ./icons --framework vue --typescript --output ./components
75
49
  ```
76
50
 
77
- ### Browser Usage
51
+ ### Module Usage (Browser/Web Apps)
78
52
 
79
- ```html
80
- <script type="module">
81
- import {
82
- convertSvgToReact,
83
- convertSvgToVue,
84
- } from 'https://cdn.jsdelivr.net/npm/svgfusion@1.25.2/+esm';
53
+ ```javascript
54
+ import { convertToReact, convertToVue } from 'svgfusion/browser';
85
55
 
86
- const svgCode = `<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`;
56
+ const svgCode = `<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`;
87
57
 
88
- const result = await convertSvgToReact(svgCode, {
89
- componentName: 'StarIcon',
90
- typescript: true,
91
- });
58
+ // React component
59
+ const reactResult = await convertToReact(svgCode, {
60
+ componentName: 'StarIcon',
61
+ typescript: true,
62
+ splitColors: true,
63
+ });
92
64
 
93
- console.log(result.component);
94
- </script>
65
+ // Vue component
66
+ const vueResult = await convertToVue(svgCode, {
67
+ componentName: 'StarIcon',
68
+ typescript: true,
69
+ splitColors: true,
70
+ });
95
71
  ```
96
72
 
97
- Or import the browser-optimized version:
73
+ ### Node.js API
98
74
 
99
75
  ```javascript
100
- import { convertSvgToReact, convertSvgToVue } from 'svgfusion/browser';
101
- // No Node.js dependencies required
76
+ import { SVGFusion } from 'svgfusion';
77
+
78
+ const engine = new SVGFusion();
79
+ const result = await engine.convert(svgContent, {
80
+ framework: 'react',
81
+ transformation: { splitColors: true },
82
+ generator: { typescript: true, componentName: 'MyIcon' },
83
+ });
102
84
  ```
103
85
 
104
86
  ## Documentation
105
87
 
106
- - **[Full Documentation](https://svgfusion.netlify.app)** - Complete guides and API reference
107
- - **[Interactive Playground](https://svgfusion.netlify.app/playground)** - Try SVGFusion in your browser
108
- - **[CLI Reference](https://svgfusion.netlify.app/docs/cli-usage)** - Command-line documentation
109
- - **[API Reference](https://svgfusion.netlify.app/docs/api)** - Programmatic usage
110
- - **[Examples](https://svgfusion.netlify.app/docs/examples)** - Real-world use cases
88
+ For complete guides, API reference, and examples visit [svgfusion.netlify.app](https://svgfusion.netlify.app)
111
89
 
112
90
  ## License
113
91
 
114
- MIT License - see [LICENSE](LICENSE) for details.
92
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svgfusion",
3
- "version": "1.26.0",
3
+ "version": "1.28.0",
4
4
  "description": "Convert SVG files into blazing-fast React and Vue 3 components with automatic color extraction, full TypeScript support, and seamless integration into any modern workflow.",
5
5
  "type": "module",
6
6
  "publishConfig": {