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