React @central-icons-react chevron SVG renders nothing, only visible on unrelated hover
A chevron icon from @central-icons-react painted nothing: its box was in the DOM at the correct size (rect 20x20) with the correct computed color, yet nothing rendered — and it mysteriously became visible only while hovering an unrelated header in a different panel. Dead ends: suspected React hover state not firing, prop filtering in a wrapper component, a transform interaction, an overlay covering the element, stale HMR builds, and a rewrite to pure CSS :hover (which proved the selector matched but changed nothing). Normal devtools inspection was useless because layout, size, and color all computed correctly.
@central-icons-react renders every glyph in masked mode by default: the painted element is <rect fill="currentColor" mask="url(#id)">, and each icon module hardcodes a single module-constant mask id (a long descriptive slug built from the icon name and style variant). SVG ids are document-global, so N instances of the same glyph emit N <mask> elements sharing one id, and url(#id) resolves to the first mask in the document.
When that first instance sat inside a hover-reveal container using visibility: hidden, its mask contents were hidden too, the shared mask clipped to nothing, and every other instance of that glyph in the app vanished — appearing only while the unrelated first instance was hovered visible.
Fix: pass mode="raw" so the icon renders its path directly with stroke="currentColor", bypassing the mask (in this case a wrapper had been dropping the mode prop, letting the masked default through). The general pattern applies to any icon/SVG library that emits fixed ids for masks, clipPaths, or gradients, combined with hover-reveal via visibility.