SVGGenio CLI

A powerful CLI tool and npm packages for converting SVG files to React components with TypeScript support. Includes both server-side and client-side libraries.

Features

• 🎯 Single SVG Conversion: Convert individual SVG files to React components
• 📁 Batch Processing: Process entire folders of SVG files at once
• 🔧 TypeScript Support: Generate TypeScript components with proper type definitions
• 📦 Barrel Exports: Automatically generate index files for easy imports
• 🎨 React Optimized: Transform SVG attributes for React compatibility (e.g., class → className)
• 🌐 Client-Side Support: Browser-safe library for React/Next.js applications
• 📁 Multiple Input Types: Support for string, Buffer, File, and Blob inputs
• 🖱️ Drag & Drop Ready: Built-in helpers for file input and drag-and-drop events

Packages

@svgenio/cli - Command Line Interface

The CLI tool for batch processing SVG files from the command line.

@svgenio/core - Server-Side Library

Core conversion library for Node.js environments with file system access.

@svgenio/client - Client-Side Library

Browser-safe library for React/Next.js applications without Node.js dependencies.

Installation

CLI Tool

npm install -g @svgenio/cli

Server-Side Package (Node.js)

npm install @svgenio/core

Client-Side Package (Browser/React)

npm install @svgenio/client

CLI Usage

Convert a single SVG file

svgenio convert path/to/icon.svg

Options:

• -o, --output <path>: Specify output file path
• -t, --typescript: Generate TypeScript component (default: true)
• -n, --name <name>: Custom component name

Examples:

# Basic conversion
svgenio convert icon.svg
# Custom output path and name
svgenio convert icon.svg -o src/components/MyIcon.tsx -n MyIcon
# Generate JavaScript component
svgenio convert icon.svg --typescript false

Batch process multiple SVG files

svgenio batch path/to/svg/folder

Options:

• -o, --output <folder>: Output folder (default: "./output")
• -t, --typescript: Generate TypeScript components (default: true)
• -b, --barrel: Generate barrel file (index.ts) (default: false)

Examples:

# Basic batch conversion
svgenio batch icons/
# Custom output folder with barrel file
svgenio batch icons/ -o src/components/icons --barrel
# Generate JavaScript components
svgenio batch icons/ --typescript false

Server-Side Package Usage (@svgenio/core)

Basic Usage

import{svgenio}from'@svgenio/core';// Convert a single SVG fileconstresult=svgenio.convert('path/to/icon.svg',{typescript: true,componentName: 'MyIcon'});console.log(result.componentName);// 'MyIcon'console.log(result.code);// Generated React component code

Batch Processing

import{svgenio}from'@svgenio/core';// Process multiple SVG filessvgenio.batch('path/to/svg/folder',{typescript: true,outDir: './output',barrelFile: true});

Client-Side Package Usage (@svgenio/client)

Basic String Conversion

import{convert}from'@svgenio/client';constsvgContent=`<svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`;constresult=convert(svgContent,{componentName: 'MyIcon'});console.log(result.code);// Generated React component code

File Input Handling

import{handleFileInput}from'@svgenio/client';// Handle file input change eventconstfileInput=document.getElementById('file-input')asHTMLInputElement;fileInput.addEventListener('change',async(event)=>{consttarget=event.targetasHTMLInputElement;if(target.files){try{constresults=awaithandleFileInput(target.files,{typescript: true});results.forEach(result=>{console.log(`Generated component: ${result.componentName}`);console.log(result.code);});}catch(error){console.error('Conversion failed:',error);}}});

Drag and Drop Support

import{handleDropEvent}from'@svgenio/client';// Handle drag and drop eventsconstdropZone=document.getElementById('drop-zone');dropZone.addEventListener('drop',async(e)=>{e.preventDefault();try{constresults=awaithandleDropEvent(e,{typescript: true});results.forEach(result=>{console.log(`Generated component: ${result.componentName}`);console.log(result.code);});}catch(error){console.error('Drop conversion failed:',error);}});

Multiple Input Types

