svger-cli 2.0.8 → 3.0.0

package/CHANGELOG.md

@@ -5,6 +5,151 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.0] - 2025-11-26
+
+### 🎉 Major Release - Official Build Tool Integrations
+
+This major release introduces **official build tool integrations**, making SVGER-CLI the most
+comprehensive SVG-to-component solution with first-class support for all major build tools and
+frameworks.
+
+### Added - Build Tool Integrations
+
+#### **Webpack Integration** (`svger-cli/webpack`)
+
+- ✅ Full webpack plugin with HMR (Hot Module Replacement) support
+- ✅ Webpack loader for inline SVG transformation
+- ✅ Watch mode with intelligent debouncing
+- ✅ Asset emission directly to webpack compilation
+- ✅ TypeScript support with full type definitions
+- ✅ Multi-framework support (React, Vue, Angular, etc.)
+
+#### **Vite Plugin** (`svger-cli/vite`)
+
+- ✅ Native Vite plugin with lightning-fast HMR
+- ✅ Virtual module support for dynamic imports
+- ✅ Dev server integration with instant updates
+- ✅ Build optimization and tree-shaking
+- ✅ Named and default export options
+- ✅ Source map generation
+
+#### **Rollup Plugin** (`svger-cli/rollup`)
+
+- ✅ Full Rollup plugin with tree-shaking support
+- ✅ Load and transform hooks for SVG files
+- ✅ Source map generation for debugging
+- ✅ Bundle optimization for production
+- ✅ Library-friendly named exports
+- ✅ Zero runtime overhead
+
+#### **Babel Plugin** (`svger-cli/babel`)
+
+- ✅ Complete Babel plugin with visitor pattern
+- ✅ Automatic import transformation (SVG → Component)
+- ✅ Dynamic import support (`import('./icon.svg')`)
+- ✅ Pre-build SVG processing
+- ✅ Works with Create React App, Gatsby, Vue CLI
+- ✅ Framework-agnostic with full TypeScript support
+
+#### **Next.js Integration** (`svger-cli/nextjs`)
+
+- ✅ `withSvger` wrapper for seamless Next.js integration
+- ✅ Server-Side Rendering (SSR) support
+- ✅ App Router and Pages Router compatibility
+- ✅ Webpack configuration extension
+- ✅ Hot Module Replacement for development
+- ✅ TypeScript support out of the box
+
+#### **Jest Preset** (`svger-cli/jest`)
+
+- ✅ Complete Jest transformer for SVG files
+- ✅ Jest preset configuration
+- ✅ Custom transformer factory
+- ✅ Mock mode for faster test execution
+- ✅ CommonJS and ES module support
+- ✅ Multi-framework compatibility
+
+### Added - Package Infrastructure
+
+- **11 New Export Paths**: Added dedicated exports for all integrations
+  - `./webpack`, `./webpack-loader`
+  - `./vite`
+  - `./rollup`
+  - `./babel`, `./babel-plugin`
+  - `./nextjs`
+  - `./jest`, `./jest-transformer`, `./jest-preset`
+
+- **Comprehensive Documentation**:
+  - New `docs/INTEGRATIONS.md` - Complete integration guide (500+ lines)
+  - New `docs/INTEGRATION-IMPLEMENTATION-SUMMARY.md` - Implementation overview
+  - 6 example configuration files in `examples/` directory
+  - Updated API documentation with integration examples
+
+- **Enhanced Testing**:
+  - New integration verification test suite
+  - 100% integration test coverage (7/7 passing)
+  - Automated testing for all build tool integrations
+  - New `test:integrations` npm script
+
+- **Updated Keywords**: Added 18+ new npm keywords:
+  - Build tools: `webpack`, `webpack-plugin`, `webpack-loader`
+  - Bundlers: `vite`, `vite-plugin`, `rollup`, `rollup-plugin`
+  - Transpilers: `babel`, `babel-plugin`, `babel-transform`
+  - Frameworks: `nextjs`, `next-js`
+  - Testing: `jest`, `jest-preset`, `jest-transformer`
+  - General: `build-tools`, `bundler`, `hmr`, `hot-module-replacement`
+
+### Changed
+
+- **Package Description**: Updated to highlight official build tool integrations
+- **Main Index**: Reorganized exports to include all integration plugins
+- **Type Definitions**: Enhanced TypeScript types for all integrations
+- **Documentation Structure**: Improved organization with dedicated integration docs
+
+### Features Comparison
+
+| Feature            | Webpack | Vite | Rollup | Babel | Next.js | Jest |
+| ------------------ | ------- | ---- | ------ | ----- | ------- | ---- |
+| HMR Support        | ✅      | ✅   | ❌     | ❌    | ✅      | N/A  |
+| Source Maps        | ✅      | ✅   | ✅     | ❌    | ✅      | ❌   |
+| SSR Support        | ❌      | ✅   | ❌     | ❌    | ✅      | N/A  |
+| Virtual Modules    | ❌      | ✅   | ❌     | ❌    | ❌      | N/A  |
+| Watch Mode         | ✅      | ✅   | ✅     | ✅    | ✅      | N/A  |
+| Import Transform   | ✅      | ✅   | ✅     | ✅    | ✅      | ✅   |
+| Dynamic Imports    | ✅      | ✅   | ✅     | ✅    | ✅      | ❌   |
+| Framework Agnostic | ✅      | ✅   | ✅     | ✅    | ❌      | ✅   |
+
+### Migration Guide from 2.x to 3.0
+
+**No Breaking Changes for CLI Users**: If you're using the CLI (`svger-cli`), everything works
+exactly as before.
+
+**New Features for Build Tool Users**:
+
+```bash
+# Install
+npm install svger-cli@3.0.0 --save-dev
+
+# Use with your build tool
+# See docs/INTEGRATIONS.md for detailed examples
+```
+
+### Performance
+
+- Zero runtime dependencies
+- 85% faster than SVGR for batch processing
+- Tree-shakeable exports - only bundle what you use
+- Optimized build tool integrations with minimal overhead
+
+### Documentation
+
+- Complete integration guide in `docs/INTEGRATIONS.md`
+- 6 working example configurations in `examples/` directory
+- Updated README with integration quick-start
+- Enhanced API documentation
+
+---
+
 ## [2.0.7] - 2025-11-20
 
 ### Fixed
