Skip to content

Releases: faezemohades/svger-cli

3.1.1

25 Dec 16:48

Choose a tag to compare

3.1.1 Pre-release
Pre-release

🎉 Release v3.1.1 - Complete Summary

✅ All Tasks Completed Successfully

1. Bug Fix Implementation ✅

Issue: Locked SVG files were excluded from auto-generated index.ts exports

Root Cause: Index generation only included files from current build session, excluding locked files

Solution: Modified index generation to scan output directory for ALL component files

Files Fixed (5 core files):

  • src/services/svg-service.ts - Core CLI index generation
  • src/integrations/babel.ts - Babel plugin
  • src/integrations/vite.ts - Vite plugin
  • src/integrations/webpack.ts - Webpack plugin (affects Next.js)
  • src/integrations/rollup.ts - Rollup plugin

Additional Fixes:

  • ✅ Fixed incorrect outputConfig property access
  • ✅ Removed unused viteConfig variable

2. Framework Coverage Verification ✅

All 9 frameworks covered by the fix:

  • ✅ React
  • ✅ React Native
  • ✅ Vue (Composition & Options API)
  • ✅ Angular (Module & Standalone)
  • ✅ Svelte
  • ✅ Solid
  • ✅ Preact
  • ✅ Lit
  • ✅ Vanilla JS/TS

Build Tool Coverage:

  • ✅ CLI (svger-cli build)
  • ✅ Babel Plugin
  • ✅ Vite Plugin
  • ✅ Webpack Plugin
  • ✅ Rollup Plugin
  • ✅ Next.js Plugin

3. CHANGELOG Update ✅

Updated: /CHANGELOG.md

Added comprehensive v3.1.1 section with:

  • ✅ Detailed bug description
  • ✅ Root cause analysis
  • ✅ Complete list of changed files
  • ✅ Framework and build tool coverage
  • ✅ Testing details
  • ✅ Lock mechanism behavior documentation
  • ✅ Code quality improvements

4. Version Updates ✅

Package Version: 3.1.03.1.1

  • package.json - Updated to 3.1.1
  • package-lock.json - Auto-updated during build

CLI Version: 2.0.03.0.0

  • src/cli.ts - Updated CLI version

Documentation:

  • README.md - Updated to v3.1.1 (2 occurrences)

5. Testing ✅

New Test Suite: tests/locked-files-index.test.ts

  • ✅ Test 1: Initial build includes all components
  • ✅ Test 2: Locked files remain in index after rebuild
  • ✅ Test 3: Multiple locked files handled correctly
  • ✅ Test 4: Unlocking allows regeneration

Test Results:

  • ✅ All 40+ existing tests pass (100%)
  • ✅ New locked files tests pass (4/4 - 100%)
  • ✅ Framework tests pass (11/11)
  • ✅ Config tests pass (10/10)
  • ✅ E2E tests pass (8/8)
  • ✅ Integration tests pass (7/7)
  • ✅ Zero regressions

6. Git Commit ✅

Commit Hash: 47bd2e5

Commit Message:

fix: locked SVG files now correctly included in index.ts exports

🐛 Critical Bug Fix - v3.1.1

Fixed issue where locked SVG files were excluded from auto-generated
index.ts barrel files, breaking imports and requiring manual maintenance.

[Full detailed message with all changes, coverage, and testing info]

Files Changed: 12 files

  • 11 modified
  • 1 new file (test suite)

7. Git Push ✅

Status: Successfully pushed to origin/main

  • ✅ Remote: https://github.com/faezemohades/svger-cli.git
  • ✅ Branch: main
  • ✅ Commit: bb5bc61..47bd2e5

8. NPM Publication ✅

Published: [email protected]

Verification:

npm view svger-cli version
# Output: 3.1.1 ✅

Package Details:

  • ✅ Registry: https://registry.npmjs.org/
  • ✅ Package Size: 119.4 kB
  • ✅ Unpacked Size: 484.2 kB
  • ✅ Total Files: 78
  • ✅ Tag: latest
  • ✅ Access: public

NPM Link: https://www.npmjs.com/package/svger-cli


📊 Impact Summary

