From 70f8f2e15b008e35d28aa69973c25e52a918d747 Mon Sep 17 00:00:00 2001 From: Serhii Dziupin Date: Wed, 12 Aug 2026 10:21:56 +0000 Subject: [PATCH] fix(icons): inject missing sprite symbols for newly added icons The icon sprite was injected once and never updated, so HMR/new glyphs like telegram-fill left refs empty. Append missing symbols on render. Co-authored-by: Serhii Dziupin --- packages/ui/src/components/icon/Icon.tsx | 25 +++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/icon/Icon.tsx b/packages/ui/src/components/icon/Icon.tsx index 3956cfba..be6077de 100644 --- a/packages/ui/src/components/icon/Icon.tsx +++ b/packages/ui/src/components/icon/Icon.tsx @@ -30,6 +30,29 @@ function ensureSpriteOnce() { spriteInjected = true } +/** + * Append a single missing symbol. Needed when the sprite was injected before a + * newly generated icon landed (HMR / late sprite regenerate) — a one-shot inject + * would otherwise leave `` pointing at nothing. + */ +function ensureSpriteSymbol(name: IconName) { + if (typeof document === "undefined") return + ensureSpriteOnce() + if (document.getElementById(`oc-${name}`)) return + + const content = iconSpriteData[name] + if (typeof content !== "string") return + + const sprite = document.getElementById(SPRITE_ID) + if (!sprite) return + + const symbol = document.createElementNS("http://www.w3.org/2000/svg", "symbol") + symbol.id = `oc-${name}` + symbol.setAttribute("viewBox", "0 0 24 24") + symbol.innerHTML = content + sprite.appendChild(symbol) +} + export interface IconProps extends React.ComponentPropsWithoutRef<"svg"> { name: IconName } @@ -38,7 +61,7 @@ export const Icon = React.memo(({ name, className, ...rest }: IconProps) => { // Inline sprite injection during render – must run before tries // to resolve the #oc-* reference during the same commit. if (typeof document !== "undefined") { - ensureSpriteOnce() + ensureSpriteSymbol(name) } return (