svger-cli 2.0.0 → 2.0.2

package/cli-framework.test.js

@@ -1,16 +0,0 @@
-#!/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

@@ -1,27 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,25 +0,0 @@
-/**
- * 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-output/Arrowbenddownleft.vue

@@ -1,33 +0,0 @@
-<template>
-  <svg
-    :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"
-    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>
-</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/Vite.vue

@@ -1,33 +0,0 @@
-<template>
-  <svg
-    :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"
-    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>
-</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

@@ -1,25 +0,0 @@
-/**
- * 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

@@ -1,39 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,25 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-/**
- * 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/docs/ADR-SVG-INTRGRATION-METHODS-001.adr.md

@@ -1,157 +0,0 @@
-**ADR** How to implement correctly SVG Integration Methods in React
-
-**Version: 1.0.0**  
-**Date: 10/14/2025**  
-**Author: Engineer Navid Rezadoost**  
-**TDR Document ID: [TDR-SVG-INTRGRATION-METHODS-001](https://docs.google.com/document/d/1b04_V01xOvLiSMzuPdaRynANlnt2wYdJ_vjs9MAqtn4/edit?tab=t.0)**  
-**Status**: Proposed
-
-**Context**  
-This service is responsible for managing svg files. Given the documentation provided in the TDR for implementing Method 3, which covers the weaknesses of svgr, it was decided to release this package as an open source service on npm.
-
-**Similar Weaknesses That We Are Looking To Solve In This Process**
-
-* Add more commands for more control and mastery over svg file management  
-* Add different commands for rendering and rebuilding svg components with more control over files that we do not want to be rebuilt  
-* Add a command to create a component for new files that are added  
-* A command to componentize a specific svg  
-* Add settings for files that should remain unchanged due to specific styling  
-* Introduce the folder and run the build as \--watch as soon as a new svg file is added to the specified folder, the svg will be built automatically  
-* Create a config file or command on the command line to specify the source file to monitor or process and specify the destination directory  
-* Specify rules for building components in width and height dimensions and even styles that should be set as default
-
-#### **Decision**
-
-We will develop a custom SVG integration CLI and runtime service for React that:
-
-* Watches directories for new SVG files.  
-* Generates React components automatically with flexible configuration.  
-* Allows selective rebuilds and fine-grained control over output styles and props.
-
-#### **Rationale**
-
-SVGR, while popular, has the following shortcomings:
-
-* Lacks a flexible CLI API for selective component generation.  
-* No built-in `--watch` mode for automatic builds on new file additions.  
-* Limited support for default dimension and styling rules.  
-* Difficult to exclude or lock specific SVGs from rebuilds.
-
-#### **Consequences**
-
-* More control and automation for developers.  
-* Slightly increased setup complexity.  
-* Responsibility to maintain a custom build tool.
-
-## **Example Configuration and Commands**
-
-**Include examples so developers can easily visualize the usage.**
-
-### Example `.svgconfig.json`
-
-| {  "source": "./src/assets/svg",  "output": "./src/components/icons",  "watch": true,  "defaultWidth": "24",  "defaultHeight": "24",  "defaultFill": "currentColor",  "exclude": \["logo.svg", "brand-icon.svg"\],  "styleRules": {    "fill": "inherit",    "stroke": "none"  }} |
-| :---- |
-
-**Commands**
-
-**Build Command**  
-Builds React components from all SVG files in the specified source directory.
-
-| svg-tool build \[options\] |
-| :---- |
-
-| svg-tool build \--src ./src/assets/svg \--out ./src/components/icons |
-| :---- |
-
-### **What It Does**
-
-* Converts every `.svg` in the source folder to a React component.  
-* Applies rules from `.svgconfig.json` if present.  
-* Generates file names based on kebab-case or PascalCase (configurable).
-
-**Watch Command**  
-Continuously watches the source directory for new or updated SVG files, and automatically builds them.
-
-| svg-tool watch \[options\] |
-| :---- |
-
-| svg-tool watch \--src ./src/assets/svg \--out ./src/components/icons |
-| :---- |
-
-### **What It Does**
-
-* Automatically rebuilds when an SVG file is added, updated, or removed.  
-* Skips locked SVG files.  
-* Ideal for active development environments.
-
-## **Generate Command**
-
-Converts a specific SVG file into a React component on demand.
-
-| svg-tool generate \<svgFile\> \[options\] |
-| :---- |
-
-| svg-tool generate ./src/assets/svg/heart.svg \--out ./src/components/icons |
-| :---- |
-
-### **What It Does**
-
-* Converts only the specified file.  
-* Ideal for adding individual icons to an existing collection.
-
-## **Lock Command**
-
-Locks one or more SVG files to prevent them from being rebuilt or overwritten during batch operations.
-
-| svg-tool lock \<svgFile\> \[options\] |
-| :---- |
-
-| svg-tool lock ./src/assets/svg/logo.svg |
-| :---- |
-
-### **What It Does**
-
-* Adds the specified file(s) to a `.svg-lock` or `.svgconfig.json` list.  
-* Protects specific SVGs with custom branding or styling.
-
-
-## **Unlock Command**
-
-Unlocks one or more SVG files previously marked as locked, allowing them to be rebuilt.
-
-| svg-tool unlock \<svgFile\> \[options\] |
-| :---- |
-
-| svg-tool unlock ./src/assets/svg/logo.svg |
-| :---- |
-
-## **Config Command**
-
-Creates or modifies a `.svgconfig.json` file with default settings for builds and watches.
-
-| svg-tool config \[options\] |
-| :---- |
-
-| svg-tool config \--init |
-| :---- |
-
-**\--init**
-
-| svg-tool config \--init |
-| :---- |
-
-**\--set \<key=value\>**
-
-| svg-tool config \--set defaultWidth=32 |
-| :---- |
-
-**`--show`**
-
-| svg-tool config \--show |
-| :---- |
-
-**`Full One-Line Command Closet (for Bash / Mac / Linux / PowerShell)`**
-
-| svg-tool config \--init && svg-tool config \--set source=./src/assets/svg && svg-tool config \--set output=./src/components/icons && svg-tool config \--set watch=true && svg-tool config \--set defaultWidth=24 && svg-tool config \--set defaultHeight=24 && svg-tool config \--set defaultFill=currentColor && svg-tool lock ./src/assets/svg/logo.svg && svg-tool build \--src ./src/assets/svg \--out ./src/components/icons \--verbose && svg-tool generate ./src/assets/svg/new-icon.svg \--out ./src/components/icons && svg-tool unlock ./src/assets/svg/logo.svg && svg-tool watch \--src ./src/assets/svg \--out ./src/components/icons && svg-tool clean \--out ./src/components/icons |
-| :---- |
-