tanem / react-svg

:art: A React component that injects SVG into the DOM.
https://npm.im/react-svg
MIT License
829 stars 92 forks source link

react-svg ssr compatibility with nextJs v14 App router #2888

Open darktell opened 6 months ago

darktell commented 6 months ago

It doesn't work as server component in new nextJs App Router. Only with "use client" I wrote simple component, and get error image

without turbo get this error

image

const Icon: FC<Props> = ({
  icon,
  svgClassName,
  alt,
  size = 20,
  width,
  height,
  role,
}) => {
  const src = `/images/icons/${icon}.svg`;

  const iconWidth = width ?? size;
  const iconHeight = height ?? size;

  return (
    <>
      <ReactSVG
        role={role || "presentation"}
        src={src}
        width={iconWidth}
        height={iconHeight}
        className={svgClassName}
        // evalScripts="always"
        fallback={() => <span>!</span>}
        title={alt || "icon"}
      />
    </>
  );
};

export default Icon;

honestly I think it can't be a server component because SVGInjector use document.. But just wanna get some thoughts about that