Transform SVGs into Framework Components

A powerful, zero-dependency command-line tool that instantly converts SVG files into clean, optimized components for any modern JavaScript framework. First-class support for React, Vue, Angular, Svelte, and 5+ more frameworks.

Why SVGer CLI?

Installation

npm install -g svger-cli

npm install --save-dev svger-cli

Quick Start

svger-cli convert ./icons/logo.svg --framework react --output ./components

svger-cli batch ./icons --framework vue --output ./components/icons

import { Logo } from './components';

function App() {
  return <Logo className="w-8 h-8" />;
}

Build Tool Integrations

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

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

module.exports = {
  plugins: [new SvgerWebpackPlugin()],
};

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

export default {
  plugins: [svgerVitePlugin()],
};

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

module.exports = withSvger({});

Feature Comparison

Multi-Framework Support

SVGer CLI supports 9+ modern frameworks with consistent API and output quality.

Real-World Performance

Tested on 606 production SVG icons (1.01MB) - real benchmarks, not synthetic tests.

Live Performance Testing

Test SVG processing performance directly in your browser. Upload SVG files or use sample data to see real-time conversion metrics.

Configuration

Create a .svgerconfig.json file in your project root for persistent settings.

{
  "framework": "react",
  "typescript": true,
  "outputDir": "./components/icons",
  "exportIndex": true,
  "svgo": true,
  "prettier": true,
  "naming": "pascal",
  "extension": "tsx"
}

Configuration Options

CLI Reference

Complete command-line interface reference for all available options.

Basic Commands

# Convert SVGs to components
svger-cli --src ./icons --out ./components

# With framework and TypeScript
svger-cli --src ./icons --out ./components --framework react --typescript

# Watch mode (auto-rebuild on file changes)
svger-cli --src ./icons --out ./components --watch

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

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

# Show version
svger-cli --version

# Show help
svger-cli --help

Available Options

Plugin System

Extend SVGER-CLI with powerful plugins for optimization, theming, and custom transformations.

Built-in Plugins

svger-cli --src ./icons --out ./components --plugin optimize

svger-cli --src ./icons --out ./components --plugin color-theme

svger-cli --src ./icons --out ./components --plugin minify

Using Multiple Plugins

Plugins are executed in the order specified, allowing you to chain transformations:

# Apply optimization, then theming, then minification
svger-cli --src ./icons --out ./components --plugins optimize,color-theme,minify

Programmatic Plugin API

Use plugins programmatically in your Node.js scripts:

import { svgProcessor } from 'svger-cli';

const result = await svgProcessor.processWithPlugins(svgContent, {
  plugins: ['optimize', 'minify'],
  config: {
    optimize: {
      precision: 2,
      removeUnusedDefs: true
    },
    minify: {
      aggressive: true
    }
  }
});

Testing

Try SVGER-CLI before installing, or test with 500+ included sample SVGs.

🌐 Method 1: Online Demo (No Installation)

Test instantly in your browser with our interactive demo:

• 10 pre-loaded sample SVGs
• Drag & drop file upload
• Switch between frameworks
• Real-time performance metrics
• Export results as JSON

💻 Method 2: CLI Test Utility

Use the test-svger command with 500+ included sample SVGs:

# Install globally
npm install -g svger-cli

# Quick test with default settings
test-svger

# Test with specific framework
test-svger --framework=vue --typescript

# Test with limited files
test-svger --count=20

# Show help
test-svger --help

Sample SVG Categories

The package includes 500+ professional SVG files:

Production Deployment

Best practices for deploying SVGER-CLI in production environments.

CI/CD Integration

Automate SVG processing in your CI/CD pipeline:

# GitHub Actions example
name: Build Icons
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install -g svger-cli
      - run: svger-cli --src ./assets/icons --out ./src/components/icons --plugins optimize,minify
      - run: npm run build

Docker Integration

Use SVGER-CLI in Docker containers:

FROM node:18-alpine
WORKDIR /app
RUN npm install -g svger-cli
COPY assets/icons ./icons
RUN svger-cli --src ./icons --out ./components --plugins optimize,minify
COPY . .
RUN npm install && npm run build

Troubleshooting & FAQ

svger-cli --src ./icons --out ./components --plugin optimize

# Linux/Mac
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

npm install --save-dev @types/react @types/react-dom

{
  "svgo": true,
  "svgoConfig": {
    "plugins": [
      "removeViewBox",
      "removeDimensions"
    ]
  }
}