SVGER-CLI Build Tool Integrations

Official build tool integrations for SVGER-CLI, providing seamless SVG to component conversion in your existing build pipeline.

🚀 Quick Start

npm install svger-cli --save-dev

📦 Available Integrations

• Webpack - Plugin & Loader with HMR
• Vite - Plugin with HMR & Virtual Modules
• Rollup - Plugin with Tree-Shaking
• Babel - Plugin with Import Transformation
• Next.js - Wrapper with SSR Support
• Jest - Preset & Transformer

---

Webpack Integration

Installation

npm install svger-cli --save-dev

Usage

webpack.config.js:

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

module.exports = {
  plugins: [
    new SvgerWebpackPlugin({
      source: './src/icons',
      output: './src/components/icons',
      framework: 'react',
      typescript: true,
      hmr: true,
      generateIndex: true,
    }),
  ],

  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svger-cli/webpack-loader',
            options: {
              framework: 'react',
              typescript: true,
            },
          },
        ],
      },
    ],
  },
};

Options

Option	Type	Default	Description
source	string	'./src/icons'	Source directory containing SVG files
output	string	'./src/components/icons'	Output directory for generated components
framework	string	'react'	Target framework (react, vue, angular, etc.)
typescript	boolean	true	Generate TypeScript files
hmr	boolean	true	Enable Hot Module Replacement
generateIndex	boolean	true	Generate index file with exports

See full example →

---

Vite Integration

Installation

npm install svger-cli --save-dev

Usage

vite.config.js:

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

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

Options

Option	Type	Default	Description
source	string	'./src/icons'	Source directory containing SVG files
output	string	'./src/components/icons'	Output directory for generated components
framework	string	'react'	Target framework
typescript	boolean	true	Generate TypeScript files
hmr	boolean	true	Enable Hot Module Replacement
virtual	boolean	false	Use virtual modules
exportType	string	'default'	Export type ('default' or 'named')

See full example →

---

Rollup Integration

Installation

npm install svger-cli --save-dev

Usage

rollup.config.js:

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

export default {
  plugins: [
    svgerRollupPlugin({
      source: './src/icons',
      output: './src/components/icons',
      framework: 'react',
      typescript: true,
      sourcemap: true,
    }),
  ],
};

Options

Option	Type	Default	Description
source	string	'./src/icons'	Source directory containing SVG files
output	string	'./src/components/icons'	Output directory for generated components
framework	string	'react'	Target framework
typescript	boolean	true	Generate TypeScript files
sourcemap	boolean	false	Generate source maps
exportType	string	'default'	Export type ('default' or 'named')

See full example →

---

Babel Integration

Installation

npm install svger-cli --save-dev

Usage

babel.config.js:

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,
        processOnInit: true,
        generateIndex: true,
      },
    ],
  ],
};

Or with ES Modules (babel.config.mjs):

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

export default {
  presets: ['@babel/preset-react'],
  plugins: [
    [
      svgerBabelPlugin,
      {
        source: './src/icons',
        output: './src/components/icons',
        framework: 'react',
      },
    ],
  ],
};

Features

• ✅ Import Transformation - Automatically transforms SVG imports to component imports
• ✅ Dynamic Imports - Supports import('./icon.svg') syntax
• ✅ Auto-Processing - Processes all SVGs when plugin initializes
• ✅ Framework Agnostic - Works with any Babel-based setup
• ✅ TypeScript Support - Full type definitions included

How It Works

// Before transformation
import HomeIcon from './assets/home.svg';

// After transformation (automatic)
import HomeIcon from './components/icons/HomeIcon';

// Use in your component
function App() {
  return <HomeIcon width={24} height={24} />;
}

Options

Option	Type	Default	Description
source	string	'./src/icons'	Source directory containing SVG files
output	string	'./src/components/icons'	Output directory for generated components
framework	string	'react'	Target framework (react, vue, angular, etc.)
typescript	boolean	true	Generate TypeScript files
transformImports	boolean	true	Transform SVG imports to component imports
processOnInit	boolean	true	Process all SVGs when plugin initializes
generateIndex	boolean	true	Generate index file with all exports
include	array	['**/*.svg']	Glob patterns to include
exclude	array	['node_modules/**']	Glob patterns to exclude