Before Fix ❌

  • Locked files excluded from index.ts
  • Manual export maintenance required
  • Broken imports for locked components
  • Frustrating developer experience

After Fix ✅

  • Locked files automatically included in index.ts
  • No manual maintenance needed
  • All components properly exported
  • Lock mechanism works as documented

🎯 Key Improvements

  1. Zero Breaking Changes - Fully backward compatible
  2. No Migration Required - Works immediately upon update
  3. Global Coverage - All frameworks and build tools fixed
  4. Production Ready - Comprehensive testing
  5. Well Documented - CHANGELOG, tests, and commit messages

📝 GitHub Issue Response

A detailed response has been prepared in GITHUB_ISSUE_RESPONSE.md that includes:

  • Root cause analysis
  • Complete fix details
  • Framework & tool compatibility matrix
  • Testing results
  • Usage examples
  • Migration guide (none needed)

🚀 Next Steps

  1. Monitor NPM - Check package is available
  2. Respond to GitHub Issue - Use prepared response
  3. 🔄 Wait for User Feedback - Monitor for any issues
  4. 📢 Optional: Announce on social media/community

✨ Success Metrics

  • Code Quality: ✅ All linting passes
  • Tests: ✅ 100% pass rate (44/44 tests)
  • Build: ✅ TypeScript compiles without errors
  • Deployment: ✅ Git push successful
  • Publication: ✅ NPM package live
  • Documentation: ✅ CHANGELOG and README updated
  • Versioning: ✅ All versions updated correctly

🎉 Release Complete!

Version: 3.1.1
Date: December 25, 2025
Status: ✅ SUCCESSFULLY RELEASED

The locked files index generation bug has been completely fixed and deployed to production!

3.1.0

04 Dec 13:10

Choose a tag to compare

SVGer CLI v3.1.0 Release: Power Up Your SVG Workflow

November 26, 2025 – We're thrilled to announce the stable release of SVGer CLI v3.1.0, a major leap forward in transforming your SVG assets into high-performance, framework-ready components. Building on the foundation of v2, this version introduces seamless build-tool integrations, enhanced developer experience, and rock-solid reliability— all while maintaining our core promise of zero dependencies, blazing speed, and zero bloat.

SVGer CLI is the ultimate zero-dependency command-line powerhouse that instantly converts SVG files into optimized, production-ready components for React, Vue, Angular, Svelte, Solid, Lit, Preact, React Native, and even vanilla JS/TS. Say goodbye to tedious manual SVG tweaks: SVGer handles JSX/TSX transformations, TypeScript interfaces, responsive styling, and more, so you can ship icons and graphics faster than ever.

🚀 What's New in v3.1.0

This release focuses on deeper ecosystem integration and workflow polish, making SVGer an indispensable part of your build pipeline:

  • Official Build-Tool Plugins: Plug-and-play support for Webpack (with HMR), Vite (virtual modules), Rollup, Babel, Next.js (full SSR/App/Pages Router compatibility), and Jest (mocking & transformers). Drop in a plugin, and SVGs auto-transform during builds—no more custom loaders or hacks.

  • Smarter Auto-Exports: Generate tree-shakable index.ts files with a unified export pattern (e.g., export { default as ArrowLeft } from './ArrowLeft';). Import icons effortlessly across your app without bundle waste.

  • File Protection & Safety: New lock and unlock commands safeguard your generated components from accidental overwrites during CI/CD or team builds. Plus, a clean command for effortless resets.

  • Performance & Reliability Boosts: Up to 85% faster parallel processing, 62% lower memory usage, and 99% caching hit rates. We've also added a performance command to benchmark your setup and optimize on the fly.

  • Expanded CLI Arsenal: Enhanced init with interactive framework selection, debounced watch mode for smoother dev loops, and 28+ configurable options in .svgerconfig.json (e.g., theme support for light/dark modes, hover animations, and custom props like forwardRef + memo).

  • Comprehensive Testing Suite: Built-in Jest transformers and mocks ensure your icon components pass tests with flying colors—faster TTI (Time to Interactive) guaranteed.

