{"id":20502,"library":"react-unique-svg-id","title":"react-svg-unique-id","description":"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).","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/kmertozen/react-svg-unique-id","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-unique-svg-id","lang":"bash","label":"npm"},{"cmd":"yarn add react-unique-svg-id","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-unique-svg-id","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for React component rendering","package":"react","optional":false}],"imports":[{"note":"Named export, not default. TypeScript types are included.","wrong":"import SVGUniqueID from 'react-svg-unique-id'","symbol":"SVGUniqueID","correct":"import { SVGUniqueID } from 'react-svg-unique-id'"},{"note":"CommonJS: it's a named export, so destructuring is required.","wrong":"const SVGUniqueID = require('react-svg-unique-id')","symbol":"SVGUniqueID","correct":"const { SVGUniqueID } = require('react-svg-unique-id')"},{"note":"TypeScript type import for type-only usage.","wrong":"","symbol":"import type","correct":"import type { SVGUniqueID } from 'react-svg-unique-id'"}],"quickstart":{"code":"import * as React from 'react';\nimport { SVGUniqueID } from 'react-svg-unique-id';\n\nfunction MySvg() {\n  return (\n    <SVGUniqueID>\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n        <defs>\n          <linearGradient id=\"my-gradient\">\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(#my-gradient)\" />\n      </svg>\n    </SVGUniqueID>\n  );\n}\n\nexport default MySvg;","lang":"typescript","description":"Wraps an SVG with the SVGUniqueID component to ensure all ids are unique, avoiding collisions when multiple SVGs are rendered on the same page."},"warnings":[{"fix":"Use `import { SVGUniqueID } from 'react-svg-unique-id'` instead of `import SVGUniqueID from 'react-svg-unique-id'`.","message":"v1.0.0 changed API: previously the package used a default export, now it's a named export.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Ensure all ids are on direct children of the SVG, or consider manually handling nested SVGs.","message":"The component only handles id attributes and references within the direct children of the SVG element. Nested SVG elements not properly supported? Check documentation.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ids are sequential per render, but may not be stable across server-side rendering (SSR) if executed multiple times.","message":"The component uses a global counter and may produce non-deterministic ids across different renders?","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider forking or switching to an alternative if you encounter issues with React 18+.","message":"The package has not been updated since 2019; may have compatibility issues with newer React versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use xlinkHref for React <16, or use href for React >=16 and ensure the library handles both.","message":"The component does not handle href attribute (React uses xlinkHref for older versions, but modern React uses href).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use `import { SVGUniqueID } from 'react-svg-unique-id'`","cause":"Trying to use default import instead of named import.","error":"Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined"},{"fix":"Run `npm install react-svg-unique-id` or `yarn add react-svg-unique-id`","cause":"The package is not installed.","error":"Error: Module not found: Can't resolve 'react-svg-unique-id'"},{"fix":"Ensure you have installed the package and that your tsconfig includes 'jsx': 'react-jsx' or similar.","cause":"TypeScript strict mode expects a proper type; the types might be missing.","error":"'SVGUniqueID' cannot be used as a JSX component because it is not a valid React element type."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}