@number10/jsx-icon-generator

CLI tooling and Vite plugin for generating type-safe icon types and dynamic loaders from icon libraries.

Features

• Type generation — Generate TypeScript union types from SVG icons in packages or directories
• Loader generation — Scan your codebase for icon usage and generate dynamic import loaders
• Vite plugin — Automatic icon generation during development and build
• Multi-source — Combine icons from multiple packages and directories
• Watch mode — Regenerate on file changes during development

Installation

pnpm add -D @number10/jsx-icon-generator

CLI Usage

# Generate icon types
generate-icon-types -p bootstrap-icons -o ./src/icon-types.generated.ts

# Generate icon loaders
generate-icon-loaders -s ./src -o ./src/icon-loaders.generated.ts -p bootstrap-icons

# Unified generator with config file
generate-icons --config ./icon-generator.config.ts

Vite Plugin

import { defineConfig } from 'vite'
import { iconGeneratorPlugin } from '@number10/jsx-icon-generator/vite-plugin-icons'

export default defineConfig({
  plugins: [
    iconGeneratorPlugin({
      configPath: './icon-generator.config.ts',
    }),
  ],
})

Configuration

import { defineIconConfig } from '@number10/jsx-icon-generator/icon-generator-config'

export default defineIconConfig({
  source: {
    package: 'bootstrap-icons',
    iconsPath: 'icons',
  },
  types: {
    enabled: true,
    output: './src/icon-types.generated.ts',
    typeName: 'IconType',
  },
  loaders: {
    enabled: true,
    output: './src/icon-loaders.generated.ts',
    scanDir: './src',
    componentNames: ['Icon'],
    validate: true,
  },
})

License

GPL-3.0-only