svger-cli 1.0.0

package/dist/watch.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Watches a source folder for changes to SVG files and automatically
+ * rebuilds React components when SVGs are added, modified, or deleted.
+ *
+ * @param {Object} config - Watch configuration object.
+ * @param {string} config.src - Source folder containing SVG files to watch.
+ * @param {string} config.out - Output folder where React components are generated.
+ * @returns {import("chokidar").FSWatcher} A chokidar file watcher instance.
+ *
+ * @example
+ * watchSVGs({ src: "./src/assets/svg", out: "./src/components/icons" });
+ *
+ * // Watches the SVG folder and:
+ * // - Generates new components when files are added.
+ * // - Updates components when files change.
+ * // - Removes components when SVGs are deleted.
+ */
+export declare function watchSVGs(config: {
+    src: string;
+    out: string;
+}): import("chokidar").FSWatcher;

package/dist/watch.js

@@ -0,0 +1,77 @@
+import fs from "fs-extra";
+import path from "path";
+import chokidar from "chokidar";
+import { generateSVG } from "./builder.js";
+import { isLocked } from "./lock.js";
+import { readConfig } from "./config.js";
+/**
+ * Watches a source folder for changes to SVG files and automatically
+ * rebuilds React components when SVGs are added, modified, or deleted.
+ *
+ * @param {Object} config - Watch configuration object.
+ * @param {string} config.src - Source folder containing SVG files to watch.
+ * @param {string} config.out - Output folder where React components are generated.
+ * @returns {import("chokidar").FSWatcher} A chokidar file watcher instance.
+ *
+ * @example
+ * watchSVGs({ src: "./src/assets/svg", out: "./src/components/icons" });
+ *
+ * // Watches the SVG folder and:
+ * // - Generates new components when files are added.
+ * // - Updates components when files change.
+ * // - Removes components when SVGs are deleted.
+ */
+export function watchSVGs(config) {
+    const srcDir = path.resolve(config.src);
+    const outDir = path.resolve(config.out);
+    const svgConfig = readConfig();
+    if (!fs.existsSync(srcDir)) {
+        console.error("❌ Source folder not found:", srcDir);
+        process.exit(1);
+    }
+    console.log(`👀 Watching for SVG changes in: ${srcDir}`);
+    console.log("🚀 Watch mode active — waiting for file changes...");
+    const watcher = chokidar.watch(srcDir, {
+        persistent: true,
+        ignoreInitial: false,
+        depth: 0,
+        awaitWriteFinish: { stabilityThreshold: 500, pollInterval: 100 },
+        ignored: /(^|[\/\\])\../, // Ignore hidden files
+    });
+    // ---- Handle new SVG files ----
+    watcher.on("add", async (filePath) => {
+        if (path.extname(filePath) !== ".svg")
+            return;
+        console.log("Detected new file:", filePath);
+        if (isLocked(filePath)) {
+            console.log(`⚠️ Skipped locked file: ${path.basename(filePath)}`);
+            return;
+        }
+        console.log(`➕ New SVG detected: ${path.basename(filePath)}`);
+        await generateSVG({ svgFile: filePath, outDir });
+    });
+    // ---- Handle modified SVG files ----
+    watcher.on("change", async (filePath) => {
+        if (path.extname(filePath) !== ".svg")
+            return;
+        console.log("Detected change in file:", filePath);
+        if (isLocked(filePath)) {
+            console.log(`⚠️ Skipped locked file: ${path.basename(filePath)}`);
+            return;
+        }
+        console.log(`✏️ SVG updated: ${path.basename(filePath)}`);
+        await generateSVG({ svgFile: filePath, outDir });
+    });
+    // ---- Handle deleted SVG files ----
+    watcher.on("unlink", async (filePath) => {
+        if (path.extname(filePath) !== ".svg")
+            return;
+        const componentName = path.basename(filePath, ".svg");
+        const outFile = path.join(outDir, `${componentName}.tsx`);
+        if (fs.existsSync(outFile)) {
+            await fs.remove(outFile);
+            console.log(`🗑️ Removed component: ${componentName}.tsx`);
+        }
+    });
+    return watcher;
+}

package/docs/ADR-SVG-INTRGRATION-METHODS-001.adr.md

@@ -0,0 +1,157 @@
+**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 |
+| :---- |
+

package/docs/TDR-SVG-INTRGRATION-METHODS-001.tdr.md