@@ -81,6 +226,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [Unreleased] - 2025-11-12
 
 ### Added
+
 - Comprehensive performance analysis documentation with detailed technical breakdown
 - Professional competitive analysis with fair tool comparisons
 - Transparency section welcoming community feedback
@@ -89,6 +235,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Research sources and feedback channels for documentation accuracy
 
 ### Changed
+
 - Corrected SVGR description to acknowledge webpack ecosystem support (not React-only)
 - Clarified 85% performance improvement claim with proper context and scope
 - Enhanced "Advanced Props" definition vs standard SVG props
@@ -97,6 +244,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Updated documentation tone to be educational rather than competitive
 
 ### Fixed
+
 - Inaccurate claims about competitor tools' capabilities
 - Misleading performance comparisons without proper context
 - Unprofessional competitive analysis language
@@ -105,6 +253,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [2.0.5] - 2025-11-11
 
 ### Fixed
+
 - **CRITICAL**: PascalCase component naming preservation
   - Fixed issue where PascalCase filenames were incorrectly converted to lowercase
   - ArrowBendDownLeft.svg → ArrowBendDownLeft.tsx (was: Arrowbenddownleft.tsx)
@@ -114,12 +263,14 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - All 28 framework tests continue passing
 
 ### Changed
+
 - Updated package version to 2.0.5
 - Enhanced toPascalCase utility function for better case detection
 
 ## [2.0.4] - 2025-11-11
 
 ### Added
+
 - Complete 28-property configuration schema
 - React/Vue/Angular specific configuration options
 - Enhanced responsive design support with breakpoint configurations
@@ -129,6 +280,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Enhanced TypeScript support with improved type definitions
 
 ### Changed
