svger-cli 1.0.6 → 1.0.8

package/TESTING.md

@@ -0,0 +1,143 @@
+# SVGER-CLI Testing Guide
+
+## Automated Framework Tests
+
+The project includes comprehensive testing for all 8 supported frameworks.
+
+### Run All Framework Tests
+
+```bash
+node test-frameworks.js
+```
+
+This test suite validates:
+- ✅ Component generation for React, Vue, Svelte, Angular, Solid, Preact, Lit, Vanilla
+- ✅ TypeScript type correctness
+- ✅ Framework-specific patterns and best practices
+- ✅ Correct file extensions per framework
+- ✅ Code syntax validity
+
+### Test Output
+
+All generated test components are saved to `test-output/` directory for manual inspection.
+
+## Manual CLI Testing
+
+### Test React (Default)
+
+```bash
+svger-cli build my-svgs test-react
+```
+
+Expected: `.tsx` files with React.forwardRef components
+
+### Test Vue Composition API
+
+```bash
+svger-cli build my-svgs test-vue --framework vue --composition
+```
+
+Expected: `.vue` files with `<script setup lang="ts">`
+
+### Test Vue Options API
+
+```bash
+svger-cli build my-svgs test-vue-options --framework vue
+```
+
+Expected: `.vue` files with `defineComponent`
+
+### Test Svelte
+
+```bash
+svger-cli build my-svgs test-svelte --framework svelte
+```
+
+Expected: `.svelte` files with TypeScript props
+
+### Test Angular Standalone
+
+```bash
+svger-cli build my-svgs test-angular --framework angular --standalone
+```
+
+Expected: `.component.ts` files with `standalone: true`
+
+### Test Angular Module
+
+```bash
+svger-cli build my-svgs test-angular-module --framework angular
+```
+
+Expected: `.component.ts` files without standalone flag
+
+### Test Solid
+
+```bash
+svger-cli build my-svgs test-solid --framework solid
+```
+
+Expected: `.tsx` files with Solid Component types
+
+### Test Preact
+
+```bash
+svger-cli build my-svgs test-preact --framework preact
+```
+
+Expected: `.tsx` files with Preact FunctionComponent
+
+### Test Lit
+
+```bash
+svger-cli build my-svgs test-lit --framework lit
+```
+
+Expected: `.ts` files with @customElement decorator
+
+### Test Vanilla JS
+
+```bash
+svger-cli build my-svgs test-vanilla --framework vanilla
+```
+
+Expected: `.ts` files with factory functions
+
+## Build Verification
+
+After making changes:
+
+```bash
+# Clean build
+npm run build
+
+# Run automated tests
+node test-frameworks.js
+
+# Manual CLI test
+svger-cli build my-svgs test-output --framework vue
+```
+
+## Test Results
+
+Latest test run (2025-11-07):
+
+```
+Total Tests: 10
+✅ Passed: 10
+❌ Failed: 0
+
+Frameworks Tested:
+- React ✅
+- Vue (Composition) ✅
+- Vue (Options) ✅
+- Svelte ✅
+- Angular (Standalone) ✅
+- Angular (Module) ✅
+- Solid ✅
+- Preact ✅
+- Lit ✅
+- Vanilla ✅
+```
+
+All frameworks generate valid, idiomatic components that follow framework best practices.

package/cli-framework.test.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+import { svgProcessor } from './dist/processors/svg-processor.js';
+import { frameworkTemplateEngine } from './dist/index.js';
+
+// Test file extension generation
+console.log('\n📋 Testing File Extension Generation:\n');
+
+const frameworks = ['react', 'vue', 'svelte', 'angular', 'solid', 'preact', 'lit', 'vanilla'];
+
+frameworks.forEach(fw => {
+  const ext = frameworkTemplateEngine.getFileExtension(fw, true);
+  console.log(`  ${fw.padEnd(10)} => .${ext}`);
+});
+
+console.log('\n✅ Framework file extensions working correctly!\n');

