使用我的 SVG 的材料圖標 SvgIcon 問題

Question

我正在下一個 js 中創建一個應用程序？ 這里我想在材質圖標SvgIcon組件中使用自定義 svg。 但我面臨一些問題。

在下一個 config.js 中：

const optimizedImages = require('next-optimized-images');
module.exports = optimizedImages({
  images: {
    disableStaticImages: true,
  },
  env: {
    basePath: 'http://localhost:3000',
    ApiUrl: "http://localhost:3001/graphql",
  },
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })
    return config
  },
});

這是我的組件：

import { Container, Box } from "@mui/material";
import { SvgIcon } from "@mui/icons-material";
import StartIcon from "/Icon.svg";
const Header = () => {
    return (
        <Container maxWidth={false}>
            <Box>
                <SvgIcon component={StartIcon} viewBox="0 0 600 476.6" />
            </Box>
        </Container>
    );
};
export default Header;

在這里，我將Icon.svg放在公共文件夾中。 我收到這樣的錯誤：

我也嘗試以這種方式導入：

import StartIcon from "./Icon.svg";
import StartIcon from "../Icon.svg";
import StartIcon from "Icon.svg";

但得到同樣的錯誤，這是我的文件夾結構：

Answer 1

將Icon.svg文件放入src/Assets文件夾。 然后從Header.js訪問如下：

import StartIcon from '../Assets/Icon.svg'