I've recently upgraded a project to Next.js 12.3.4 (from 11.x). I have some code that uses next/image to show an static .svg file. It work fined before the upgrade, but post-upgrade the browser is giving me this when it tries to render:

Unhandled Runtime Error
Error: Failed to parse src "//_next/static/media/Clear.9ce69912.svg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)

. The raw code I'm using is:

import Clear from "~/images/Clear.svg";
import Pencil from "~/images/YellowPencil.svg";
export function ReviewCommentIcon(props: { size: number; placeholder?: boolean }) {
  if (props.placeholder) {
    return <Image alt="No Review Comment" height={props.size} src={Clear} width={props.size} />;
  }
  return <Image alt="Review Comment" height={props.size} src={Pencil} width={props.size} />;
}

I tried changing the import path from using ~ to .. but it made no difference. I am not specifying a URL, that's being generated by the build process (SWC as far as I know), so I don't know how to fix this. Am I missing some SWC configuration/plugin?