+
 - Streamlined ESLint configuration (.eslintrc.js → .eslintrc.cjs)
 - Enhanced component templates with new configuration support
 - Improved configuration management across multiple files
@@ -136,12 +288,14 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Enhanced comparison tables and installation instructions
 
 ### Fixed
+
 - TypeScript duplicate export errors in index generation
 - Simplified index.ts generation to prevent conflicts
 - Improved configuration validation and error messages
 - Enhanced toPascalCase to preserve existing PascalCase names
 
 ### Removed
+
 - Redundant test documentation files (COMPLETE-TEST-REPORT.md, TEST-RESULTS.md, TESTING-SUMMARY.md)
 - Deprecated ESLint configuration format
 - Outdated package dependencies reducing bundle size
@@ -175,6 +329,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Native module file path resolution error
 
 ### Removed
+
 - Unnecessary test folders and configuration files
 - Redundant package configurations
 
@@ -197,6 +352,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - TypeScript-first approach with native type generation
 
 ### Removed
+
 - Legacy dependencies reducing package size by 89%
 - Single-framework limitation
 - Dependency-heavy build processes
@@ -204,17 +360,20 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [2.0.0] - 2024-10-30
 
 ### Added
+
 - Complete multi-framework support for all 8 UI frameworks
 - Enhanced CLI commands with comprehensive options
 - Open source project files (CODE_OF_CONDUCT, LICENSE, CONTRIBUTING)
 - Professional project structure and documentation
 
 ### Changed
+
 - Major version release with breaking changes from 1.x
 - Enhanced README with multi-framework guide and benchmarks
 - Consolidated project structure and test organization
 
 ### Removed
+
 - node_modules folder from repository
 - Legacy 1.x architecture and dependencies
 

package/README.md

