react-svg-unique-id

1.3.3 verified Sat Apr 25 auth: no javascript maintenance

React utility that automatically rewrites SVG element IDs (id, xlinkHref, url(#...)) to unique, collision-free identifiers like ___SVG_ID__N__M___. This solves the problem of duplicate IDs when multiple SVGs processed by SVGO are used on the same page. Version 1.3.3 is the latest stable release (last published March 2020). The library ships with TypeScript types and has a peer dependency on React ^16.6.3. It is lightweight and specifically designed for React, unlike generic SVG ID deduplication tools.

Common errors

error TypeError: Cannot read property 'props' of undefined ↓

cause Passing a non-SVG element or null child to SVGUniqueID.

fix

Ensure SVGUniqueID wraps a single SVG element, not an array or fragment.

error Module not found: Can't resolve 'react-svg-unique-id' ↓

cause Package not installed or import path incorrect.

fix

Run 'npm install react-svg-unique-id' and use correct import: import { SVGUniqueID } from 'react-svg-unique-id'

error Warning: React does not recognize the `xlinkHref` prop on a DOM element ↓

cause Using xlinkHref which is deprecated; should use href instead in modern React.

fix

Replace xlinkHref="#id" with href="#id" in <use> elements.

Warnings

gotcha SVGUniqueID only works with inline SVGs; it does not affect ids in external SVG files or <use> with external references. ↓

fix Ensure SVGs are inline (rendered as React elements) for id rewriting to apply.

deprecated React 16.6.3 minimum required; will not work with older React versions. ↓

fix Upgrade React to at least 16.6.3 or use a different approach for older React.

gotcha If your SVG uses ids that are referenced from outside the SVGUniqueID wrapper (e.g., same-page anchor links), those references will break because id is changed. ↓

fix Do not rely on external references to ids inside SVGUniqueID; consider using a different id scheme or avoid wrapping if external references are needed.

gotcha The library rewrites all id attributes and url(#...) references; it does not handle ids in style tags or CSS custom properties. ↓

fix Manually ensure that any CSS inside the SVG that references ids uses the new generated ids, or avoid inline styles.

Install

npm install react-svg-unique-id

yarn add react-svg-unique-id

pnpm add react-svg-unique-id

Imports

SVGUniqueID

wrong

import SVGUniqueID from 'react-svg-unique-id'

correct

import { SVGUniqueID } from 'react-svg-unique-id'

Named export, not default.

SVGUniqueID (default import)
wrong
```
const SVGUniqueID = require('react-svg-unique-id')
```
correct
```
import SVGUniqueID from 'react-svg-unique-id'
```
Default import also works if you prefer, but named import is preferred for tree shaking.
SVGUniqueID (require)
wrong
```
const SVGUniqueID = require('react-svg-unique-id')
```
correct
```
const { SVGUniqueID } = require('react-svg-unique-id')
```
Require with destructuring is correct; plain require returns the module with named exports.

Quickstart

Wraps an SVG in SVGUniqueID to ensure all id attributes and url(#...) references are made unique to avoid collisions when multiple SVGs with the same ids are rendered.

import React from 'react';
import { SVGUniqueID } from 'react-svg-unique-id';

const MySvg = () => (
  <SVGUniqueID>
    <svg viewBox="0 0 100 100">
      <defs>
        <linearGradient id="grad1">
          <stop offset="0%" stopColor="red" />
          <stop offset="100%" stopColor="blue" />
        </linearGradient>
      </defs>
      <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
    </svg>
  </SVGUniqueID>
);

export default MySvg;