Compared to v2.0.6 (which added React Native magic), v3 doubles down on production readiness, shaving off even more setup time and bundle size (we're talking ~2MB total vs. 18MB+ for alternatives like SVGR).

🎯 Quick Start

Already on v2? Upgrade with:

npm install -g svger-cli@latest

Initialize a fresh config:

svger-cli init --framework react --typescript --interactive

Build your icons:

svger-cli build ./src/assets/svg ./src/components/icons

Watch for changes:

svger-cli watch --src ./icons --out ./components --debounce 500

For full docs, head to docs.svger-cli.com or dive into the GitHub repo.

Why SVGer? (A Quick Refresher)

  • Zero Dependencies: Pure Node.js magic—no node_modules explosion, fewer vulns, lightning installs.
  • Universal Framework Love: From React Native's react-native-svg to Vue's Composition API.
  • Advanced Goodies: Responsive sizing, theme-aware styling, animation utils, and an extensible plugin system for custom SVG sorcery.
  • Proven Speed: 90% smaller bundles, batch processing for 1000+ SVGs in seconds.

🤝 Get Involved

v3.1.0 is just the beginning— we're eyeing esbuild/esnext support and AI-powered SVG optimization next. Found a bug? Feature request? Hit us up on GitHub Issues or email [email protected].

– The SVGer Team

2.0.6

08 Nov 13:57

Choose a tag to compare

2.0.6 Pre-release
Pre-release

Release Title: v1.0.0: The Community-Evolved SVGer CLI

Release Description

This release marks the official revival and enhancement of the original svger-cli project. While this tool originated from the foundational work by faezemohades, this fork has been systematically upgraded, fixed, and modernized to meet contemporary development standards. It is now the recommended, actively maintained version for all users.

Why This Fork? A Side-by-Side Comparison

The table below outlines the key differentiators that make this version the superior choice for production use.

Feature | This Fork (navidrezadoost/svger-cli) | Original Fork (faezemohades/svger-cli) -- | -- | -- Maintenance Status | Actively Maintained & Supported | Archived / No longer maintained Core Dependencies | Up-to-date & Secure: All dependencies (e.g., commander, prettier) upgraded to their latest, most secure, and feature-rich versions. | Critically Outdated: Uses deprecated versions with potential security vulnerabilities and missing features. Code Quality & Stability | Engineered for Reliability: Critical bugs have been identified and fixed. The codebase has been refactored for better stability and error handling. | Unstable Core: Contains known bugs that break the conversion process in common edge cases. Modern Toolchain | Seamless Integration: Compatible with the latest versions of Node.js, React, TypeScript, and Prettier. | Integration Issues: Often fails or produces warnings when used in modern development environments. Developer Experience (DX) | Polished & Predictable: Improved console output, clearer error messages, and a more robust CLI experience. | Basic Implementation: Functional but lacks the polish expected from a modern CLI tool.

Key Improvements in This Release

  1. Dependency Modernization: All dependencies have been upgraded, resolving numerous npm audit vulnerabilities and ensuring compatibility with current ecosystems.
  2. Bug Fixes: Patched critical issues related to SVG attribute parsing and file handling that caused the original tool to fail on valid SVG inputs.
  3. Enhanced Robustness: The tool now handles edge cases more gracefully, providing meaningful error messages instead of silent failures.
  4. Future-Proof Foundation: This codebase serves as a stable foundation for community-driven features.
Read more

4.0.0

02 Jan 15:05

Choose a tag to compare

Release Date: January 2, 2026
Package: [email protected]
npm: https://www.npmjs.com/package/svger-cli
Documentation: https://faezemohades.github.io/svger-cli/


🎉 Overview

SVGER-CLI v4.0.0 is a major release bringing significant performance improvements, an extensible plugin system, comprehensive build tool integrations, and an interactive testing experience. This release maintains 100% backward compatibility with v3.x while adding powerful new features.


✨ Major Features

🔌 Extensible Plugin System

A powerful new plugin architecture that allows you to extend and customize SVG processing:

# Use built-in plugins
svger-cli --src ./svgs --out ./components --plugin optimize --plugin color-theme

# List all available plugins
svger-cli --list-plugins

Built-in Plugins:

  • optimize - Advanced SVG optimization and cleaning
  • color-theme - Apply color themes and palette transformations
  • minify - Aggressive size reduction for production

Programmatic API:

import { svgProcessor } from 'svger-cli';

const result = await svgProcessor.processWithPlugins(svgContent, {
  plugins: ['optimize', 'minify'],
  config: { /* plugin-specific options */ }
});

⚡ 50% Performance Improvement

  • Object lookup maps replacing if/switch chains for O(1) performance
  • Parallel processing for batch operations
  • Optimized algorithms throughout the codebase
  • Tree-shaking optimizations for smaller bundle sizes

Benchmarks:

Processing 100 SVG files:
v3.x: ~850ms
v4.0: ~425ms (50% faster!)

🧪 Interactive Testing Experience

Three Ways to Test:

1. 🌐 Online Demo (No Installation)

Try SVGER-CLI instantly in your browser:

2. 💻 CLI Test Utility

New test-svger command with 500+ included sample SVGs:

# Quick test with default settings
npm install -g [email protected]
test-svger

# Advanced testing
test-svger --framework=vue --typescript --count=20
test-svger --help

Sample SVG Categories:

  • 200+ brand logos (Google, Facebook, GitHub, etc.)
  • 100+ UI icons (home, user, settings, etc.)
  • 100+ tech logos (React, Vue, Docker, AWS, etc.)
  • 50+ shapes and symbols

3. 📦 500+ Sample SVGs Included

All sample SVGs are now included in the npm package for offline testing and development.

🔧 Official Build Tool Integrations

First-class support for all major build tools with zero configuration:

Webpack Plugin

const { SvgerWebpackPlugin } = require('svger-cli/webpack');

module.exports = {
  plugins: [
    new SvgerWebpackPlugin({
      input: './src/icons',
      output: './src/components/icons',
      framework: 'react'
    })
  ]
};

Vite Plugin

import { svgerVitePlugin } from 'svger-cli/vite';

export default {
  plugins: [
    svgerVitePlugin({
      input: './src/icons',
      framework: 'react'
    })
  ]
};

Rollup Plugin

import { svgerRollupPlugin } from 'svger-cli/rollup';

export default {
  plugins: [
    svgerRollupPlugin({
      input: './src/icons',
      framework: 'vue'
    })
  ]
};

Babel Plugin

module.exports = {
  plugins: [
    ['svger-cli/babel', {
      input: './icons',
      framework: 'react'
    }]
  ]
};

Next.js Integration

const { withSvger } = require('svger-cli/nextjs');

module.exports = withSvger({
  svger: {
    input: './public/icons',
    framework: 'react'
  }
});

Jest Preset

module.exports = {
  preset: 'svger-cli/jest'
};

📖 Interactive Documentation Site

A complete static documentation site with live features:

  • URL: https://faezemohades.github.io/svger-cli/
  • ✅ Comprehensive guides for all frameworks
  • ✅ Interactive live benchmarking
  • ✅ Code examples with copy buttons
  • ✅ Performance comparisons
  • ✅ Complete API reference
  • ✅ Dark mode support

🆕 New Features

Framework Support

  • ✅ React
  • ✅ React Native
  • ✅ Vue 3
  • ✅ Angular
  • ✅ Svelte
  • ✅ Solid
  • ✅ Lit
  • ✅ Preact
  • ✅ Vanilla JS/TS

Enhanced Error Handling

  • Improved error messages with context
  • Better stack traces for debugging
  • Validation warnings for invalid configurations
  • Helpful suggestions for common issues

Visual Regression Testing

  • Built-in visual diff support
  • Snapshot testing capabilities
  • Integration with CI/CD pipelines

Advanced SVG Optimization

  • Command optimization
  • Path simplification
  • Path deduplication
  • Transform collapsing
  • Shape conversion
  • Style optimization
  • Unused definition removal

📊 Package Details

Package Size:

  • Compressed: 662.8 KB
  • Unpacked: 2.1 MB
  • Total Files: 772

What's Included:

  • ✅ Complete TypeScript definitions
  • ✅ 500+ sample SVG files
  • ✅ Interactive test utility
  • ✅ Build tool integrations
  • ✅ Plugin system
  • ✅ Comprehensive documentation

🔄 Migration from v3.x

Good News: v4.0.0 is 100% backward compatible with v3.x!

Automatic Config Migration

Your existing .svgerconfig.json files will work without changes. The system will automatically migrate configurations if needed.

No Breaking Changes

All v3.x APIs and CLI commands continue to work exactly as before.

Upgrade Steps

# Global installation
npm install -g [email protected]

# Project installation
npm install --save-dev [email protected]

# Verify installation
svger-cli --version  # Should output: 4.0.0

That's it! Your existing code and configurations will work immediately.


📚 Documentation

New Documentation

Updated Documentation

  • ✅ README with testing sections
  • ✅ API reference with plugin examples
  • ✅ Performance benchmarks
  • ✅ Troubleshooting guide

🧪 Testing & Quality

Test Coverage

  • 114 passing tests
  • 82% code coverage
  • E2E testing suite
  • Integration tests for all frameworks
  • Visual regression testing
  • CI/CD pipelines

Quality Improvements

  • ESLint configuration updated
  • Prettier formatting enforced
  • TypeScript strict mode enabled
  • Comprehensive type definitions

🎯 Command-Line Enhancements

New Commands

# List available plugins
svger-cli --list-plugins

# Use multiple plugins
svger-cli --src ./icons --out ./components --plugins optimize,minify

# Interactive testing utility
test-svger --framework=vue --typescript

# Show help for test utility
test-svger --help

Enhanced Existing Commands

# Better progress indicators
svger-cli --src ./icons --out ./components --verbose

# Improved error messages
svger-cli --src ./invalid --out ./components  # Clear error with suggestions

# Watch mode improvements
svger-cli --src ./icons --out ./components --watch  # Faster file watching

🚀 Performance Benchmarks

Real-World Performance

Processing 100 SVG files:

v3.x:  ~850ms
v4.0:  ~425ms  (50% faster)

With plugins:
optimize:      ~520ms  (22% overhead)
optimize+minify: ~610ms  (43% overhead)

Memory Usage:

v3.x:  ~120MB
v4.0:  ~85MB   (29% reduction)

Bundle Size (tree-shaken):

v3.x:  ~45KB
v4.0:  ~32KB   (29% smaller)

🔧 API Changes

New APIs

Plugin API

import { registerPlugin } from 'svger-cli';

registerPlugin({
  name: 'my-plugin',
  version: '1.0.0',
  process: async (svg: string, options: any) => {
    // Your transformation logic
    return transformedSvg;
  }
});

Build Tool Integrations

// Webpack
import { SvgerWebpackPlugin } from 'svger-cli/webpack';

// Vite
import { svgerVitePlugin } from 'svger-cli/vite';

// Rollup
import { svgerRollupPlugin } from 'svger-cli/rollup';

// Babel
import { svgerBabelPlugin } from 'svger-cli/babel';

Enhanced Existing APIs

All existing APIs remain unchanged and continue to work as expected.


🐛 Bug Fixes

  • ✅ Fixed: Locked SVG files now correctly included in index.ts exports
  • ✅ Fixed: Watch mode file system issues on Windows
  • ✅ Fixed: TypeScript type inference for complex component props
  • ✅ Fixed: Memory leaks in long-running processes
  • ✅ Fixed: Edge cases in SVG path parsing
  • ✅ Fixed: Race conditions in parallel processing

🔐 Security

  • ✅ Zero dependencies (security audit: 0 vulnerabilities)
  • ✅ Input validation for all CLI arguments
  • ✅ Safe file system operations
  • ✅ XSS protection in generated components
  • ✅ Path traversal protection

🎨 Developer Experience

Better Error Messages

# Before (v3.x):
Error: Invalid config

# After (v4.0):
❌ Configuration Error in .svgerconfig.json

   Invalid framework: "reactjs"
   
   Did you mean one of these?
   - react
   - react-native
   
   📖 See: https://github.com/faezemohades/svger-cli#frameworks

Improved CLI Output

╔════════════════════════════════════════════════════════════════╗
║                    SVGER-CLI Test Utility                      ║
║                  Quick Test with Sample SVGs                   ║
╚═══════...
Read more