package/cli-test-angular/Arrowbenddownleft.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'arrowbenddownleft',
+  standalone: true,
+  template: `
+    <svg
+      [attr.class]="className"
+      [attr.width]="width"
+      [attr.height]="height"
+      [attr.fill]="fill"
+      [attr.stroke]="stroke"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="surface1"><path  d="M 2.25 5.25 C 2.253906 7.835938 3.28125 10.3125 5.109375 12.140625 C 6.9375 13.96875 9.414062 14.996094 12 15 L 19.1875 15 L 15.96875 18.21875 C 15.828125 18.359375 15.75 18.550781 15.75 18.75 C 15.75 18.949219 15.828125 19.140625 15.96875 19.28125 C 16.109375 19.421875 16.300781 19.5 16.5 19.5 C 16.699219 19.5 16.890625 19.421875 17.03125 19.28125 L 21.53125 14.78125 C 21.601562 14.710938 21.65625 14.628906 21.691406 14.539062 C 21.730469 14.445312 21.75 14.347656 21.75 14.25 C 21.75 14.152344 21.730469 14.054688 21.691406 13.960938 C 21.65625 13.871094 21.601562 13.789062 21.53125 13.71875 L 17.03125 9.21875 C 16.890625 9.078125 16.699219 9 16.5 9 C 16.300781 9 16.109375 9.078125 15.96875 9.21875 C 15.828125 9.359375 15.75 9.550781 15.75 9.75 C 15.75 9.949219 15.828125 10.140625 15.96875 10.28125 L 19.1875 13.5 L 12 13.5 C 9.8125 13.496094 7.714844 12.628906 6.167969 11.082031 C 4.621094 9.535156 3.75 7.4375 3.75 5.25 C 3.75 5.050781 3.671875 4.859375 3.53125 4.71875 C 3.390625 4.578125 3.199219 4.5 3 4.5 C 2.800781 4.5 2.609375 4.578125 2.46875 4.71875 C 2.328125 4.859375 2.25 5.050781 2.25 5.25 Z M 2.25 5.25 "/></g>
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrowbenddownleftComponent {
+  @Input() className: string = '';
+  @Input() width: string | number = 24;
+  @Input() height: string | number = 24;
+  @Input() fill: string = 'currentColor';
+  @Input() stroke: string = '';
+}

package/cli-test-angular/Vite.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'vite',
+  standalone: true,
+  template: `
+    <svg
+      [attr.class]="className"
+      [attr.width]="width"
+      [attr.height]="height"
+      [attr.fill]="fill"
+      [attr.stroke]="stroke"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ViteComponent {
+  @Input() className: string = '';
+  @Input() width: string | number = 24;
+  @Input() height: string | number = 24;
+  @Input() fill: string = 'currentColor';
+  @Input() stroke: string = '';
+}

package/cli-test-angular/index.ts

@@ -0,0 +1,25 @@
+/**
+ * SVG Components Index
+ * Generated by svger-cli
+ * 
+ * Import individual components:
+ * import { Arrowbenddownleft } from './components';
+ * 
+ * Import all components:
+ * import * as Icons from './components';
+ * import Icons from './components'; // default export
+ */
+
+export { default as Arrowbenddownleft } from './Arrowbenddownleft';
+export { default as Vite } from './Vite';
+// Export all components
+export {
+  Arrowbenddownleft,
+  Vite,
+};
+
+// Re-export for convenience
+export default {
+  Arrowbenddownleft,
+  Vite,
+};

package/{my-icons/ArrowBendDownLeft.tsx → cli-test-output/Arrowbenddownleft.vue}

