svgr-unique-ids-plugin

Babel plugin for SVGR that rewrites SVG id attributes to use unique prefixes via React.useId(), preventing ID collisions when the same icon is rendered multiple times on a page.

How it works

Before:

<linearGradient id="paint0" ...>
<rect fill="url(#paint0)" ...>

After (generated React component):

const idPrefix = React.useId();
// ...
<linearGradient id={`${idPrefix}-paint0`} ...>
<rect fill={`url(#${idPrefix}-paint0)`} ...>

Installation

npm install --save-dev svgr-unique-ids-plugin

Usage

In your SVGR config (e.g. svgr.config.js or Vite/webpack SVGR options):

import { svgrUniqueIdsPlugin } from 'svgr-unique-ids-plugin';

export default {
  babel: {
    plugins: [svgrUniqueIdsPlugin],
  },
};

Or inline in Vite:

// vite.config.ts
import { svgrUniqueIdsPlugin } from 'svgr-unique-ids-plugin';

export default defineConfig({
  plugins: [
    svgr({
      svgrOptions: {
        babel: {
          plugins: [svgrUniqueIdsPlugin],
        },
      },
    }),
  ],
});

Requirements

• @babel/core ^7.0.0
• react ^18.0.0 (for React.useId())