import{convertAsync,convertToCodeAsync}from'@svgenio/client';// From File object (file input)constfile=fileInput.files?.[0];if(file){constresult=awaitconvertAsync(file,{componentName: 'FileIcon'});console.log(result.code);}// From Buffer (Node.js environment)constbuffer=Buffer.from('<svg>...</svg>');constcode=awaitconvertToCodeAsync(buffer,'BufferIcon',true);// From Blobconstblob=newBlob(['<svg>...</svg>'],{type: 'image/svg+xml'});constresult=awaitconvertAsync(blob,{componentName: 'BlobIcon'});

React Component Example

importReact,{useState,useRef}from'react';import{convertAsync,handleFileInput,handleDropEvent}from'@svgenio/client';functionSvgConverter(){const[componentCode,setComponentCode]=useState('');const[isConverting,setIsConverting]=useState(false);constfileInputRef=useRef<HTMLInputElement>(null);consthandleFileChange=async(event: React.ChangeEvent<HTMLInputElement>)=>{if(!event.target.files)return;setIsConverting(true);try{constresults=awaithandleFileInput(event.target.files,{componentName: 'GeneratedIcon'});setComponentCode(results[0]?.code||'');}catch(error){console.error('Conversion failed:',error);}finally{setIsConverting(false);}};consthandleDrop=async(event: React.DragEvent)=>{event.preventDefault();setIsConverting(true);try{constresults=awaithandleDropEvent(event.nativeEvent,{componentName: 'DroppedIcon'});setComponentCode(results[0]?.code||'');}catch(error){console.error('Drop conversion failed:',error);}finally{setIsConverting(false);}};return(<div><inputref={fileInputRef}type="file"accept=".svg"onChange={handleFileChange}style={{display: 'none'}}/><divonDrop={handleDrop}onDragOver={(e)=>e.preventDefault()}style={{border: '2px dashed #ccc',padding: '20px',textAlign: 'center',cursor: 'pointer'}}onClick={()=>fileInputRef.current?.click()}>{isConverting ? 'Converting...' : 'Drop SVG files here or click to select'}</div>{componentCode&&(<prestyle={{marginTop: '20px',padding: '10px',background: '#f5f5f5'}}>{componentCode}</pre>)}</div>);}

API Reference

Server-Side (@svgenio/core)

convert(filePath: string, options?: ConvertOptions)

Converts a single SVG file to a React component.

Parameters:

• filePath: Path to the SVG file
• options: Conversion options
  • typescript?: boolean: Generate TypeScript component (default: true)
  • componentName?: string: Custom component name

Returns:

• componentName: The generated component name
• code: The generated React component code

batch(folderPath: string, options?: BatchOptions)

Processes multiple SVG files in a folder.

Parameters:

• folderPath: Path to the folder containing SVG files
• options: Batch processing options
  • typescript?: boolean: Generate TypeScript components (default: true)
  • outDir?: string: Output directory (default: same as input folder)
  • barrelFile?: boolean: Generate barrel file (default: false)

Client-Side (@svgenio/client)

convert(svgContent: string, options?: ConvertOptions)

Converts SVG content string to a React component.

convertAsync(input: SvgInput, options?: ConvertOptions)

Converts various input types (string, Buffer, File, Blob) to a React component.

handleFileInput(files: FileList | File[], options?: ConvertOptions)

Helper function to handle file input change events.

handleDropEvent(event: DragEvent, options?: ConvertOptions)

Helper function to handle drag and drop events.

convertToCode(svgContent: string, componentName?, typescript?)

Converts SVG content and returns just the component code.

convertToMarkup(svgContent: string)

Converts SVG content and returns just the transformed SVG markup.

Development

Project Structure

svgenio-cli/
├── packages/
│ ├── core/ # Core conversion library (server-side)
│ ├── client/ # Client-side library (browser-safe)
│ └── cli/ # CLI tool
├── test/ # Test SVG files
└── package.json # Root package.json (monorepo)

Building

# Build all packages
npm run build
# Build individual packagescd packages/core && npm run build
cd packages/client && npm run build
cd packages/cli && npm run build

Development Mode

# Watch mode for development
npm run dev

Package Comparison

Feature	CLI	Core	Client
File system access	✅	✅	❌
Browser compatibility	❌	❌	✅
String input	❌	❌	✅
File/Blob input	❌	❌	✅
Drag & drop support	❌	❌	✅
Batch processing	✅	✅	✅
TypeScript support	✅	✅	✅

License

MIT - see LICENSE file for details.