フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

react で svg を import して扱う

● vite + react の場合

import された .svg は string として扱われます。

import temperatureLogo from '/temperature.svg';

console.log('● temperatureLogo');
console.log(temperatureLogo);

temperatureLogo の中身

/temperature.svg

● next.js の場合

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"],

● next.js で import した svg を Reactコンポーネントとして扱う

https://medium.com/@selmankoral/how-to-fill-your-sgv-on-react-8d67b3517c14

No.2512
04/24 15:35

edit