@@ -1,17 +1,33 @@
-import type { SVGProps } from "react";
-const SvgArrowBendDownLeft = (props: SVGProps<SVGSVGElement>) => (
+<template>
   <svg
-    viewBox="0 0 24 32"
+    :class="className"
+    :style="style"
+    :width="width || 24"
+    :height="height || 24"
+    :fill="fill || 'currentColor'"
+    :stroke="stroke"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    width={props.width || 24}
-    height={props.height || 32}
-    fill={props.fill || "currentColor"}
-    stroke={props.stroke || "none"}
-    className={props.className}
-    {...props}
+    v-bind="$attrs"
   >
     <g id="surface1"><path  d="M 2.25 5.25 C 2.253906 7.835938 3.28125 10.3125 5.109375 12.140625 C 6.9375 13.96875 9.414062 14.996094 12 15 L 19.1875 15 L 15.96875 18.21875 C 15.828125 18.359375 15.75 18.550781 15.75 18.75 C 15.75 18.949219 15.828125 19.140625 15.96875 19.28125 C 16.109375 19.421875 16.300781 19.5 16.5 19.5 C 16.699219 19.5 16.890625 19.421875 17.03125 19.28125 L 21.53125 14.78125 C 21.601562 14.710938 21.65625 14.628906 21.691406 14.539062 C 21.730469 14.445312 21.75 14.347656 21.75 14.25 C 21.75 14.152344 21.730469 14.054688 21.691406 13.960938 C 21.65625 13.871094 21.601562 13.789062 21.53125 13.71875 L 17.03125 9.21875 C 16.890625 9.078125 16.699219 9 16.5 9 C 16.300781 9 16.109375 9.078125 15.96875 9.21875 C 15.828125 9.359375 15.75 9.550781 15.75 9.75 C 15.75 9.949219 15.828125 10.140625 15.96875 10.28125 L 19.1875 13.5 L 12 13.5 C 9.8125 13.496094 7.714844 12.628906 6.167969 11.082031 C 4.621094 9.535156 3.75 7.4375 3.75 5.25 C 3.75 5.050781 3.671875 4.859375 3.53125 4.71875 C 3.390625 4.578125 3.199219 4.5 3 4.5 C 2.800781 4.5 2.609375 4.578125 2.46875 4.71875 C 2.328125 4.859375 2.25 5.050781 2.25 5.25 Z M 2.25 5.25 "/></g>
   </svg>
-);
-export default SvgArrowBendDownLeft;
+</template>
+
+<script setup lang="ts">
+interface Props {
+  className?: string;
+  style?: string | Record<string, any>;
+  width?: string | number;
+  height?: string | number;
+  fill?: string;
+  stroke?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  className: '',
+  fill: 'currentColor',
+  width: 24,
+  height: 24
+});
+</script>

package/{my-icons/Vite.tsx → cli-test-output/Vite.vue}

@@ -1,17 +1,33 @@
-import type { SVGProps } from "react";
-const SvgVite = (props: SVGProps<SVGSVGElement>) => (
+<template>
   <svg
-    viewBox="0 0 24 32"
+    :class="className"
+    :style="style"
+    :width="width || 24"
+    :height="height || 24"
+    :fill="fill || 'currentColor'"
+    :stroke="stroke"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    width={props.width || 24}
-    height={props.height || 32}
-    fill={props.fill || "currentColor"}
-    stroke={props.stroke || "none"}
-    className={props.className}
-    {...props}
+    v-bind="$attrs"
   >
     <defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
   </svg>
-);
-export default SvgVite;
+</template>
+
+<script setup lang="ts">
+interface Props {
+  className?: string;
+  style?: string | Record<string, any>;
+  width?: string | number;
+  height?: string | number;
+  fill?: string;
+  stroke?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  className: '',
+  fill: 'currentColor',
+  width: 24,
+  height: 24
+});
+</script>

package/cli-test-output/index.ts

@@ -0,0 +1,25 @@
+/**
+ * SVG Components Index
+ * Generated by svger-cli
+ * 
+ * Import individual components:
+ * import { Arrowbenddownleft } from './components';
+ * 
+ * Import all components:
+ * import * as Icons from './components';
+ * import Icons from './components'; // default export
+ */
+
+export { default as Arrowbenddownleft } from './Arrowbenddownleft';
+export { default as Vite } from './Vite';
+// Export all components
+export {
+  Arrowbenddownleft,
+  Vite,
+};
+
+// Re-export for convenience
+export default {
+  Arrowbenddownleft,
+  Vite,
+};