@@ -1,13 +1,14 @@
-# SVGER-CLI v2.0.7 - Enterprise SVG Processing Framework
+# SVGER-CLI v3.0.0 - Enterprise SVG Processing Framework
 
 [![npm version](https://badge.fury.io/js/svger-cli.svg)](https://badge.fury.io/js/svger-cli)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 [![Zero Dependencies](https://img.shields.io/badge/Dependencies-Zero-green.svg)](https://www.npmjs.com/package/svger-cli)
 
-> **The most advanced, zero-dependency SVG to component converter, now with first-class support for
-> 9+ UI frameworks including React Native. Enjoy enterprise-grade performance, auto-generated
-> exports, and a unified workflow for your entire design system.**
+> **The most advanced, zero-dependency SVG to component converter with official build tool
+> integrations. First-class support for Webpack, Vite, Rollup, Babel, Next.js, and Jest. Supporting
+> 9+ UI frameworks including React Native with enterprise-grade performance and auto-generated
+> exports.**
 
 ---
 
@@ -16,7 +17,14 @@
 ### 🚀 **Getting Started**
 
 - [📦 Installation](#-installation)
-- [🚀 Quick Start: Your First Conversion](#-quick-start-your-first-conversion)
+- [� Build Tool Integrations](#-build-tool-integrations) **← NEW in v3.0**
+  - [Webpack](#webpack-integration)
+  - [Vite](#vite-integration)
+  - [Rollup](#rollup-integration)
+  - [Babel](#babel-integration)
+  - [Next.js](#nextjs-integration)
+  - [Jest](#jest-integration)
+- [�🚀 Quick Start: Your First Conversion](#-quick-start-your-first-conversion)
 - [💡 Why SVGER-CLI?](#-why-svger-cli-the-zero-dependency-advantage)
 
 ### 📚 **Core Documentation**
@@ -74,6 +82,32 @@
 | ------------------------------------- | --------------------------------------------------------------- |
 | 🎯 Get started immediately            | [Quick Start](#-quick-start-your-first-conversion)              |
 | 📦 Install the package                | [Installation](#-installation)                                  |
+| 🔧 Use with Webpack/Vite/Rollup       | [Build Tool Integrations](#-build-tool-integrations) **NEW**    |
+| ⚙️ Configure Webpack                  | [Webpack Integration](#webpack-integration)                     |
+| ⚡ Set up Vite                        | [Vite Integration](#vite-integration)                           |
+| 📦 Use with Rollup                    | [Rollup Integration](#rollup-integration)                       |
+| 🔄 Integrate Babel                    | [Babel Integration](#babel-integration)                         |
+| ▲ Use with Next.js                    | [Next.js Integration](#nextjs-integration)                      |
+| 🧪 Set up Jest                        | [Jest Integration](#jest-integration)                           |
+| 🤔 Understand why SVGER-CLI is better | [Why SVGER-CLI?](#-why-svger-cli-the-zero-dependency-advantage) |
+| ⚡ Compare features with competitors  | [Feature Comparison](#-feature-comparison-matrix)               |
+| 🚀 Convert SVGs to React components   | [React Guide](#react)                                           |
+| 📱 Use with React Native              | [React Native Guide](#react-native)                             |
+| 💚 Use with Vue                       | [Vue Guide](#vue-3)                                             |
+| 🅰️ Use with Angular                   | [Angular Guide](#angular)                                       |
+| 🌪️ Use with Svelte                    | [Svelte Guide](#svelte)                                         |
+| 📖 Learn all CLI commands             | [CLI Reference](#-comprehensive-cli-reference)                  |
+| 💻 Use the programmatic API           | [API Reference](#-programmatic-api)                             |
+| 🎨 Configure styling & theming        | [Styling Guide](#-advanced-styling--theming)                    |
+| ⚡ Optimize performance               | [Performance Guide](#-performance-optimization)                 |
+| 🚀 Deploy to production               | [Deployment Guide](#-production-deployment)                     |
+| 🐳 Use with Docker                    | [Docker Setup](#docker-integration)                             |
+| 🧪 Test my components                 | [Testing Guide](#-testing--quality-assurance)                   |
+| 🔧 Configure everything               | [Configuration Reference](#-configuration-reference)            |
+| 🔌 Create custom plugins              | [Plugin Development](#-plugin-development)                      |
+| 🐛 Fix issues                         | [Troubleshooting](#-troubleshooting--faq)                       |
+| 📚 Migrate from another tool          | [Migration Guide](#-migration-guide)                            |
+| 📦 Install the package                | [Installation](#-installation)                                  |
 | 🤔 Understand why SVGER-CLI is better | [Why SVGER-CLI?](#-why-svger-cli-the-zero-dependency-advantage) |
 | ⚡ Compare features with competitors  | [Feature Comparison](#-feature-comparison-matrix)               |
 | 🚀 Convert SVGs to React components   | [React Guide](#react)                                           |
@@ -99,6 +133,30 @@
 
 ## 🌟 **Key Features Overview**
 
+### **🔧 Official Build Tool Integrations (NEW in v3.0)**
+
+First-class support for all major build tools with zero configuration:
+
+- ✅ **Webpack Plugin** - HMR, watch mode, and loader support
+- ✅ **Vite Plugin** - Lightning-fast HMR and virtual modules
+- ✅ **Rollup Plugin** - Tree-shaking and source maps
+- ✅ **Babel Plugin** - Universal transpilation and import transformation
+- ✅ **Next.js Integration** - SSR support for App and Pages Router
+- ✅ **Jest Preset** - SVG transformers and mocking for tests
+
+```javascript
+// One-line setup for any build tool
+const { SvgerWebpackPlugin } = require('svger-cli/webpack');
+import { svgerVitePlugin } from 'svger-cli/vite';
+import { svgerRollupPlugin } from 'svger-cli/rollup';
+const { svgerBabelPlugin } = require('svger-cli/babel');
+const { withSvger } = require('svger-cli/nextjs');
+```
+
+**[See full integration guide →](#-build-tool-integrations)**
+
+---
+
 ### **✨ Auto-Generated index.ts Exports (Enhanced)**
 
 Automatically generates clean index.ts files with a **single, consistent export pattern** that
@@ -106,11 +164,9 @@ avoids naming conflicts:
 
 ```typescript
 // Auto-generated in your output directory
-// Re-exports with renamed defaults for tree-shaking
+// Named exports for tree-shaking
 export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowRight } from './ArrowRight';
-export { default as HomeIcon } from './HomeIcon';
-export { default as UserProfile } from './UserProfile';
 
 /**
  * SVG Components Index
@@ -127,15 +183,15 @@ export { default as UserProfile } from './UserProfile';
 **Import flexibility:**
 
 ```typescript
-// Named imports (recommended - tree-shaking friendly)
-import { ArrowLeft, ArrowRight, HomeIcon } from './components';
+// Named imports (tree-shaking friendly)
+import { ArrowLeft, ArrowRight } from './components';
 
-// Namespace import (for accessing all icons)
+// Namespace import
 import * as Icons from './components';
-const ArrowIcon = Icons.ArrowLeft;
 
-// Individual file imports (when you need just one component)
-import ArrowLeft from './components/ArrowLeft';
+// Default import
+import Icons from './components';
+const { ArrowLeft } = Icons;
 ```
 
 ### **🎯 Enhanced Props & Styling**
@@ -228,7 +284,284 @@ npm install --save-dev svger-cli
 
 ---
 
-## 🚀 **Quick Start: Your First Conversion**
+## � **Build Tool Integrations**
+
+**NEW in v3.0**: SVGER-CLI now provides official integrations for all major build tools, enabling
+seamless SVG-to-component conversion directly in your build pipeline.
+
+### Quick Integration Overview
+
+| Build Tool  | Package Import      | Use Case                | Key Features                     |
+| ----------- | ------------------- | ----------------------- | -------------------------------- |
+| **Webpack** | `svger-cli/webpack` | Modern web apps         | HMR, Watch mode, Loader support  |
+| **Vite**    | `svger-cli/vite`    | Lightning-fast dev      | HMR, Virtual modules, Dev server |
+| **Rollup**  | `svger-cli/rollup`  | Libraries & apps        | Tree-shaking, Source maps        |
+| **Babel**   | `svger-cli/babel`   | Universal transpilation | Import transform, CRA, Gatsby    |
+| **Next.js** | `svger-cli/nextjs`  | React SSR apps          | SSR support, App Router          |
+| **Jest**    | `svger-cli/jest`    | Testing                 | SVG mocking, Transformers        |
+
+### Webpack Integration
+
+Perfect for modern webpack-based applications with full HMR support.
+
+**Install:**
+
+```bash
+npm install svger-cli --save-dev
+```
+
+**webpack.config.js:**
+
+```javascript
+const { SvgerWebpackPlugin } = require('svger-cli/webpack');
+
+module.exports = {
+  plugins: [
+    new SvgerWebpackPlugin({
+      source: './src/icons', // SVG source directory
+      output: './src/components/icons', // Output directory
+      framework: 'react', // Target framework
+      typescript: true, // Generate TypeScript files
+      hmr: true, // Enable Hot Module Replacement
+      generateIndex: true, // Generate index.ts with exports
+    }),
+  ],
+
+  // Optional: Use the loader for inline SVG imports
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: ['svger-cli/webpack-loader'],
+      },
+    ],
+  },
+};
+```
+
+**Usage in your app:**
+
+```tsx
+import { HomeIcon, UserIcon } from './components/icons';
+
+function App() {
+  return <HomeIcon width={24} height={24} />;
+}
+```
+
+---
+
+### Vite Integration
+
+Lightning-fast development with HMR and virtual module support.
+
+**vite.config.js:**
+
+```javascript
+import { svgerVitePlugin } from 'svger-cli/vite';
+
+export default {
+  plugins: [
+    svgerVitePlugin({
+      source: './src/icons',
+      output: './src/components/icons',
+      framework: 'react',
+      typescript: true,
+      hmr: true, // Hot Module Replacement
+      virtualModules: true, // Enable virtual module imports
+    }),
+  ],
+};
+```
+
+**Features:**
+
+- ✅ Instant HMR - changes reflect immediately
+- ✅ Virtual modules - `import Icon from 'virtual:svger/icon-name'`
+- ✅ Dev server integration
+- ✅ Optimized production builds
+
+---
+
+### Rollup Integration
+
+Ideal for library development and tree-shakeable bundles.
+
+**rollup.config.js:**
+
+```javascript
+import { svgerRollupPlugin } from 'svger-cli/rollup';
+
+export default {
+  plugins: [
+    svgerRollupPlugin({
+      source: './src/icons',
+      output: './dist/icons',
+      framework: 'react',
+      typescript: true,
+      sourcemap: true, // Generate source maps
+      exportType: 'named', // 'named' or 'default'
+    }),
+  ],
+};
+```
+
+**Perfect for:**
+
+- Component libraries
+- Tree-shakeable exports
+- Multi-framework support
+- Production optimization
+
+---
+
+### Babel Integration
+
+Universal transpilation with automatic import transformation.
+
+**babel.config.js:**
+
+```javascript
+const { svgerBabelPlugin } = require('svger-cli/babel');
+
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: [
+    [
+      svgerBabelPlugin,
+      {
+        source: './src/icons',
+        output: './src/components/icons',
+        framework: 'react',
+        typescript: true,
+        transformImports: true, // Auto-transform SVG imports
+        processOnInit: true, // Process all SVGs on plugin init
+        generateIndex: true, // Generate barrel exports
+      },
+    ],
+  ],
+};
+```
+
+**Import transformation:**
+
+```javascript
+// Before (write this in your code)
+import HomeIcon from './assets/home.svg';
+
+// After (automatically transformed)
+import HomeIcon from './components/icons/HomeIcon';
+
+// Use it
+<HomeIcon width={24} height={24} />;
+```
+
+**Works with:**
+
+- Create React App
+- Gatsby
+- Vue CLI
+- Any Babel-based setup
+
+---
+
+### Next.js Integration
+
+Seamless integration with Next.js App Router and Pages Router.
+
+**next.config.js:**
+
+```javascript
+const { withSvger } = require('svger-cli/nextjs');
+
+module.exports = withSvger({
+  svger: {
+    source: './public/icons',
+    output: './components/icons',
+    framework: 'react',
+    typescript: true,
+    ssr: true, // Server-Side Rendering support
+    hmr: true, // Hot Module Replacement
+  },
+  // ...other Next.js config
+  reactStrictMode: true,
+});
+```
+
+**Features:**
+
+- ✅ SSR (Server-Side Rendering) support
+- ✅ App Router compatible
+- ✅ Pages Router compatible
+- ✅ Automatic webpack configuration
+- ✅ TypeScript support
+
+---
+
+### Jest Integration
+
+Transform SVGs in your tests or mock them for faster execution.
+
+**jest.config.js:**
+
+**Option 1: Use the preset (recommended)**
+
+```javascript
+module.exports = {
+  preset: 'svger-cli/jest',
+  testEnvironment: 'jsdom',
+};
+```
+
+**Option 2: Manual configuration**
+
+```javascript
+module.exports = {
+  transform: {
+    '\\.svg$': [
+      'svger-cli/jest-transformer',
+      {
+        framework: 'react',
+        typescript: true,
+        mock: false, // Set true for mock mode
+      },
+    ],
+  },
+  testEnvironment: 'jsdom',
+};
+```
+
+**Mock mode** (faster tests):
+
+```javascript
+transform: {
+  '\\.svg$': ['svger-cli/jest-transformer', {
+    mock: true,  // Returns simple mock component
+  }],
+}
+```
+
+---
+
+### Complete Integration Documentation
+
+For detailed documentation, configuration options, and advanced examples, see:
+
+📖 **[Complete Integration Guide](./docs/INTEGRATIONS.md)** - 500+ lines of comprehensive
+documentation
+
+**What's included:**
+
+- Detailed setup instructions for each build tool
+- All configuration options explained
+- Framework-specific examples (React, Vue, Angular, etc.)
+- Troubleshooting guides
+- Performance optimization tips
+- Feature comparison matrix
+
+---
+
+## �🚀 **Quick Start: Your First Conversion**
 
 1.  **Place your SVGs** in a directory (e.g., `./my-svgs`).
 2.  **Run the build command**: