v4.0.3 — Enterprise SVG Processing Framework

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.

Zero Dependencies ~2MB Bundle 52% Faster

NO SVGO NEEDED

Built-in SVG Optimizer

57.77% size reduction with our advanced 5-phase optimization pipeline. 50% faster than SVGO and completely built-in—no external dependencies required!

824

Original (bytes)

348

Optimized (bytes)

57.77% Smaller

Automatic optimization—enabled by default!

Why Our Built-in Optimizer?

⚡

50% Faster

Native performance without external tool overhead

🎯

Zero Config

Works out of the box—no SVGO installation needed

🔧

3 Optimization Levels

BALANCED (43%), AGGRESSIVE (49%), MAXIMUM (58%)

🚀

Advanced Algorithms

5-phase pipeline with path optimization & transform collapsing

Learn More About the Optimizer

Why SVGer CLI?

Zero Dependencies

No node_modules bloat. Drastically smaller footprint with no third-party vulnerabilities.

52% Faster

Native performance with parallel processing and smart caching. Real-world tested on 606 production SVG icons.

9+ Frameworks

React, Vue, Angular, Svelte, Solid, Lit, Preact, React Native & Vanilla JS.

Auto Exports

Automatically generates clean index.ts files with tree-shaking support.

📊 Feature Comparison Matrix

See how SVGer CLI compares to other popular tools. Zero dependencies, 9+ frameworks, 50% faster.

Feature	SVGER-CLI v4.0.3	SVGR (React)	vite-svg-loader	svelte-svg	SVGO
Dependencies	✅ Zero	❌ 15+ deps	❌ 9+ deps	❌ 7+ deps	❌ 8+ deps
Auto-Generated Exports	✅ Full Support	❌ Manual	❌ Manual	❌ Manual	❌ N/A
Framework Support	✅ 9+ Frameworks	❌ React only	❌ Vue only	❌ Svelte only	❌ N/A
React Native Support	✅ Full Native	❌ None	❌ None	❌ None	❌ N/A
Advanced Props	✅ Full Support	⚠️ Basic	⚠️ Basic	⚠️ Basic	❌ N/A
File Protection	✅ Lock System	❌ None	❌ None	❌ None	❌ None
Performance	✅ 50-85% Faster	Standard	Slow	Standard	Fast
Bundle Size	✅ ~2MB	~18.7MB	~14.2MB	~11.8MB	~12.3MB
Enterprise Features	✅ Full Suite	⚠️ Limited	❌ None	❌ None	❌ None
TypeScript	✅ Native	⚠️ Plugin	⚠️ Limited	⚠️ Limited	❌ None
Batch Processing	✅ Optimized	⚠️ Basic	❌ None	❌ None	❌ None
Plugin System	✅ Extensible	⚠️ Limited	❌ None	❌ None	❌ None
Auto Migration	✅ v3.x → v4.0.3	❌ Manual	❌ N/A	❌ N/A	❌ N/A
Configuration Schema	✅ 28 Options	❌ 8 Options	❌ 4 Options	❌ 3 Options	❌ N/A
Responsive Design	✅ Built-in	⚠️ Manual	❌ None	❌ None	❌ None
Theme System	✅ Auto Dark/Light	⚠️ Manual	❌ None	❌ None	❌ None
Error Handling	✅ Advanced Strategies	⚠️ Basic	⚠️ Basic	⚠️ Basic	⚠️ Basic

Why SVGer CLI Wins

⚡

90% Smaller Bundle

Just ~2MB vs 18.7MB (SVGR). Faster installs, lower bandwidth, better CI/CD performance.

🚀

50-85% Faster

Real-world tested on 606 production SVGs. Native performance without dependency overhead.

🌐

9+ Frameworks

One tool for React, Vue, Angular, Svelte, Solid, Lit, Preact, React Native & Vanilla JS.

🔒

Zero Dependencies

No supply chain vulnerabilities. No transitive dependencies. Maximum security.

📖 Read Complete Performance Deep Dive