@@ -0,0 +1,115 @@
+# Technical Design Report: SVG Integration Methods in React (TDR)
+
+# Version: 0.0.1
+
+#  Date: 10/13/25
+
+# Owner: engineer Ehsan jafari
+
+# Attendees: Navid Rezadoost , Faeze Mohadespor , Amir Bazgir , Ehsan Jafari 
+
+# Link : https://docs.google.com/document/d/1b04_V01xOvLiSMzuPdaRynANlnt2wYdJ_vjs9MAqtn4/edit?tab=t.0
+
+## 1\. Introduction
+
+This document compares five common methods for integrating and managing SVG icons in React projects. The goal is to provide a detailed guide for choosing the appropriate method considering **performance, maintainability, flexibility, and bundle size**.
+
+---
+
+## 2\. Methods
+
+### Method 1: Loading SVGs from the Public Folder (Runtime Fetch)
+
+SVG files are stored in public/assets/icons/svg/ and fetched at runtime.
+
+| function SvgIcon({ name, ...props }) {  const \[svg, setSvg\] \= React.useState(null);  React.useEffect(() \=\> {    fetch(\`/assets/icons/svg/${name}.svg\`)      .then(res \=\> res.text())      .then(setSvg);  }, \[name\]);  return svg ? (    \<span {...props} dangerouslySetInnerHTML={{ \_\_html: svg }} /\>  ) : null;} |
+| :---- |
+
+**Pros:** \- ✅ Small bundle size \- ✅ Easy icon replacement without rebuild \- ✅ Suitable for dynamic icon sets
+
+**Cons:** \- ⚠️ Network request at runtime (slower) \- ⚠️ Cannot directly apply props to SVG \- ⚠️ Requires async logic (useEffect \+ useState)
+
+**Performance:** CPU low | RAM low | Build Time fast
+
+---
+
+### Method 2: Using SVGR
+
+SVG files are converted to React components with props.
+
+| import { ReactComponent as StarIcon } from './icons/star.svg';export const Example \= () \=\> \<StarIcon width={24} height={24} fill="gold" /\>; |
+| :---- |
+
+**Pros:** \- ✅ Direct prop manipulation \- ✅ Easy bundler integration \- ✅ Automatic SVG optimization
+
+**Cons:** \- ⚠️ All SVGs included in bundle → increases size \- ⚠️ Rebuild can overwrite manual changes \- ⚠️ Slightly longer build time
+
+**Performance:** CPU moderate | RAM higher during build | Build Time slightly slower
+
+---
+
+### Method 3: Custom svg-to-react Script
+
+Automatically converts all SVG files to React components with new and all modes.
+
+| yarn svg-to-react:all\# oryarn svg-to-react:new |
+| :---- |
+
+Script:
+
+| import fs from "fs";import path from "path";import { fileURLToPath } from "url";const \_\_filename \= fileURLToPath(import.meta.url);const \_\_dirname \= path.dirname(\_\_filename);const inputDir \= path.join(\_\_dirname, "../public/assets/icons/svg");const outputDir \= path.join(\_\_dirname, "../public/assets/icons/svgComponent");if (\!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });// Get argument from command line// 'new' \=\> only new files// 'all' \=\> rebuild all files (except MANUAL\_EDIT)const mode \= process.argv\[2\] || "all";const files \= fs.readdirSync(inputDir).filter((f) \=\> f.endsWith(".svg"));for (const file of files) { const componentName \= path.basename(file, ".svg").replace(/\[^a-zA-Z0-9\]/g, "\_") \+ "Icon"; const outputPath \= path.join(outputDir, \`${componentName}.jsx\`); // Check if file exists and MANUAL\_EDIT comment if (fs.existsSync(outputPath)) {   const existingContent \= fs.readFileSync(outputPath, "utf8");   if (existingContent.includes("// MANUAL\_EDIT")) {     console.log(\`✋ Skipped manual icon: ${componentName}\`);     continue;   }   if (mode \=== "new") {     console.log(\`⏭ Skipped existing icon (new mode): ${componentName}\`);     continue;   } } let svgContent \= fs.readFileSync(path.join(inputDir, file), "utf8"); // Clean up SVG for JSX svgContent \= svgContent   .replace(/\<\\?xml.\*?\\?\>/g, "")   .replace(/\<\!DOCTYPE.\*?\>/g, "")   .replace(/\\s+xmlns(:xlink)?="\[^"\]\*"/g, "")   .replace(/\\s+xlink:\[^=\]+="\[^"\]\*"/g, "")   .replace(/\<(path|rect|circle|ellipse|line|polyline|polygon)(\[^\>\]\*?)(?\<\!\\/)\>/g, "\<$1$2 /\>")   .replace(/\\s+style="\[^"\]\*"/g, "")   .replace(/\\s+fill="\[^"\]\*"/g, "")   .replace(/\<path(\[^\>\]\*)\\/\>/g, \`\<path$1 fill="currentColor" /\>\`); svgContent \= svgContent.replace(   /\<svg(\[^\>\]\*)\>/,   \`\<svg$1 {...props} xmlns="http://www.w3.org/2000/svg"\>\` ); const component \= \`import React from "react";// MANUAL\_EDIT: remove this comment if you manually edit this iconexport const ${componentName} \= (props) \=\> ( ${svgContent.trim()});\`; fs.writeFileSync(outputPath, component, "utf8"); console.log(\`✅ Created/Updated: ${componentName}\`);}console.log(\`🎉 SVG processing done\! Mode: ${mode}\`); |
+| :---- |
+
+**Pros:** \- ✅ Full control over generation \- ✅ MANUAL\_EDIT protects custom edits \- ✅ Consistent components with unified props \- ✅ No runtime fetching
+
+**Cons:** \- ⚠️ Requires script maintenance \- ⚠️ Initial generation for large sets can take time \- ⚠️ Must rerun when new SVGs are added
+
+**Performance:** CPU low at runtime | RAM minimal | Build Time fast
+
+---
+
+### Method 4: Synchronous XMLHttpRequest Inline Loader
+
+Loads SVGs from the public folder synchronously and allows inline manipulation.
+
+| import React from "react";export const SvgIcon \= ({ src, width, height, fill, keepOriginalColor \= false, className }) \=\> {  let svgContent \= "";  try {    const xhr \= new XMLHttpRequest();    xhr.open("GET", src, false);    xhr.send(null);    if (xhr.status \=== 200) {      svgContent \= xhr.responseText;      if (width) svgContent \= svgContent.replace(/width="\[^"\]\*"/, \`width="${width}"\`);      if (height) svgContent \= svgContent.replace(/height="\[^"\]\*"/, \`height="${height}"\`);      if (fill && \!keepOriginalColor) {        svgContent \= svgContent          .replace(/fill="\[^"\]\*"/g, \`fill="${fill}"\`)          .replace(/\<path(?\!\[^\>\]\*fill)/g, \`\<path fill="${fill}"\`);      }    }  } catch (e) {    console.error("SvgIcon load error:", e);  }  if (\!svgContent) return null;  return \<span className={className} dangerouslySetInnerHTML={{ \_\_html: svgContent }} /\>;}; |
+| :---- |
+
+**Pros:** ✔️ Simple | ✔️ Inline control | ✔️ Suitable for low-frequency rendering **Cons:** ⚠️ Blocks main thread | ⚠️ Not for large-scale | ⚠️ SSR issues
+
+---
+
+### Method 5: Using react-svg Library
+
+Dynamically loads and injects SVGs into the DOM with full control.
+
+| import { ReactSVG } from 'react-svg';export const ExampleIcon \= () \=\> (  \<ReactSVG    src="/assets/icons/truck.svg"    beforeInjection={(svg) \=\> { svg.classList.add('svg-class-name'); svg.setAttribute('style', 'width: 200px'); }}    afterInjection={(svg) \=\> { console.log(svg); }}    className="wrapper-class-name"    loading={() \=\> \<span\>Loading...\</span\>}    fallback={() \=\> \<span\>Error\!\</span\>}    wrapper="span"    evalScripts="always"  /\>); |
+| :---- |
+
+**Performance & Features:** \- Network: fetch per icon (cached if enabled) \- Bundle Size: smaller than SVGR \- CPU: light but includes DOM parsing \- RAM: minimal
+
+---
+
+## 3\. Final Comparison Table
+
+| Feature | Public Fetch | SVGR | Custom Script | XHR Sync | react-svg |
+| :---- | :---- | :---- | :---- | :---- | :---- |
+|  |  |  |  |  |  |
+| Bundle Size | ✅ Small | ⚠️ Medium | ✅ Small | ✅ Small | ✅ Small |
+|  |  |  |  |  |  |
+| Runtime Performance | ⚠️ Slower | ✅ Fast | ✅ Fast | ⚠️ Moderate | ✅ Fast |
+| Build Time | ✅ Fast | ⚠️ Moderate | ✅ Fast | ✅ Fast | ✅ Fast |
+| Customization | ❌ Limited | ✅ Full | ✅ Full | ✅ Full | ✅ Full |
+| Manual Control | ❌ No | ⚠️ Partial | ✅ Full | ✅ Full | ✅ Full |
+| Dynamic Updates | ✅ Easy | ❌ Needs rebuild | ⚠️ Needs rerun | ❌ Static | ✅ Dynamic |
+| Setup Complexity | ✅ Simple | ✅ Simple | ⚠️ Requires Script | ✅ Simple | ✅ Simple |
+
+## ---
+
+## 4\. Conclusion
+
+* For **high-performance and fully controllable projects** → **Custom svg-to-react script**
+
+* For **fast, dynamic loading** → **react-svg** or **Public Fetch**
+
+* For **small, simple projects** → **XHR Sync** or **Public Fetch**

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "svger-cli",
+  "version": "1.0.0",
+  "description": "CLI and runtime for converting SVGs to React components with watch support",
+  "main": "dist/cli.js",
+  "type": "module",
+  "bin": {
+    "svger-cli": "./dist/cli.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "ts-node src/cli.ts"
+  },
+  "keywords": [
+    "svg",
+    "react",
+    "cli",
+    "components"
+  ],
+  "author": "faeze mohadespoor",
+  "license": "MIT",
+  "dependencies": {
+    "change-case": "^5.4.4",
+    "chokidar": "^4.0.3",
+    "commander": "^14.0.2",
+    "fs-extra": "^11.3.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^24.9.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  }
+}

package/src/builder.ts

@@ -0,0 +1,105 @@
+import fs from "fs-extra";
+import path from "path";
+import { pascalCase } from "change-case";
+import { reactTemplate } from "./templates/ComponentTemplate.js";
+import { isLocked } from "./lock.js";
+import { readConfig } from "./config.js";
+
+/**
+ * Converts all SVG files from a source directory into React components and writes them to an output directory.
+ *
+ * @param {Object} config - Configuration object.
+ * @param {string} config.src - Path to the source folder containing SVG files.
+ * @param {string} config.out - Path to the output folder where React components will be generated.
+ * @returns {Promise<void>} Resolves when all SVGs have been processed.
+ */
+export async function buildAll(config: { src: string; out: string }) {
+  const svgConfig = readConfig();
+  const srcDir = path.resolve(config.src);
+  const outDir = path.resolve(config.out);
+
+  if (!fs.existsSync(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"));
+
+  if (!files.length) {
+    console.log("⚠️  No SVG files found in", srcDir);
+    return;
+  }
+
+  for (const file of files) {
+    const svgPath = path.join(srcDir, file);
+
+    if (isLocked(svgPath)) {
+      console.log(`⚠️ Skipped locked file: ${file}`);
+      continue;
+    }
+
+    const svgContent = await fs.readFile(svgPath, "utf-8");
+    const componentName = pascalCase(file.replace(".svg", ""));
+    const componentCode = reactTemplate({
+      componentName,
+      svgContent,
+      defaultWidth: svgConfig.defaultWidth,
+      defaultHeight: svgConfig.defaultHeight,
+      defaultFill: svgConfig.defaultFill,
+    });
+
+    const outFile = path.join(outDir, `${componentName}.tsx`);
+    await fs.writeFile(outFile, componentCode, "utf-8");
+    console.log(`✅ Generated: ${componentName}.tsx`);
+  }
+
+  console.log("🎉 All SVGs have been converted successfully!");
+}
+
+/**
+ * Generates a single React component from an SVG file.
+ *
+ * @param {Object} params - Parameters object.
+ * @param {string} params.svgFile - Path to the SVG file to be converted.
+ * @param {string} params.outDir - Path to the output folder for the generated component.
+ * @returns {Promise<void>} Resolves when the SVG has been converted.
+ */
+export async function generateSVG({
+  svgFile,
+  outDir,
+}: {
+  svgFile: string;
+  outDir: string;
+}) {
+  const svgConfig = readConfig();
+  const filePath = path.resolve(svgFile);
+
+  if (isLocked(filePath)) {
+    console.log(`⚠️ Skipped locked file: ${path.basename(svgFile)}`);
+    return;
+  }
+
+  if (!fs.existsSync(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 componentCode = reactTemplate({
+    componentName,
+    svgContent,
+    defaultWidth: svgConfig.defaultWidth,
+    defaultHeight: svgConfig.defaultHeight,
+    defaultFill: svgConfig.defaultFill,
+  });
+
+  const outputFolder = path.resolve(outDir);
+  await fs.ensureDir(outputFolder);
+
+  const outFile = path.join(outputFolder, `${componentName}.tsx`);
+  await fs.writeFile(outFile, componentCode, "utf-8");
+
+  console.log(`✅ Generated: ${componentName}.tsx`);
+}

package/src/clean.ts

@@ -0,0 +1,21 @@
+import fs from "fs-extra";
+import path from "path";
+
+/**
+ * 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.
+ *
+ * @param {string} outDir - Path to the output directory to be cleaned.
+ * @returns {Promise<void>} Resolves when the directory has been emptied.
+ */
+export async function clean(outDir: string) {
+  const targetDir = path.resolve(outDir);
+
+  if (!fs.existsSync(targetDir)) {
+    console.log(`⚠️ Directory not found: ${targetDir}`);
+    return;
+  }
+
+  await fs.emptyDir(targetDir);
+  console.log(`🧹 Cleaned all generated SVG components in: ${targetDir}`);
+}

package/src/cli.ts

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { buildAll, generateSVG } from "./builder.js";
+import { lockFiles, unlockFiles } from "./lock.js";
+import { initConfig, setConfig, showConfig } from "./config.js";
+import { watchSVGs } from "./watch.js";
+import { clean } from "./clean.js";
+
+const program = new Command();
+
+/**
+ * svger-cli CLI
+ * Custom SVG to React component converter.
+ */
+program
+  .name("svger-cli")
+  .description("Custom SVG to React component converter")
+  .version("1.0.0");
+
+// -------- Build Command --------
+/**
+ * Build all SVGs from a source folder to an output folder.
+ *
+ * @param {string} src - Source folder containing SVG files.
+ * @param {string} out - Output folder for generated React components.
+ */
+program
+  .command("build <src> <out>")
+  .description("Build all SVGs from source to output")
+  .action(async (src: string, out: string) => {
+    console.log("🛠️  Building SVGs...");
+    console.log("Source:", src);
+    console.log("Output:", out);
+    await buildAll({ src, out });
+  });
+
+// -------- Watch Command --------
+/**
+ * Watch a source folder and rebuild SVGs automatically on changes.
+ *
+ * @param {string} src - Source folder to watch.
+ * @param {string} out - Output folder for generated components.
+ */
+program
+  .command("watch <src> <out>")
+  .description("Watch source folder and rebuild SVGs automatically")
+  .action((src: string, out: string) => {
+    console.log("🚀 Starting watch mode...");
+    watchSVGs({ src, out });
+  });
+
+// -------- Generate Single SVG --------
+/**
+ * Generate a React component from a single SVG file.
+ *
+ * @param {string} svgFile - Path to the SVG file.
+ * @param {string} out - Output folder for the generated component.
+ */
+program
+  .command("generate <svgFile> <out>")
+  .description("Convert a single SVG file into a React component")
+  .action(async (svgFile: string, out: string) => {
+    await generateSVG({ svgFile, outDir: out });
+  });
+
+// -------- Lock / Unlock --------
+/**
+ * Lock one or more SVG files to prevent accidental overwrites.
+ *
+ * @param {string[]} files - Paths to SVG files to lock.
+ */
+program
+  .command("lock <files...>")
+  .description("Lock one or more SVG files")
+  .action((files: string[]) => lockFiles(files));
+
+/**
+ * Unlock one or more SVG files to allow modifications.
+ *
+ * @param {string[]} files - Paths to SVG files to unlock.
+ */
+program
+  .command("unlock <files...>")
+  .description("Unlock one or more SVG files")
+  .action((files: string[]) => unlockFiles(files));
+
+// -------- Config --------
+/**
+ * Manage svger-cli configuration.
+ *
+ * Options:
+ * --init: Create default .svgconfig.json
+ * --set key=value: Set a configuration value
+ * --show: Show current configuration
+ *
+ * @param {Object} opts - CLI options
+ */
+program
+  .command("config")
+  .description("Manage svger-cli configuration")
+  .option("--init", "Create default .svgconfig.json")
+  .option("--set <keyValue>", "Set config key=value")
+  .option("--show", "Show current config")
+  .action((opts) => {
+    if (opts.init) return initConfig();
+    if (opts.set) {
+      const [key, value] = opts.set.split("=");
+      if (!key || value === undefined) {
+        console.error("❌ Invalid format. Use key=value");
+        process.exit(1);
+      }
+      const parsedValue = !isNaN(Number(value)) ? Number(value) : value;
+      return setConfig(key, parsedValue);
+    }
+    if (opts.show) return showConfig();
+    console.log("❌ No option provided. Use --init, --set, or --show");
+  });
+
+// -------- Clean Command --------
+/**
+ * Remove all generated SVG React components from an output folder.
+ *
+ * @param {string} out - Output folder to clean.
+ */
+program
+  .command("clean <out>")
+  .description("Remove all generated SVG React components from output folder")
+  .action(async (out: string) => {
+    await clean(out);
+  });
+
+program.parse();