Registry / web-framework / react-unique-svg-id

react-unique-svg-id

library1.0.3jsnpmunverified

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).

web-framework

npm install react-unique-svg-id

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-UNIQUE-SVG-I

react-unique-svg-id

web-frameworkjavascriptv1.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SVGUniqueID

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

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

Named export, not default. TypeScript types are included.

SVGUniqueID

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

✗ 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.

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;

Debug

Known issues

breakingv1.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'`.

affects: <1.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

deprecatedThe 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+.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

Trying to use default import instead of named import.

fix

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

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

The package is not installed.

fix

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

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

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.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

reactrequiredpeer dependency for React component rendering

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/kmertozen/react-svg-unique-id ↗

packagehttps://www.npmjs.com/package/react-unique-svg-id ↗