Type declaration for `*.svg?url` in Next.js

[y-hsgw]

💬 Questions and Help

svgr/website/pages/docs/next.mdx

Lines 104 to 107 in 687dd2d

	declare module '*.svg?url' {
	const content: any
	export default content
	}

Would it be possible to declare this more strictly, for example using StaticImageData (or string | StaticImageData) instead of any?

declare module '*.svg?url' {
  import { type StaticImageData } from 'next/image'
  const content: string | StaticImageData
  export default content
}

I’d like to understand whether any is intentional, or if it would be acceptable to recommend a stricter type definition in the documentation.

[MiroslavPetrik]

Given

import a from "./illustration.svg?url";

export default async function Page() {
  console.log(a);

  return <Image src={a} />;
}

it logs

{
  src: '/_next/static/media/illustration.f2bd7a8e.svg',
  width: 620,
  height: 517,
  blurWidth: 0,
  blurHeight: 0
}

which fits the interface:

export interface StaticImageData {
    src: string;
    height: number;
    width: number;
    blurDataURL?: string;
    blurWidth?: number;
    blurHeight?: number;
}

So I would use just StaticImageData without the string:

declare module '*.svg?url' {
  import { type StaticImageData } from 'next/image'
  const content: StaticImageData
  export default content
}

In fact thats what next.js uses for *.png and other image types, and the *.svg is any, to not conflict the svgr plugin:

// next/image-types/global.d.ts

declare module '*.png' {
  const content: import('../dist/shared/lib/image-external').StaticImageData

  export default content
}

declare module '*.svg' {
  /**
   * Use `any` to avoid conflicts with
   * `@svgr/webpack` plugin or
   * `babel-plugin-inline-react-svg` plugin.
   */
  const content: any

  export default content
}