Prevent problems when including the same SVG multiple times when the SVG uses IDs/defs.
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 384
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 77
Description
## Feature Description
As discovered by way of #5934, when rendering SVGs which use IDs to refer to defs, problems can occur when multiple instances of the SVG are rendered in the page, as this results in duplicate IDs and one instance of an SVG can have the ID its looking up resolved to another instance, causing display problems.
In practical terms this was spotted due to the Idea Hub graphic displaying with the orange bit in the corner hidden when there were two instances of it on the page with one of the instances being hidden via CSS.

Note that there are a number of SVGs which use IDs to refer to defs:
```sh
➜ google-site-kit git:(bug/5934-fix-banner-icon) ✗ grep -l 'url(#' assets/svg/graphics/*
assets/svg/graphics/adsense-connect-1.svg
assets/svg/graphics/adsense-connect-2.svg
assets/svg/graphics/analytics-setup-sidekick.svg
assets/svg/graphics/cta-graph-traffic.svg
assets/svg/graphics/idea-hub-notification.svg
assets/svg/graphics/idea-hub-prompt.svg
assets/svg/graphics/idea-hub.svg
assets/svg/graphics/milestone-blue.svg
assets/svg/graphics/notification-alert.svg
assets/svg/graphics/pagespeed-insights.svg
assets/svg/graphics/thank-with-google-setup.svg
assets/svg/graphics/twg-dynamic-high.svg
assets/svg/graphics/twg-dynamic-low.svg
```
That ID collision is what the Babel plugin `babel-plugin-react-inline-svg-unique-id` is designed to solve, but unfortunately it [requires React 17](https://github.com/laleksiunas/inline-svg-unique-id/pull/4) as it depends on the [newer JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
We should address this limitation and find a solution which provides unique IDs for multiple SVG instances.
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
* It should be possible to include multiple instances of an SVG on the page without them interfering with each other due to ID collisions.
* The fix introduced [here](https://github.com/google/site-kit-wp/commit/22d62c79a003ce7a6ef7be447c11e9497dfb87b5) should be re-evaluated, and possibly reverted. A followup issue should be created as necessary.
## Implementation Brief
* This issue can be addressed with [react-svg-unique-id](https://www.npmjs.com/package/react-svg-unique-id?activeTab=readme) plugin:
* Find places where SVGs from the list in AC are rendered and wrap them with `SVGUniqueID` imported from `react-svg-unique-id`
* Eg. inside `js/modules/idea-hub/components/common/IdeaHubPromptSVG.js` do:
````
//Some imports above
import { SVGUniqueID } from 'react-svg-unique-id';
const LazyIdeaHubPromptSVG = lazy( () =>
import( '../../../../../svg/graphics/idea-hub-prompt.svg' )
);
export default function IdeaHubPromptSVG( props ) {
return (
}>
);
}
````
* Remove the fix introduced [here](https://github.com/google/site-kit-wp/commit/22d62c79a003ce7a6ef7be447c11e9497dfb87b5)
### Test Coverage
* No tests need to be added.
## QA Brief
*
## Changelog entry
*
Contributor guide
Research direction
Start with the SVGs listed under assets/svg/graphics and the components that render them, including js/modules/idea-hub/components/common/IdeaHubPromptSVG.js. Review the react-svg-unique-id usage and the fix from commit 22d62c79a003ce7a6ef7be447c11e9497dfb87b5. Done means multiple instances of each affected SVG no longer interfere through duplicate IDs, and the earlier fix is removed or re-evaluated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100