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

react-svg-unique-id

library1.3.3jsnpmunverified

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.

web-framework

npm install react-svg-unique-id

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SVG-UNIQUE-I

react-svg-unique-id

web-frameworkjavascriptv1.3.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.

SVGUniqueID (default import)

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

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

Default import also works if you prefer, but named import is preferred for tree shaking.

SVGUniqueID (require)

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

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

Require with destructuring is correct; plain require returns the module with named exports.

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;

Debug

Known issues

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

affects: all

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

affects: <16.6.3

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

affects: all

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

affects: all

Errors

Common errors & fixes

TypeError: Cannot read property 'props' of undefined

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

fix

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

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

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'

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

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

fix

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

Upgrade

Version history

1.3.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

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

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