IconGen Icons

Optimized SVG to font icon converter using SVGO and svgtofont. Generate high-quality icon fonts and SVG sprites from your SVG files with advanced optimization and customization options.

✨ Features

• 🚀 Vite-powered - Modern build system with fast compilation
• 🎨 Multiple Output Formats - Generate fonts (WOFF, WOFF2, TTF, EOT) and SVG sprites
• ⚡ Advanced Optimization - SVGO integration for maximum file size reduction
• 🔧 Flexible Configuration - Customize fonts, CSS, and optimization settings
• 📦 TypeScript Support - Full type definitions included
• 🌐 Universal Compatibility - Works in Node.js and browser environments
• 🎯 CLI & API - Use via command line or programmatically

🚀 Quick Start

Installation

npm install @raminjafary/icongen

Basic Usage

import { generateIconFont, optimizeSVGs } from '@raminjafary/icongen';

// Generate icon font
await generateIconFont({
  src: './src/svg',
  dist: './dist/fonts',
  fontName: 'my-icons',
  cssPrefix: 'icon',
  verbose: true
});

// Optimize SVG files
await optimizeSVGs('./src/svg', './dist/optimized', true);

CLI Usage

# Generate icon font
npx @raminjafary/icongen --src ./src/svg --dist ./dist/fonts --fontName my-icons

# Generate SVG sprite
npx @raminjafary/icongen sprite --src ./src/svg --dist ./dist/sprite

📖 Documentation

Core APIs

generateIconFont(options)

Generate icon fonts from SVG files.

import { generateIconFont } from '@raminjafary/icongen';

await generateIconFont({
  src: string;           // Source directory with SVG files
  dist: string;          // Output directory for fonts
  fontName?: string;     // Font name (default: 'icongen-icons')
  cssPrefix?: string;    // CSS class prefix (default: 'icongen-icons')
  verbose?: boolean;     // Enable verbose logging
  website?: boolean;     // Generate demo website
  optimize?: boolean;    // Enable optimization
  fixStrokes?: boolean; // Fix stroke issues
  enableHashRevving?: boolean; // Enable hash-based file naming
});

optimizeSVGs(srcDir, outputDir?, verbose?)

Optimize SVG files for general use.

import { optimizeSVGs } from '@raminjafary/icongen';

await optimizeSVGs('./src/svg', './dist/optimized', true);

optimizeSVGsForFonts(srcDir, outputDir?, verbose?)

Optimize SVG files specifically for font generation.

import { optimizeSVGsForFonts } from '@raminjafary/icongen';

await optimizeSVGsForFonts('./src/svg', './dist/font-ready', true);

Advanced APIs

FontGenerator

Programmatic font generation with full control.

import { FontGenerator } from '@raminjafary/icongen/generator';

const generator = new FontGenerator({
  src: './src/svg',
  dist: './dist/fonts',
  fontName: 'my-icons',
  cssPrefix: 'icon',
  verbose: true
});

await generator.generate();

SVGOptimizer

Advanced SVG optimization with custom settings.

import { SVGOptimizer } from '@raminjafary/icongen/optimizer';

const optimizer = new SVGOptimizer({
  verbose: true,
  inlineDefs: true,
  removeViewBox: false,
  floatPrecision: 2
});

await optimizer.optimizeDirectory('./src/svg', './dist/optimized');

SpriteManager

Generate SVG sprites for web use.

import { SpriteManager } from '@raminjafary/icongen/sprite';

const spriteManager = new SpriteManager({
  src: './src/svg',
  dist: './dist/sprite',
  name: 'icons-sprite',
  verbose: true
});

await spriteManager.generate();

BuildManager

Advanced build workflows with multiple outputs.

import { BuildManager } from '@raminjafary/icongen';

const buildManager = new BuildManager({
  src: './src/svg',
  dist: './dist',
  fontName: 'app-icons',
  cssPrefix: 'icon',
  verbose: true
});

await buildManager.build();

🎯 Examples

Check out the comprehensive examples in the examples/ directory:

Node.js CLI Example

cd examples/nodejs-cli
npm install
npm start

Browser Vanilla JavaScript Example

cd examples/browser-vanilla
npm install
npm run dev

Run All Examples

npm run examples:all

🛠️ Development

Development Scripts

# Build the library
npm run build

# Build with type definitions
npm run build:types

# Build everything (library + generate assets)
npm run build:all

# Development mode with watch
npm run dev

# Generate fonts from examples
npm run generate:fonts

# Generate sprites
npm run generate:sprite

# Preview generated fonts
npm run preview

# Run examples
npm run examples:nodejs
npm run examples:browser
npm run examples:all

🛠️ Configuration

Vite Configuration

The library is built with Vite for optimal performance and modern tooling support.

TypeScript Configuration

Full TypeScript support with comprehensive type definitions.

Build Configuration

{
  "scripts": {
    "build": "vite build",
    "build:types": "tsc --emitDeclarationOnly",
    "dev": "vite build --watch",
    "build:all": "npm run build && npm run build:types && npm run generate"
  }
}

📦 Output Formats

Icon Fonts

• CSS: Multiple format support (CSS, LESS, SCSS, Stylus)
• Fonts: WOFF, WOFF2, TTF, EOT, SVG
• Types: TypeScript definitions for icon names
• Manifest: JSON files with icon metadata

SVG Sprites

• Symbol: SVG symbol sprite for <use> elements
• CSS: Sprite CSS for background positioning
• HTML: Demo page with all icons

🔧 Advanced Usage

Custom SVGO Configuration

import { SVGOptimizer } from '@raminjafary/icongen/optimizer';

const optimizer = new SVGOptimizer({
  verbose: true,
  plugins: [
    'preset-default',
    'removeDimensions',
    'removeUselessStrokeAndFill',
    'removeEmptyAttrs'
  ]
});

Custom Font Configuration

import { FontGenerator } from '@raminjafary/icongen/generator';

const generator = new FontGenerator({
  src: './src/svg',
  dist: './dist/fonts',
  fontName: 'custom-icons',
  cssPrefix: 'ci',
  verbose: true,
  website: true,
  optimize: true,
  fixStrokes: true,
  enableHashRevving: true
});

Custom Sprite Configuration

import { SpriteGenerator } from '@raminjafary/icongen/sprite';

const spriteGenerator = new SpriteGenerator({
  src: './src/svg',
  dist: './dist/sprite',
  name: 'custom-sprite',
  config: {
    shape: {
      id: {
        generator: (name) => `icon-${name}`
      }
    },
    mode: {
      symbol: {
        dest: '.',
        sprite: 'sprite.svg',
        inline: true
      }
    }
  }
});

🌐 Browser Usage

Include Generated CSS

<link rel="stylesheet" href="./fonts/icongen-icons.css">

Use Icon Fonts

<i class="icongen-icons icongen-icons-home"></i>
<i class="icongen-icons icongen-icons-search"></i>

Use SVG Sprites

<svg class="icon">
  <use href="./sprite/sprite.svg#icon-home"></use>
</svg>

🚀 Performance

• Optimized SVGs: Advanced SVGO optimization for minimal file sizes
• Multiple Formats: Generate only the formats you need
• Tree Shaking: Import only the functions you use
• Fast Builds: Vite-powered compilation for speed

📋 Requirements

• Node.js 18+
• Modern browser (for browser examples)
• SVG files for processing

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.