package/cli-test-react/Arrowbenddownleft.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+export interface ArrowbenddownleftProps extends SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+/**
+ * Arrowbenddownleft SVG Component
+ * Generated by svger-cli
+ */
+const Arrowbenddownleft = React.forwardRef<SVGSVGElement, ArrowbenddownleftProps>(
+  ({ size, className, style, ...props }, ref) => {
+    const dimensions = size ? { width: size, height: size } : {
+      width: props.width || 24,
+      height: props.height || 32
+    };
+
+    return (
+      <svg
+        ref={ref}
+        viewBox="0 0 24 32"
+        xmlns="http://www.w3.org/2000/svg"
+        width={dimensions.width}
+        height={dimensions.height}
+        fill={props.fill || "currentColor"}
+        className={className}
+        style={style}
+        {...props}
+      >
+        <g id="surface1"><path  d="M 2.25 5.25 C 2.253906 7.835938 3.28125 10.3125 5.109375 12.140625 C 6.9375 13.96875 9.414062 14.996094 12 15 L 19.1875 15 L 15.96875 18.21875 C 15.828125 18.359375 15.75 18.550781 15.75 18.75 C 15.75 18.949219 15.828125 19.140625 15.96875 19.28125 C 16.109375 19.421875 16.300781 19.5 16.5 19.5 C 16.699219 19.5 16.890625 19.421875 17.03125 19.28125 L 21.53125 14.78125 C 21.601562 14.710938 21.65625 14.628906 21.691406 14.539062 C 21.730469 14.445312 21.75 14.347656 21.75 14.25 C 21.75 14.152344 21.730469 14.054688 21.691406 13.960938 C 21.65625 13.871094 21.601562 13.789062 21.53125 13.71875 L 17.03125 9.21875 C 16.890625 9.078125 16.699219 9 16.5 9 C 16.300781 9 16.109375 9.078125 15.96875 9.21875 C 15.828125 9.359375 15.75 9.550781 15.75 9.75 C 15.75 9.949219 15.828125 10.140625 15.96875 10.28125 L 19.1875 13.5 L 12 13.5 C 9.8125 13.496094 7.714844 12.628906 6.167969 11.082031 C 4.621094 9.535156 3.75 7.4375 3.75 5.25 C 3.75 5.050781 3.671875 4.859375 3.53125 4.71875 C 3.390625 4.578125 3.199219 4.5 3 4.5 C 2.800781 4.5 2.609375 4.578125 2.46875 4.71875 C 2.328125 4.859375 2.25 5.050781 2.25 5.25 Z M 2.25 5.25 "/></g>
+      </svg>
+    );
+  }
+);
+
+Arrowbenddownleft.displayName = "Arrowbenddownleft";
+
+export default Arrowbenddownleft;

package/cli-test-react/Vite.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+export interface ViteProps extends SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+/**
+ * Vite SVG Component
+ * Generated by svger-cli
+ */
+const Vite = React.forwardRef<SVGSVGElement, ViteProps>(
+  ({ size, className, style, ...props }, ref) => {
+    const dimensions = size ? { width: size, height: size } : {
+      width: props.width || 24,
+      height: props.height || 32
+    };
+
+    return (
+      <svg
+        ref={ref}
+        viewBox="0 0 24 32"
+        xmlns="http://www.w3.org/2000/svg"
+        width={dimensions.width}
+        height={dimensions.height}
+        fill={props.fill || "currentColor"}
+        className={className}
+        style={style}
+        {...props}
+      >
+        <defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
+      </svg>
+    );
+  }
+);
+
+Vite.displayName = "Vite";
+
+export default Vite;

package/cli-test-react/index.ts

