Skip to content

Use @neodx/svg programmatically with Node.js ​

You can use @neodx/svg directly in your Node.js scripts to build SVG sprites and generate metadata—no bundler or plugin required! This is perfect for libraries, design systems, or custom build flows.

Quick start ​

  1. Install @neodx/svg:
bash
npm install -D @neodx/svg
  1. Create a build script (e.g., build-icons.mjs):
js
import { createSvgSpriteBuilder } from '@neodx/svg';

const builder = createSvgSpriteBuilder({
  inputRoot: 'src/shared/ui/icon/assets', // Where your SVGs are
  output: 'public/sprites', // Where to write sprites
  fileName: '{name}.{hash:8}.svg', // Sprite file naming
  metadata: 'src/shared/ui/icon/sprite.gen.ts', // TypeScript metadata output
  group: true // Group sprites by folder
});

await builder.load('**/*.svg'); // Find all SVGs
await builder.build(); // Build sprites & metadata
  1. Add a script to your package.json:
json
{
  "scripts": {
    "build:icons": "node build-icons.mjs"
  }
}
  1. Run your build!
bash
npm run build:icons

What happens? ​

  • All your SVGs are optimized and grouped into sprites in public/sprites/.
  • TypeScript metadata is generated for type-safe icon usage.
  • Colors are reset to currentColor by default (configurable).

Need more control? ​

You can customize grouping, color reset, optimization, inlining, and more:

js
const builder = createSvgSpriteBuilder({
  // ...
  group: ({ path }) => (path.includes('logos') ? 'logos' : 'default'),
  resetColors: { replace: ['#000'], replaceUnknown: 'var(--icon-secondary-color)' },
  optimize: false, // or custom SVGO config
  inline: 'auto', // or 'all', or false
  cleanup: 'auto' // or 'force', or false
});

See the Builder API reference for all options and advanced usage.


That's it! You now have a fast, flexible, and type-safe SVG icon pipeline—fully automated with Node.js.

Released under the MIT License.