[Bug] Svgs that use clip-path() ids can't be used more than once.

[jmckinnell]

Describe the bug

If I include more than one of the same SVG and that SVG uses clip-path="url(#ar-clip0)" they will end up using the same clip-path. This causes the first SVG to disappear as it's referencing the second SVGs clip-path.

We need to find a way to process the SVG and create unique ids for the SVG. Currently, we're using https://github.com/airbnb/babel-plugin-inline-react-svg with svgo to inline the SVGs. They are aware of the issue but there hasn't been a proposed fix because of some conflicts with the latest version of svgo airbnb/babel-plugin-inline-react-svg#57

To Reproduce

1. Import an SVG
2. Use it twice on the page
3. See one of the SVGs disappear.

Expected behaviour

Both SVGs are visible.