react-svg-unique-id


SVG processors like SVGO optimize SVG ids which often results in duplicated ids across multiple SVGs. This library tries to fix that by replacing all children ids and id references (#id, url(#id)) in SVG tags with unique generated ids like ___SVG_ID__10__0___.

$3

``bash
yarn add react-svg-unique-id


or


npm install react-svg-unique-id
`

$3

`typescript
import * as React from 'react'
import { SVGUniqueID } from 'react-svg-unique-id'

export const SVG1 = () => (



// prefix__bga => ___SVG_ID__0__0___


// #prefix__bga => #___SVG_ID__0__0___
// url(#prefix__bga) => "url(#___SVG_ID__0__0___)



)

export const SVG2 = () => (



// prefix__bga => ___SVG_ID__1__0___


// #prefix__bga => #___SVG_ID__1__0___
// url(#prefix__bga) => url(#___SVG_ID__1__0___)



)
`

If both of these SVGs were not wrapped in SVGUniqueID component there would be an id collision since two html elements would have prefix__bga` as thier id.

License