Nucleo icons missing styles fix

icon-wrapper.tsx

"use client";

import { useEffect, useId, useRef } from "react";

type IconWrapperProps = {
  IconComponent: React.ComponentType<{ className?: string }>;
  className?: string;
};

/**
 * Clones nucleo-glass SVG and rewrites gradient/filter/mask IDs to be unique.
 * This prevents gradient ID conflicts when the same icon renders in desktop + mobile portal.
 */
export function IconWrapper({ IconComponent, className }: IconWrapperProps) {
  const uniqueId = useId().replace(/:/g, "-");
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) {
      return;
    }

    const svg = containerRef.current.querySelector("svg");
    if (!svg) {
      return;
    }

    // Find all defs and update IDs
    const defs = svg.querySelector("defs");
    if (!defs) {
      return;
    }

    const idMap = new Map<string, string>();

    // Update IDs in defs
    const elementsWithIds = defs.querySelectorAll("[id]");
    for (const el of elementsWithIds) {
      const oldId = el.getAttribute("id");
      if (oldId) {
        const newId = `${uniqueId}-${oldId}`;
        idMap.set(oldId, newId);
        el.setAttribute("id", newId);
      }
    }

    // Update references to those IDs
    const allElements = svg.querySelectorAll("*");
    for (const el of allElements) {
      for (const attr of ["fill", "stroke", "filter", "mask", "clip-path"]) {
        const value = el.getAttribute(attr);
        if (value?.includes("url(#")) {
          let newValue = value;
          for (const [oldId, newId] of idMap) {
            newValue = newValue.replace(`url(#${oldId})`, `url(#${newId})`);
          }
          el.setAttribute(attr, newValue);
        }
      }
    }
  }, [uniqueId]);

  return (
    <div ref={containerRef}>
      <IconComponent className={className} />
    </div>
  );
}