{"id":20500,"library":"react-svg-unique-id","title":"react-svg-unique-id","description":"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.","status":"maintenance","version":"1.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/elderapo/react-svg-unique-id","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-svg-unique-id","lang":"bash","label":"npm"},{"cmd":"yarn add react-svg-unique-id","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-svg-unique-id","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export, not default.","wrong":"import SVGUniqueID from 'react-svg-unique-id'","symbol":"SVGUniqueID","correct":"import { SVGUniqueID } from 'react-svg-unique-id'"},{"note":"Default import also works if you prefer, but named import is preferred for tree shaking.","wrong":"const SVGUniqueID = require('react-svg-unique-id')","symbol":"SVGUniqueID (default import)","correct":"import SVGUniqueID from 'react-svg-unique-id'"},{"note":"Require with destructuring is correct; plain require returns the module with named exports.","wrong":"const SVGUniqueID = require('react-svg-unique-id')","symbol":"SVGUniqueID (require)","correct":"const { SVGUniqueID } = require('react-svg-unique-id')"}],"quickstart":{"code":"import React from 'react';\nimport { SVGUniqueID } from 'react-svg-unique-id';\n\nconst MySvg = () => (\n  <SVGUniqueID>\n    <svg viewBox=\"0 0 100 100\">\n      <defs>\n        <linearGradient id=\"grad1\">\n          <stop offset=\"0%\" stopColor=\"red\" />\n          <stop offset=\"100%\" stopColor=\"blue\" />\n        </linearGradient>\n      </defs>\n      <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"url(#grad1)\" />\n    </svg>\n  </SVGUniqueID>\n);\n\nexport default MySvg;","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure SVGs are inline (rendered as React elements) for id rewriting to apply.","message":"SVGUniqueID only works with inline SVGs; it does not affect ids in external SVG files or <use> with external references.","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade React to at least 16.6.3 or use a different approach for older React.","message":"React 16.6.3 minimum required; will not work with older React versions.","severity":"deprecated","affected_versions":"<16.6.3"},{"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.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Manually ensure that any CSS inside the SVG that references ids uses the new generated ids, or avoid inline styles.","message":"The library rewrites all id attributes and url(#...) references; it does not handle ids in style tags or CSS custom properties.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure SVGUniqueID wraps a single SVG element, not an array or fragment.","cause":"Passing a non-SVG element or null child to SVGUniqueID.","error":"TypeError: Cannot read property 'props' of undefined"},{"fix":"Run 'npm install react-svg-unique-id' and use correct import: import { SVGUniqueID } from 'react-svg-unique-id'","cause":"Package not installed or import path incorrect.","error":"Module not found: Can't resolve 'react-svg-unique-id'"},{"fix":"Replace xlinkHref=\"#id\" with href=\"#id\" in <use> elements.","cause":"Using xlinkHref which is deprecated; should use href instead in modern React.","error":"Warning: React does not recognize the `xlinkHref` prop on a DOM element"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}