Is there any way to generate a unique ID for clipPath in custom icons?

[chenxinyanc]

We are using wrapIcon function to create custom icons. We have used <clipPath id="..."> and other similar constructs in the <svg> element wrapped in our icon. Here is a (rather complex) example:

https://codesandbox.io/s/fluent-ui-v9-custom-icon-test-e7w1nz?file=/example.tsx

The point is, since we want to use url(#...) to reference a clipPath, we'll have to assign an ID to every clipPath. But ID is supposed to be globally unique in the whole HTML document, and there will definitely be such conflicts if we use such icon more than once.

Is there any suggestion on how we can generate a unique ID for our clipPath? Or are we creating custom icons in the wrong way?