使用我的 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'