next.js 画像が読み込めない

Question

開発環境
・ next.js
・ typescript
・ styled-components

画像を読み込みたいのですがうまく表示されません。
画像ファイルは
srcと同じ階層のpublic/images/icon.svgです

next.jsの環境で画像を読み込むときは何か設定しないといけないことがあるのでしょうっか
わかる人いましたらご教授お願いいたします

 // packege.json
{
  "name": "next-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.4.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.18",
    "@types/react": "^16.9.41",
    "@types/styled-components": "^5.1.0",
    "babel-plugin-styled-components": "^1.10.7",
    "typescript": "^3.9.6"
  }
}

Answer 1

Next.jsの初期設定ではSVGを読み込むことは出来ないので、 babel-plugin-inline-react-svg などを追加する必要があります。