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:
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?
We are using
wrapIconfunction 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 aclipPath, 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?