react-svg-unique-id

1.0.3 verified Sat Apr 25 auth: no javascript

SVG processors like SVGO optimize SVG ids which often results in duplicated ids across multiple SVGs. This library tries to fix that by wrapping SVGs in a component that replaces all children ids and id references (`#id`, `url(#id)`) with unique generated ids like `___SVG_ID__10__0___`, ensuring no id collisions when multiple SVGs are rendered on the same page. Current stable version is 1.0.4. Release cadence is low (last release 2019). Key differentiators: lightweight, TypeScript types included, no external dependencies beyond React. For versions prior to 1.0.0, the library used a different API (package name `react-svg-unique-id` > 1.0.0).

Common errors

error Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined ↓

cause Trying to use default import instead of named import.

fix

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

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

cause The package is not installed.

fix

Run npm install react-svg-unique-id or yarn add react-svg-unique-id

error 'SVGUniqueID' cannot be used as a JSX component because it is not a valid React element type. ↓

cause TypeScript strict mode expects a proper type; the types might be missing.

fix

Ensure you have installed the package and that your tsconfig includes 'jsx': 'react-jsx' or similar.

Warnings

breaking v1.0.0 changed API: previously the package used a default export, now it's a named export. ↓

fix Use `import { SVGUniqueID } from 'react-svg-unique-id'` instead of `import SVGUniqueID from 'react-svg-unique-id'`.

gotcha The component only handles id attributes and references within the direct children of the SVG element. Nested SVG elements not properly supported? Check documentation. ↓

fix Ensure all ids are on direct children of the SVG, or consider manually handling nested SVGs.

gotcha The component uses a global counter and may produce non-deterministic ids across different renders? ↓

fix Ids are sequential per render, but may not be stable across server-side rendering (SSR) if executed multiple times.

deprecated The package has not been updated since 2019; may have compatibility issues with newer React versions. ↓

fix Consider forking or switching to an alternative if you encounter issues with React 18+.

gotcha The component does not handle href attribute (React uses xlinkHref for older versions, but modern React uses href). ↓

fix Use xlinkHref for React <16, or use href for React >=16 and ensure the library handles both.

Install

npm install react-unique-svg-id

yarn add react-unique-svg-id

pnpm add react-unique-svg-id

Imports

SVGUniqueID

wrong

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

correct

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

Named export, not default. TypeScript types are included.

SVGUniqueID

wrong

const SVGUniqueID = require('react-svg-unique-id')

correct

const { SVGUniqueID } = require('react-svg-unique-id')

CommonJS: it's a named export, so destructuring is required.

import type

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

TypeScript type import for type-only usage.

Quickstart

Wraps an SVG with the SVGUniqueID component to ensure all ids are unique, avoiding collisions when multiple SVGs are rendered on the same page.

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

function MySvg() {
  return (
    <SVGUniqueID>
      <svg width="100" height="100" viewBox="0 0 100 100">
        <defs>
          <linearGradient id="my-gradient">
            <stop offset="0%" stopColor="red" />
            <stop offset="100%" stopColor="blue" />
          </linearGradient>
        </defs>
        <circle cx="50" cy="50" r="40" fill="url(#my-gradient)" />
      </svg>
    </SVGUniqueID>
  );
}

export default MySvg;