Motivation

Why @neodx/svg exists and why you should care.

Modern web development demands both performance and developer experience. When it comes to SVG icons, developers are stuck choosing between two frustrating options:

1. SVG-in-JS (SVGR, etc.) — Great DX, terrible performance
2. Traditional sprites — Great performance, terrible DX

@neodx/svg bridges this gap, giving you the performance benefits of sprites with the developer experience you actually want.

The Problem: SVG-in-JS is Popular but Problematic

Most React developers reach for SVG-in-JS solutions because they feel natural and convenient:

// This feels nice to write...
import { MapIcon, CloseIcon, UserIcon } from '@/icons';

function Component() {
  return (
    <div>
      <MapIcon />
      <CloseIcon />
      <UserIcon />
    </div>
  );
}

But here's what's actually happening under the hood:

• Bloated bundles: Every icon adds JavaScript to your bundle, even static SVG content
• Performance drain: Your browser parses and evaluates static SVG as JavaScript code
• Broken caching: Bundle changes invalidate all icons, regardless of which ones actually changed
• Longer build times: Every icon must be processed and bundled
• Complex imports: Dynamic icon usage requires awkward component mapping
• No tree-shaking: Barrel imports kill performance, direct imports kill maintainability

Think about it: you're embedding static visual assets as JavaScript code. That's like inlining your images as Base64 strings everywhere. It works, but it's fundamentally wrong.

Why Sprites are Actually Better

SVG sprites solve these problems elegantly:

• Perfect caching: Content-based hashing means unchanged icons stay cached
• Tiny bundles: Icons don't add to your JavaScript bundle size
• Instant rendering: No JavaScript evaluation required
• Optimal delivery: Single HTTP request for all icons, perfect for CDN caching
• Browser optimized: Native SVG support with hardware acceleration

But traditional sprite solutions have terrible developer experience:

• Manual sprite generation and management
• No type safety or autocomplete
• Cryptic icon names with no IDE support
• Complex build processes with brittle tooling
• No integration with modern bundlers

How @neodx/svg Solves Everything

We built @neodx/svg to give you sprite performance with component-level DX:

🚀 Zero-Config Universal Integration

Works seamlessly with every major bundler and framework:

// Just add one line to your Vite/Webpack/Next.js config
svg({
  inputRoot: 'src/icons',
  output: 'public/sprites'
});

🎯 Type-Safe, Modern DX

Get the convenience of components with better performance:

// Type-safe, autocomplete-enabled, single import
import { Icon } from '@/ui/icon';

function Component() {
  return (
    <div>
      <Icon name="common:map" /> {/* TypeScript knows this exists */}
      <Icon name="actions:close" /> {/* Autocomplete works perfectly */}
      <Icon name="user:avatar" /> {/* Typos caught at build time */}
    </div>
  );
}

⚡ Smart Automation

• Automatic optimization: SVGO-powered minification and cleanup
• Color management: CSS-driven theming without manual SVG editing
• Content hashing: Cache-busting filenames that update only when content changes
• Intelligent grouping: Multiple sprites to prevent single-file bloat
• Cleanup: Outdated sprites automatically removed

🎨 Advanced Features

• Multicolored icons: Smart color strategies for complex graphics
• CDN compatibility: Works with any hosting setup
• Runtime metadata: Full type safety and symbol information
• Automatic scaling: Icons scale properly with text
• Accessibility: Built-in ARIA support and focus management

The Modern Approach

With @neodx/svg, you get the best of both worlds:

Performance like traditional sprites:

• No bundle bloat
• Perfect caching
• Fast rendering
• CDN-friendly

DX like modern components:

• Type safety
• Autocomplete
• Single imports
• Framework integration

Plus modern superpowers:

• Automatic optimization
• CSS-driven theming
• Content-based hashing
• Universal bundler support

Real Impact

Teams using @neodx/svg report:

• 30-70% bundle size reduction for icon-heavy apps
• Faster builds with no SVG compilation overhead
• Better performance with sprite caching and native SVG rendering
• Improved DX with type safety and autocomplete
• Easier maintenance with automated optimization and cleanup

Start Today

Don't settle for the false choice between performance and developer experience. Get both with @neodx/svg.

Get Started → | See Examples →

Additional Reading

• SVG in JS Performance Issues - Detailed analysis of SVG-in-JS problems
• Icon Pipeline Alternatives - Simple sprite solutions
• FAQ: Why sprites? - Technical comparison of approaches