import された .svg は string として扱われます。
import temperatureLogo from '/temperature.svg';
console.log('● temperatureLogo');
console.log(temperatureLogo);
temperatureLogo の中身
/temperature.svg
import された .svg は オブジェクト(any型) として扱われます。
import temperatureLogo from '/temperature.svg';
console.log('● temperatureLogo');
console.log(temperatureLogo);
temperatureLogo の中身
{
src: '/_next/static/media/temperature.2bfd6197.svg',
height: 800,
width: 800,
blurWidth: 0,
blurHeight: 0
}
ただしこのオブジェクトany型です
回避する場合は svg.d.ts を作成して tsconfig.json で読み込ませます
./src/types/svg.d.ts
interface ImportImageAttributes {
src: string;
height: number;
width: number;
placeholder?: string;
blurWidth?: string;
blurHeight?: string;
blurDataURL?: string;
};
declare module '*.svg' {
const content: ImportImageAttributes;
export default content;
}
"include": ["./src/types/svg.d.ts", "next-env.d.ts"],
https://medium.com/@selmankoral/how-to-fill-your-sgv-on-react-8d67b3517c14