Use Cases

Create React App:

// babel-plugin-macros.config.js
const { createBabelPlugin } = require('svger-cli/babel');

module.exports = {
  svger: createBabelPlugin({
    source: './src/icons',
    framework: 'react',
  }),
};

Gatsby:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-babel-plugin-svger',
      options: {
        source: './src/assets/icons',
        framework: 'react',
      },
    },
  ],
};

Vue CLI:

// babel.config.js
const { svgerBabelPlugin } = require('svger-cli/babel');

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      svgerBabelPlugin,
      {
        source: './src/assets/icons',
        framework: 'vue',
      },
    ],
  ],
};

See full example →

---

Next.js Integration

Installation

npm install svger-cli --save-dev

Usage

next.config.js:

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

module.exports = withSvger({
  svger: {
    source: './public/icons',
    output: './components/icons',
    framework: 'react',
    typescript: true,
    ssr: true,
  },
  // ... other Next.js config
});

Options

Option	Type	Default	Description
source	string	'./src/icons'	Source directory containing SVG files
output	string	'./src/components/icons'	Output directory for generated components
framework	string	'react'	Always 'react' for Next.js
typescript	boolean	true	Generate TypeScript files
ssr	boolean	true	Enable Server-Side Rendering support
hmr	boolean	true	Enable Hot Module Replacement

See full example →

---

Jest Integration

Installation

npm install svger-cli --save-dev

Usage

jest.config.js:

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

Or manually:

module.exports = {
  transform: {
    '\\.svg$': 'svger-cli/jest-transformer',
  },
};

Options

Configure through transformer config:

transform: {
  '\\.svg$': ['svger-cli/jest-transformer', {
    framework: 'react',
    typescript: true,
    mock: false,  // Use simple mocks for faster tests
  }],
}

See full example →

---

🎯 Usage Examples

React Component

import { StarIcon, MenuIcon } from './components/icons';

function App() {
  return (
    <div>
      <StarIcon width={24} height={24} fill="gold" />
      <MenuIcon />
    </div>
  );
}

Vue Component

<template>
  <div>
    <StarIcon :width="24" :height="24" fill="gold" />
  </div>
</template>

<script setup>
import { StarIcon } from './components/icons';
</script>

Angular Component

import { Component } from '@angular/core';
import { StarIconComponent } from './components/icons';

@Component({
  selector: 'app-root',
  template: ` <app-star-icon [width]="24" [height]="24" fill="gold"></app-star-icon> `,
  standalone: true,
  imports: [StarIconComponent],
})
export class AppComponent {}

---

🔧 Supported Frameworks

All integrations support these frameworks:

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

---

📚 Complete Examples

Explore full working examples in the examples/ directory:

• Webpack Configuration
• Vite Configuration
• Rollup Configuration
• Babel Configuration
• Next.js Configuration
• Jest Configuration

---

🚀 Features

All Integrations Include:

• ✅ Zero Dependencies - No bloat
• ✅ TypeScript Support - Full type safety
• ✅ Framework Agnostic - Works with all major frameworks
• ✅ Tree Shaking - Bundle only what you use
• ✅ Auto-Generated Exports - Convenient barrel files
• ✅ 85% Faster - Than alternatives like SVGR

Build Tool Specific:

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	✅	✅	✅	✅	❌	✅

---

🧪 Testing

Run integration tests:

npm run test:integrations

All integrations are thoroughly tested and verified to work correctly.

---

📖 Documentation

For complete documentation, visit the main README or check out specific guides:

• CLI Documentation
• Configuration Reference
• API Documentation

---

💬 Support

• 📝 Report Issues
• 💡 Request Features
• 📖 Read Docs

---

📄 License

MIT © SVGER-CLI Development Team