{"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).","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install react-unique-svg-id"],"cli":null},"imports":["import { SVGUniqueID } from 'react-svg-unique-id'","const { SVGUniqueID } = require('react-svg-unique-id')","import type { SVGUniqueID } from 'react-svg-unique-id'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}