🧪 Live Benchmark Testing

Test SVGER-CLI performance in your browser with real SVG files. Zero installation required - compare processing speed, memory usage, and throughput across frameworks.

Benchmark Configuration

Tool Selection

Note: Other tools are simulated for comparison

Target Framework

Number of SVG Files

💡

About This Benchmark

This interactive benchmark uses 50 real SVG files from the assets/svges/ directory. SVGER-CLI processes files using actual conversion logic, while competitor tools are simulated based on documented performance characteristics. Results reflect processing speed, memory efficiency, and throughput in a browser environment.

📂 View Sample SVGs → 📊 Real-World Benchmarks →

Installation

Install globally for CLI access:

bash

npm install -g svger-cli

Or add to your project as a dev dependency:

bash

npm install --save-dev svger-cli

Quick Start

1. Convert a single SVG file

bash

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

2. Batch convert an entire directory

bash

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

3. Use the generated component

tsx

import { Logo } from './components';

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

Multi-Framework Support

SVGer CLI supports 9+ modern frameworks with consistent API and output quality. Each framework gets optimized, type-safe components tailored to its ecosystem.

React

Angular

Svelte

Solid

Lit

Preact

React Native

Vanilla JS

⚛️ React

Generate TypeScript React components with full prop support, ref forwarding, and optimized SVG rendering.

Generate React Component

bash

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

Generated Component (Star.tsx)

tsx

import * as React from 'react';
import type { SVGProps } from 'react';

const Star = React.forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
  (props, ref) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      ref={ref}
      {...props}
    >
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
  )
);

Star.displayName = 'Star';

export default Star;

Usage in Your App

tsx

import Star from './components/Star';

function App() {
  return (
    <>
      <Star className="w-6 h-6 text-yellow-500" />
      <Star style={{ width: 24, color: 'gold' }} />
      <Star onClick={() => console.log('Clicked!')} />
    </>
  );
}

✨ Features: Ref forwarding • Full TypeScript types • className support • All SVG props • Tree-shakeable • React 18 ready

💚 Vue

Generate Vue 3 SFC components with Composition API, TypeScript support, and proper props inheritance.

Generate Vue Component

bash

svger-cli convert ./icons/heart.svg --framework vue --output ./components

Generated Component (Heart.vue)

vue

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    v-bind="$attrs"
  >
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
  </svg>
</template>

<script setup lang="ts">
// All SVG attributes are inherited automatically
</script>

Usage in Your App

vue

<script setup>
import Heart from './components/Heart.vue';
</script>

<template>
  <div>
    <Heart class="w-6 h-6 text-red-500" />
    <Heart :style="{ width: '24px', color: 'pink' }" />
    <Heart @click="handleClick" />
  </div>
</template>

✨ Features: Composition API • TypeScript SFC • Automatic props inheritance • Event handlers • Reactivity-ready • Vue 3 optimized

🅰️ Angular

Generate Angular components with proper dependency injection, change detection, and type safety.

Generate Angular Component

bash

svger-cli convert ./icons/settings.svg --framework angular --output ./components

Generated Component (settings.component.ts)