@@ -0,0 +1,25 @@
+/**
+ * SVG Components Index
+ * Generated by svger-cli
+ * 
+ * Import individual components:
+ * import { Arrowbenddownleft } from './components';
+ * 
+ * Import all components:
+ * import * as Icons from './components';
+ * import Icons from './components'; // default export
+ */
+
+export { default as Arrowbenddownleft } from './Arrowbenddownleft';
+export { default as Vite } from './Vite';
+// Export all components
+export {
+  Arrowbenddownleft,
+  Vite,
+};
+
+// Re-export for convenience
+export default {
+  Arrowbenddownleft,
+  Vite,
+};

package/cli-test-svelte/Arrowbenddownleft.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let className: string = '';
+  export let style: string = '';
+  export let width: string | number = 24;
+  export let height: string | number = 24;
+  export let fill: string = 'currentColor';
+  export let stroke: string = '';
+</script>
+
+<svg
+  class={className}
+  {style}
+  {width}
+  {height}
+  {fill}
+  {stroke}
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  {...$$restProps}
+>
+  <g id="surface1"><path  d="M 2.25 5.25 C 2.253906 7.835938 3.28125 10.3125 5.109375 12.140625 C 6.9375 13.96875 9.414062 14.996094 12 15 L 19.1875 15 L 15.96875 18.21875 C 15.828125 18.359375 15.75 18.550781 15.75 18.75 C 15.75 18.949219 15.828125 19.140625 15.96875 19.28125 C 16.109375 19.421875 16.300781 19.5 16.5 19.5 C 16.699219 19.5 16.890625 19.421875 17.03125 19.28125 L 21.53125 14.78125 C 21.601562 14.710938 21.65625 14.628906 21.691406 14.539062 C 21.730469 14.445312 21.75 14.347656 21.75 14.25 C 21.75 14.152344 21.730469 14.054688 21.691406 13.960938 C 21.65625 13.871094 21.601562 13.789062 21.53125 13.71875 L 17.03125 9.21875 C 16.890625 9.078125 16.699219 9 16.5 9 C 16.300781 9 16.109375 9.078125 15.96875 9.21875 C 15.828125 9.359375 15.75 9.550781 15.75 9.75 C 15.75 9.949219 15.828125 10.140625 15.96875 10.28125 L 19.1875 13.5 L 12 13.5 C 9.8125 13.496094 7.714844 12.628906 6.167969 11.082031 C 4.621094 9.535156 3.75 7.4375 3.75 5.25 C 3.75 5.050781 3.671875 4.859375 3.53125 4.71875 C 3.390625 4.578125 3.199219 4.5 3 4.5 C 2.800781 4.5 2.609375 4.578125 2.46875 4.71875 C 2.328125 4.859375 2.25 5.050781 2.25 5.25 Z M 2.25 5.25 "/></g>
+</svg>

package/cli-test-svelte/Vite.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let className: string = '';
+  export let style: string = '';
+  export let width: string | number = 24;
+  export let height: string | number = 24;
+  export let fill: string = 'currentColor';
+  export let stroke: string = '';
+</script>
+
+<svg
+  class={className}
+  {style}
+  {width}
+  {height}
+  {fill}
+  {stroke}
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  {...$$restProps}
+>
+  <defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
+</svg>

package/cli-test-svelte/index.ts

@@ -0,0 +1,25 @@
+/**
+ * SVG Components Index
+ * Generated by svger-cli
+ * 
+ * Import individual components:
+ * import { Arrowbenddownleft } from './components';
+ * 
+ * Import all components:
+ * import * as Icons from './components';
+ * import Icons from './components'; // default export
+ */
+
+export { default as Arrowbenddownleft } from './Arrowbenddownleft';
+export { default as Vite } from './Vite';
+// Export all components
+export {
+  Arrowbenddownleft,
+  Vite,
+};
+
+// Re-export for convenience
+export default {
+  Arrowbenddownleft,
+  Vite,
+};

package/dist/builder.js

@@ -1,6 +1,5 @@
-import fs from "fs-extra";
 import path from "path";
-import { pascalCase } from "change-case";
+import { toPascalCase, FileSystem } from "./utils/native.js";
 import { isLocked } from "./lock.js";
 import { readConfig } from "./config.js";
 import { reactTemplate } from "./templates/ComponentTemplate.js";
