Because:
* svgr's default svgo preset runs cleanupIds, which minifies element ids
to single letters (a, b, c...) one file at a time, with no awareness of
the other SVGs it will share a page with.
* Every illustration therefore declares the same ids, so on a Storybook
Docs page that renders several of them a reference like url(#c)
resolves to the first match in the document and illustrations steal
each other's gradients, patterns and clip paths.
* CRA sets svgo: false for its own svgr rule, so this only affects
Storybook builds that use the fxa-react webpack config.
This commit:
* Adds cleanupIds: false to the preset-default overrides in the svgr
loader options in packages/fxa-react/configs/
the original ids from each SVG so cross-illustration collisions cannot
happen.
Closes FXA-14343