@redocly/theme/src/core/hooks/use-unique-svg-ids.ts

Shared UI components lib

import { useId } from 'react';

/**
 * Returns a function that appends a per-component-instance suffix to SVG ids.
 * This prevents collisions when multiple identical SVGs are rendered on the same page,
 * which can break `url(#...)` references (gradients, clipPath, masks, filters) on reflow.
 */
export function useUniqueSvgIds(): (id: string) => string {
  const reactId = useId();
  const safeSuffix = reactId.replace(/:/g, '_');
  return (id: string): string => `${id}-${safeSuffix}`;
}