typescript

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-settings',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
    </svg>
  `,
})
export class SettingsComponent {}

Usage in Your App

typescript

import { Component } from '@angular/core';
import { SettingsComponent } from './components/settings.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SettingsComponent],
  template: `
    <app-settings class="icon-lg text-blue-500" />
  `,
})
export class AppComponent {}

✨ Features: Standalone components • OnPush detection • TypeScript strict mode • Inline templates • Tree-shakeable • Angular 17+ ready

🧡 Svelte

Generate native Svelte components with full reactivity, prop binding, and zero runtime overhead.

Generate Svelte Component

bash

svger-cli convert ./icons/moon.svg --framework svelte --output ./components

Generated Component (Moon.svelte)

svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  
  type Props = HTMLAttributes<SVGSVGElement>;
  
  let { ...props }: Props = $props();
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="currentColor"
  {...props}
>
  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>

Usage in Your App

svelte

<script>
  import Moon from './components/Moon.svelte';
</script>

<Moon class="w-6 h-6 text-indigo-400" />
<Moon style="width: 24px; color: navy;" />
<Moon onclick={() => console.log('Clicked!')} />

✨ Features: Runes API ($props) • TypeScript support • Props spreading • Zero runtime • Reactive by default • SvelteKit optimized

🔷 Solid

Generate SolidJS components with fine-grained reactivity, JSX syntax, and maximum performance.

Generate Solid Component

bash

svger-cli convert ./icons/bolt.svg --framework solid --output ./components

Generated Component (Bolt.tsx)

tsx

import type { JSX } from 'solid-js';

type BoltProps = JSX.SvgSVGAttributes<SVGSVGElement>;

export default function Bolt(props: BoltProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
    >
      <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" />
    </svg>
  );
}

Usage in Your App

tsx

import Bolt from './components/Bolt';

function App() {
  return (
    <>
      <Bolt class="w-6 h-6 text-yellow-500" />
      <Bolt style={{ width: '24px', color: 'gold' }} />
      <Bolt onClick={() => console.log('Lightning!')} />
    </>
  );
}

✨ Features: Fine-grained reactivity • JSX syntax • TypeScript types • Signal-compatible • No VDOM • Blazing fast

🔥 Lit

Generate Web Component elements with Lit's reactive properties, templates, and standards-based approach.

Generate Lit Component

bash

svger-cli convert ./icons/fire.svg --framework lit --output ./components

Generated Component (fire-icon.ts)

typescript

import { LitElement, html, svg } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('fire-icon')
export class FireIcon extends LitElement {
  render() {
    return html`
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        ${svg`<path d="M13.5 0.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5 0.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z" />`}
      </svg>
    `;
  }
}

Usage in Your App

html

<!-- Import the component -->
<script type="module" src="./components/fire-icon.js"></script>

<!-- Use anywhere -->
<fire-icon class="icon-lg" style="color: orange;"></fire-icon>
<fire-icon style="width: 24px; height: 24px;"></fire-icon>

✨ Features: Web Components standard • Shadow DOM • Reactive properties • TypeScript decorators • Framework-agnostic • Browser-native

⚡ Preact

Generate lightweight Preact components with React compatibility and minimal bundle size.

Generate Preact Component

bash

svger-cli convert ./icons/zap.svg --framework preact --output ./components

Generated Component (Zap.tsx)

tsx

import { h } from 'preact';
import type { JSX } from 'preact';

type ZapProps = JSX.SVGAttributes<SVGSVGElement>;

export default function Zap(props: ZapProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
    >
      <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" />
    </svg>
  );
}

Usage in Your App

tsx

import Zap from './components/Zap';

function App() {
  return (
    <div>
      <Zap class="w-6 h-6 text-yellow-400" />
      <Zap style={{ width: '24px', color: 'gold' }} />
      <Zap onClick={() => alert('Fast!')} />
    </div>
  );
}

✨ Features: 3KB bundle size • React compatibility • TypeScript types • JSX support • Fast rendering • Hooks support

🍦 Vanilla JS

Generate framework-free JavaScript functions that return DOM elements—no dependencies required.

Generate Vanilla Component

bash

svger-cli convert ./icons/sparkles.svg --framework vanilla --output ./components

Generated Component (sparkles.js)

javascript

export function Sparkles(props = {}) {
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('viewBox', '0 0 24 24');
  svg.setAttribute('fill', 'currentColor');
  
  // Apply custom props
  Object.entries(props).forEach(([key, value]) => {
    if (key === 'className') {
      svg.setAttribute('class', value);
    } else if (key === 'style' && typeof value === 'object') {
      Object.assign(svg.style, value);
    } else {
      svg.setAttribute(key, value);
    }
  });
  
  svg.innerHTML = `<path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />`;
  
  return svg;
}

Usage in Your App

javascript

import { Sparkles } from './components/sparkles.js';

// Create and append to DOM
const icon = Sparkles({
  className: 'icon-lg',
  style: { color: 'gold', width: '32px' },
  onclick: () => console.log('Sparkle!')
});

document.body.appendChild(icon);

✨ Features: Zero dependencies • Pure JavaScript • DOM API • Full control • No build step • Works anywhere

Build Tool Integrations

First-class support for all major build tools with zero configuration. SVGer CLI integrates seamlessly into your existing workflow.

📦 Webpack

Automatic SVG-to-component conversion during Webpack builds with hot module replacement support.

Install Plugin

bash

npm install svger-cli --save-dev

Configure webpack.config.js

javascript

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

module.exports = {
  plugins: [
    new SvgerWebpackPlugin({
      input: './src/assets/icons',
      output: './src/components/icons',
      framework: 'react',
      typescript: true,
      clean: true,
      watch: true, // Enable HMR support
    }),
  ],
};

Usage in Your Project

tsx

// Auto-generated components are available immediately
import { Logo, Menu, Close } from './components/icons';

function Header() {
  return (
    <header>
      <Logo className="h-8 w-8" />
      <Menu />
      <Close />
    </header>
  );
}

✨ Features: Hot module replacement • Watch mode • Automatic rebuilds • Dev server integration • Production optimization • Tree shaking ready

⚡ Vite

Lightning-fast SVG processing with Vite's native ESM support and instant HMR.

Install Plugin

bash

npm install svger-cli --save-dev

Configure vite.config.ts

typescript

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

export default defineConfig({
  plugins: [
    svgerVitePlugin({
      input: './src/assets/icons',
      output: './src/components/icons',
      framework: 'react',
      typescript: true,
      indexFile: true,
    }),
  ],
});

Usage with Vue 3

typescript

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { svgerVitePlugin } from 'svger-cli/vite';

export default defineConfig({
  plugins: [
    vue(),
    svgerVitePlugin({
      input: './src/assets/icons',
      output: './src/components/icons',
      framework: 'vue', // Vue 3 SFC components
      typescript: true,
    }),
  ],
});

✨ Features: Instant HMR • ESM native • Dev server integration • Production builds • Optimized chunks • Vue/React/Svelte support

🎲 Rollup

Perfect tree-shaking and bundle optimization with Rollup's powerful plugin system.

Install Plugin

bash

npm install svger-cli --save-dev

Configure rollup.config.js

javascript

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [
    svgerRollupPlugin({
      input: './src/assets/icons',
      output: './src/components/icons',
      framework: 'react',
      typescript: true,
    }),
  ],
};

Library Mode (Perfect for Icon Libraries)

javascript

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

export default {
  input: 'src/index.ts',
  output: [
    { file: 'dist/index.cjs.js', format: 'cjs' },
    { file: 'dist/index.esm.js', format: 'esm' },
  ],
  external: ['react', 'react-dom'],
  plugins: [
    svgerRollupPlugin({
      input: './icons',
      output: './src/generated',
      framework: 'react',
      typescript: true,
      indexFile: true, // Generate barrel export
    }),
  ],
};

✨ Features: Perfect tree-shaking • Multi-format output (ESM/CJS/UMD) • Library mode • Bundle optimization • Dead code elimination • External dependencies

🐠 Babel

Transform SVGs at compile time with Babel's powerful transformation pipeline.

Install Plugin

bash

npm install svger-cli --save-dev

Configure .babelrc

json

{
  "presets": ["@babel/preset-react", "@babel/preset-typescript"],
  "plugins": [
    ["svger-cli/babel", {
      "input": "./src/assets/icons",
      "output": "./src/components/icons",
      "framework": "react",
      "typescript": true
    }]
  ]
}

Configure babel.config.js (Alternative)

javascript

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript',
    '@babel/preset-react',
  ],
  plugins: [
    ['svger-cli/babel', {
      input: './src/assets/icons',
      output: './src/components/icons',
      framework: 'react',
      typescript: true,
      naming: 'pascal',
    }],
  ],
};

✨ Features: Compile-time transformation • Zero runtime overhead • Works with any framework • TypeScript support • Custom transformations • React Native compatible

▲ Next.js

Seamless integration with Next.js app and pages router with automatic optimization.

Install

bash

npm install svger-cli --save-dev

Configure next.config.js

javascript

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

module.exports = withSvger({
  // Your existing Next.js config
  reactStrictMode: true,
  swcMinify: true,
}, {
  // SVGer configuration
  input: './public/icons',
  output: './components/icons',
  framework: 'react',
  typescript: true,
});

Usage in App Router (app/page.tsx)

tsx

import { Logo, Menu } from '@/components/icons';

export default function Home() {
  return (
    <main>
      <Logo className="h-12 w-12" />
      <Menu className="h-6 w-6" />
    </main>
  );
}

Usage in Client Components

tsx

'use client';

import { useState } from 'react';
import { Sun, Moon } from '@/components/icons';

export function ThemeToggle() {
  const [dark, setDark] = useState(false);
  
  return (
    <button onClick={() => setDark(!dark)}>
      {dark ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
    </button>
  );
}

✨ Features: App Router support • Server Components ready • Client Components • Pages Router • Fast Refresh • TypeScript paths • Turbopack compatible

🃏 Jest

Test your SVG components with confidence using Jest preset and utilities.

Install Preset

bash

npm install svger-cli @testing-library/react --save-dev

Configure jest.config.js

javascript

module.exports = {
  preset: 'svger-cli/jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/components/icons$': '<rootDir>/components/icons',
  },
};

Example Test (Icon.test.tsx)

tsx

import { render, screen } from '@testing-library/react';
import { Logo } from '@/components/icons';

describe('Logo Component', () => {
  it('renders svg element', () => {
    render(<Logo data-testid="logo" />);
    const svg = screen.getByTestId('logo');
    expect(svg.tagName).toBe('svg');
  });

  it('applies className prop', () => {
    render(<Logo className="custom-class" data-testid="logo" />);
    const svg = screen.getByTestId('logo');
    expect(svg).toHaveClass('custom-class');
  });

  it('applies style prop', () => {
    render(<Logo style={{ color: 'red' }} data-testid="logo" />);
    const svg = screen.getByTestId('logo');
    expect(svg).toHaveStyle({ color: 'red' });
  });

  it('forwards ref correctly', () => {
    const ref = React.createRef<SVGSVGElement>();
    render(<Logo ref={ref} />);
    expect(ref.current).toBeInstanceOf(SVGSVGElement);
  });
});

Snapshot Testing

tsx

import { render } from '@testing-library/react';
import { Logo, Menu, Close } from '@/components/icons';

describe('Icon Snapshots', () => {
  it('matches Logo snapshot', () => {
    const { container } = render(<Logo />);
    expect(container.firstChild).toMatchSnapshot();
  });

  it('matches Menu snapshot with props', () => {
    const { container } = render(<Menu className="icon-lg" aria-label="Menu" />);
    expect(container.firstChild).toMatchSnapshot();
  });
});

✨ Features: Jest preset included • React Testing Library support • Snapshot testing • TypeScript support • Coverage reports • Component mocking

Real-World Performance

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

52%

Faster than SVGR

~2MB

90% smaller package

0.17MB

69% less memory

View detailed performance reports

Feature Comparison

Feature	SVGer CLI v4.0.3	SVGR	Others
Dependencies	✓ Zero	15+	7-9+
Framework Support	✓ 9+	React only	Single
Performance	✓ 52% Faster	Standard	Standard
Bundle Size	✓ ~2MB	~18.7MB	~11-14MB
Auto Migration	✓	✗	✗
React Native	✓	✗	✗
Auto Exports	✓	✗	✗

⚙️ Configuration Schema - All 28 Options

Create a .svgerconfig.json file in your project root for persistent settings. SVGER-CLI supports 28 comprehensive configuration options covering all aspects of SVG processing.

Complete Configuration Example

json

{
  "source": "./src/assets/svg",
  "output": "./src/components/icons",
  "framework": "react",
  "typescript": true,
  "componentType": "functional",
  "watch": false,
  "parallel": true,
  "batchSize": 10,
  "maxConcurrency": 4,
  "cache": true,
  "defaultWidth": 24,
  "defaultHeight": 24,
  "defaultFill": "currentColor",
  "defaultStroke": "none",
  "defaultStrokeWidth": 1,
  "exclude": ["logo.svg"],
  "include": ["icons/**", "illustrations/**"],
  "styleRules": {
    "fill": "inherit",
    "stroke": "none",
    "strokeWidth": "1",
    "opacity": "1"
  },
  "responsive": {
    "breakpoints": ["sm", "md", "lg", "xl"],
    "values": {
      "width": ["16px", "20px", "24px", "32px"],
      "height": ["16px", "20px", "24px", "32px"]
    }
  },
  "theme": {
    "mode": "auto",
    "variables": {
      "primary": "currentColor",
      "secondary": "#6b7280",
      "accent": "#3b82f6",
      "background": "#ffffff",
      "foreground": "#000000"
    }
  },
  "animations": ["fadeIn", "slideIn", "bounce"],
  "plugins": ["optimize", "minify"],
  "errorHandling": {
    "strategy": "continue",
    "maxRetries": 3,
    "timeout": 30000
  },
  "performance": {
    "optimization": "balanced",
    "memoryLimit": 512,
    "cacheTimeout": 3600000
  },
  "outputConfig": {
    "naming": "pascal",
    "extension": "tsx",
    "directory": "./src/components/icons"
  }
}

Configuration Options Reference

Below are all 28 configuration options organized by category:

📁 Core Options (5)

source string

Source directory containing SVG files

Default: "./src/assets/svg"

output string

Output directory for generated components

Default: "./src/components/icons"

framework string

Target framework: react, vue, angular, svelte, solid, lit, preact, vanilla, react-native

Default: "react"

typescript boolean

Generate TypeScript components with type definitions

Default: true

componentType string

Component type: functional, class, forwardRef, memo

Default: "functional"

⚡ Performance Options (5)

watch boolean

Enable file watching for automatic regeneration

Default: false

parallel boolean

Enable parallel processing for faster builds

Default: true

batchSize number

Number of files to process per batch

Default: 10

maxConcurrency number

Maximum concurrent processes (defaults to CPU cores)

Default: 4

cache boolean

Enable processing cache for faster rebuilds

Default: true

🎨 SVG Defaults (5)

defaultWidth number

Default width for SVG components

Default: 24

defaultHeight number

Default height for SVG components

Default: 24

defaultFill string

Default fill color for SVG elements

Default: "currentColor"

defaultStroke string

Default stroke color for SVG elements

Default: "none"

defaultStrokeWidth number

Default stroke width for SVG elements

Default: 1

📂 File Filtering (2)

exclude string[]

Glob patterns of files to exclude from processing

Default: []

include string[]

Glob patterns of files to include in processing

Default: ["**/*.svg"]

🚀 Advanced Features (11)

styleRules object

CSS style rules to apply to all SVG elements

Default: { fill: "inherit", stroke: "none" }

responsive object

Responsive design configuration with breakpoints and values

Default: null

theme object

Theme system with mode (light/dark/auto) and color variables

Default: { mode: "auto" }

animations string[]

Built-in animations to apply: fadeIn, slideIn, bounce, spin, pulse

Default: []

plugins string[]

Plugin names to apply: optimize, color-theme, minify

Default: []

errorHandling object

Error handling strategy, max retries, and timeout settings

Default: { strategy: "continue", maxRetries: 3 }

performance object

Performance optimization level, memory limit, cache timeout

Default: { optimization: "balanced" }

outputConfig object

Output configuration: naming convention, file extension, directory

Default: { naming: "pascal", extension: "tsx" }

react object

React-specific options: forwardRef, memo, styled-components, CSS modules

Default: { forwardRef: true, memo: false }

vue object

Vue-specific options: api (composition/options), setup syntax, scoped styles

Default: { api: "composition", setup: true }

angular object

Angular-specific options: standalone components, signals, change detection

Default: { standalone: true, signals: false }

💡

Configuration Tips

Use svger-cli init to generate a configuration file interactively
Combine configuration file with CLI flags for maximum flexibility
Enable cache and parallel for optimal performance on large projects
Use include and exclude patterns to process specific files

🖥️ CLI Reference - All Commands

Complete reference for all SVGER-CLI commands. Each command is designed to handle specific aspects of SVG processing and component generation.

svger-cli build

Core Command

Convert SVG files to framework components with advanced processing and optimization.

svger-cli build --src ./icons --out ./components --framework react --typescript

Common Options:

--src - Source directory containing SVG files
--out - Output directory for generated components
--framework - Target framework (react, vue, angular, etc.)
--typescript - Generate TypeScript components
--parallel - Enable parallel processing for faster builds
--clean - Clean output directory before building

svger-cli watch

Development

Monitor directories for SVG changes and automatically regenerate components in real-time.

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

Key Features:

Automatic file watching with configurable debounce timing
Supports all build command options
Ignores locked files and specified patterns
Verbose logging option for debugging

svger-cli init

Setup

Initialize SVGER-CLI configuration for your project with interactive prompts.

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

What it does:

Creates .svgerconfig.json file with your preferences
Interactive mode guides you through all configuration options
Sets up recommended defaults based on your framework choice
Validates configuration and ensures proper setup

svger-cli generate

Targeted

Process specific SVG files with precise control and custom naming.

svger-cli generate ./icons/heart.svg --out ./components --name HeartIcon

Use Cases:

Generate single component with custom name
Process multiple files using glob patterns
Override default component templates
Quick testing of specific SVG files

svger-cli lock / unlock

Protection

Protect critical SVG files from accidental modification during batch operations.

# Lock specific files
svger-cli lock ./icons/logo.svg ./icons/brand.svg

# Unlock files
svger-cli unlock ./icons/logo.svg

# Unlock all
svger-cli unlock --all

Benefits:

Prevents accidental overwrites of critical brand assets
Locked files are automatically skipped during builds
Supports glob patterns for batch locking
Perfect for team collaboration and CI/CD workflows

svger-cli config

Management

Manage project configuration dynamically without editing JSON files.

# Show current configuration
svger-cli config --show

# Set configuration values
svger-cli config --set framework=vue
svger-cli config --set typescript=true

# Get specific value
svger-cli config --get framework

# Validate configuration
svger-cli config --validate

Operations:

--show - Display complete configuration
--set key=value - Update specific configuration option
--get key - Retrieve specific configuration value
--reset - Reset to default configuration
--validate - Validate current configuration

svger-cli clean

Maintenance

Remove generated components, caches, and logs to clean your workspace.

# Clean output directory
svger-cli clean --out ./components

# Clean cache only
svger-cli clean --cache

# Clean everything
svger-cli clean --all

# Preview without deleting
svger-cli clean --all --dry-run

Cleanup Options:

--out - Clean specific output directory
--cache - Clear processing cache for fresh builds
--logs - Remove log files
--all - Clean everything (components, cache, logs)
--dry-run - Preview what would be deleted

svger-cli performance

Analytics

Analyze and optimize processing performance with detailed metrics and benchmarks.

# Analyze current project performance
svger-cli performance --analyze

# Run comprehensive benchmarks
svger-cli performance --benchmark

# Check memory usage
svger-cli performance --memory

# View cache statistics
svger-cli performance --cache-stats

# Apply automatic optimizations
svger-cli performance --optimize

Insights Provided:

Processing time per file and total duration
Memory usage and optimization recommendations
Cache hit/miss ratios and effectiveness
Bottleneck identification and solutions
Comparison with optimal settings

svger-cli optimize

Processing

Optimize SVG files with configurable levels before component generation.

# Optimize with maximum compression (57.77% reduction)
svger-cli optimize input.svg --level maximum

# Balanced optimization (recommended)
svger-cli optimize icons/ --level balanced

# Optimize entire directory
svger-cli optimize ./icons --out ./optimized --level balanced

Optimization Levels:

basic - Remove comments and metadata (~25% reduction)
balanced - Recommended for production (~43% reduction)
maximum - Aggressive optimization (~57% reduction)
All levels include pixel-perfect visual validation
100% test pass rate on geometric shapes

svger-cli --list-plugins

Discovery

Display all available plugins with descriptions and usage examples.

svger-cli --list-plugins

Output Includes:

Plugin name and description
Available configuration options
Usage examples and best practices
Performance impact and recommendations

💡

Command Tips

All commands support --help flag for detailed usage information
Combine multiple options for powerful workflows
Use configuration file + CLI flags for maximum flexibility
Check svger-cli --version to verify you're running v4.0.3

Plugin System

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

Built-in Plugins

optimize

Built-in

Advanced SVG optimization and cleaning. Removes unnecessary attributes, optimizes paths, and reduces file size by 30-50%.

color-theme

Built-in

Apply color themes and palette transformations. Replace colors, create theme variants, and ensure design consistency.

minify

Built-in

Aggressive size reduction for production builds. Removes whitespace, comments, and applies maximum compression.

Using Multiple Plugins

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

bash

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

Troubleshooting & FAQ

Q: Components are not rendering correctly

Solution: Ensure your SVG files are valid and properly formatted. Try enabling the optimize plugin:

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

Q: Watch mode is not detecting file changes

Solution: Some systems have file watcher limits. Increase the limit:

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

Q: Generated components have TypeScript errors

Solution: Install required type definitions:

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

Q: How do I migrate from another SVG tool?

Solution: SVGER-CLI is designed to be a drop-in replacement. Simply point it at your SVG directory and configure your preferred framework. The generated components follow standard patterns and conventions.

Transform SVGs into Framework Components

Built-in SVG Optimizer

Why Our Built-in Optimizer?

50% Faster

Zero Config

3 Optimization Levels

Advanced Algorithms

Why SVGer CLI?

Zero Dependencies

52% Faster

9+ Frameworks

Auto Exports

📊 Feature Comparison Matrix

Why SVGer CLI Wins

90% Smaller Bundle

50-85% Faster

9+ Frameworks

Zero Dependencies

🧪 Live Benchmark Testing

Benchmark Configuration

Upload Your Own SVG Files

📊 Performance Metrics

💻 Resource Usage

📋 Detailed Results

About This Benchmark

Installation

Quick Start

1. Convert a single SVG file

2. Batch convert an entire directory

3. Use the generated component

Multi-Framework Support

⚛️ React

Generate React Component

Generated Component (Star.tsx)

Usage in Your App

💚 Vue

Generate Vue Component

Generated Component (Heart.vue)

Usage in Your App

🅰️ Angular

Generate Angular Component

Generated Component (settings.component.ts)

Usage in Your App

🧡 Svelte

Generate Svelte Component

Generated Component (Moon.svelte)

Usage in Your App

🔷 Solid

Generate Solid Component

Generated Component (Bolt.tsx)

Usage in Your App

🔥 Lit

Generate Lit Component

Generated Component (fire-icon.ts)

Usage in Your App

⚡ Preact

Generate Preact Component

Generated Component (Zap.tsx)

Usage in Your App

🍦 Vanilla JS

Generate Vanilla Component

Generated Component (sparkles.js)

Usage in Your App

Build Tool Integrations

📦 Webpack

Install Plugin

Configure webpack.config.js

Usage in Your Project

⚡ Vite

Install Plugin

Configure vite.config.ts

Usage with Vue 3

🎲 Rollup

Install Plugin

Configure rollup.config.js

Library Mode (Perfect for Icon Libraries)

🐠 Babel

Install Plugin

Configure .babelrc

Configure babel.config.js (Alternative)