Using @neodx/svg with Heroicons

This guide explains how to use Heroicons SVGs with @neodx/svg in your project, using the official npm package and built-in optimization.

1. Install Heroicons

npm install heroicons
# or
yarn add heroicons

2. Configure @neodx/svg to use Heroicons

In your vite.config.ts:

import svg from '@neodx/svg/vite';

export default defineConfig({
  plugins: [
    svg({
      inputRoot: 'node_modules/heroicons', // Use the official package as source
      output: 'public/sprites',
      fileName: '{name}.{hash:8}.svg',
      metadata: 'src/shared/ui/icon/sprite.gen.ts',
      group: true // Group by folder (e.g., 24/outline, 24/solid, etc.)
    })
  ]
});

3. Using Heroicons in your app

After running Vite, your Heroicons will be available as part of your icon sprite and TypeScript metadata. Use them as you would any other icon:

import { Icon } from '../shared/ui/icon';

<Icon name="24/outline/academic-cap" />
<Icon name="24/solid/check-circle" />

4. Advanced usage

See the real-world example on GitHub for advanced config, grouping, and usage patterns.