@@ -16,12 +15,12 @@ export async function buildAll(config) {
     const svgConfig = readConfig();
     const srcDir = path.resolve(config.src);
     const outDir = path.resolve(config.out);
-    if (!fs.existsSync(srcDir)) {
+    if (!(await FileSystem.exists(srcDir))) {
         console.error("❌ Source folder not found:", srcDir);
         process.exit(1);
     }
-    await fs.ensureDir(outDir);
-    const files = (await fs.readdir(srcDir)).filter(f => f.endsWith(".svg"));
+    await FileSystem.ensureDir(outDir);
+    const files = (await FileSystem.readDir(srcDir)).filter((f) => f.endsWith(".svg"));
     if (!files.length) {
         console.log("⚠️  No SVG files found in", srcDir);
         return;
@@ -32,8 +31,8 @@ export async function buildAll(config) {
             console.log(`⚠️ Skipped locked file: ${file}`);
             continue;
         }
-        const svgContent = await fs.readFile(svgPath, "utf-8");
-        const componentName = pascalCase(file.replace(".svg", ""));
+        const svgContent = await FileSystem.readFile(svgPath, "utf-8");
+        const componentName = toPascalCase(file.replace(".svg", ""));
         const componentCode = reactTemplate({
             componentName,
             svgContent,
@@ -42,7 +41,7 @@ export async function buildAll(config) {
             defaultFill: svgConfig.defaultFill,
         });
         const outFile = path.join(outDir, `${componentName}.tsx`);
-        await fs.writeFile(outFile, componentCode, "utf-8");
+        await FileSystem.writeFile(outFile, componentCode, "utf-8");
         console.log(`✅ Generated: ${componentName}.tsx`);
     }
     console.log("🎉 All SVGs have been converted successfully!");
@@ -62,12 +61,12 @@ export async function generateSVG({ svgFile, outDir, }) {
         console.log(`⚠️ Skipped locked file: ${path.basename(svgFile)}`);
         return;
     }
-    if (!fs.existsSync(filePath)) {
+    if (!(await FileSystem.exists(filePath))) {
         console.error("❌ SVG file not found:", filePath);
         process.exit(1);
     }
-    const svgContent = await fs.readFile(filePath, "utf-8");
-    const componentName = pascalCase(path.basename(svgFile, ".svg"));
+    const svgContent = await FileSystem.readFile(filePath, "utf-8");
+    const componentName = toPascalCase(path.basename(svgFile, ".svg"));
     const componentCode = reactTemplate({
         componentName,
         svgContent,
@@ -76,8 +75,8 @@ export async function generateSVG({ svgFile, outDir, }) {
         defaultFill: svgConfig.defaultFill,
     });
     const outputFolder = path.resolve(outDir);
-    await fs.ensureDir(outputFolder);
+    await FileSystem.ensureDir(outputFolder);
     const outFile = path.join(outputFolder, `${componentName}.tsx`);
-    await fs.writeFile(outFile, componentCode, "utf-8");
+    await FileSystem.writeFile(outFile, componentCode, "utf-8");
     console.log(`✅ Generated: ${componentName}.tsx`);
 }

package/dist/clean.js

@@ -1,5 +1,5 @@
-import fs from "fs-extra";
 import path from "path";
+import { FileSystem } from "./utils/native.js";
 /**
  * Cleans the specified output directory by removing all files and folders inside it.
  * Typically used to clear previously generated SVG React components before a new build.
@@ -9,10 +9,10 @@ import path from "path";
  */
 export async function clean(outDir) {
     const targetDir = path.resolve(outDir);
-    if (!fs.existsSync(targetDir)) {
+    if (!(await FileSystem.exists(targetDir))) {
         console.log(`⚠️ Directory not found: ${targetDir}`);
         return;
     }
-    await fs.emptyDir(targetDir);
+    await FileSystem.emptyDir(targetDir);
     console.log(`🧹 Cleaned all generated SVG components in: ${targetDir}`);
 }