将SVG添加到Next.js

Question

我正在尝试将SVG添加到我的nextjs应用程序中，但似乎无法正常工作。 我正在尝试添加一个webpack加载器。

Webpack配置：

const path = require('path');
module.exports = {
  webpack: (config) => {
    config.resolve.alias['components'] = path.join(__dirname, 'components');
    config.resolve.alias['public'] = path.join(__dirname, 'public');
    config.resolve.alias['context'] = path.join(
      __dirname,
      'global/context/GlobalContext'
    );
    config.module.rules.push({
      test: /\.svg/,
      use: [
        {
          loader: 'file-loader',
        },
      ],
    })
    return config;
  },
};

我如何在项目中尝试使用SVG（在组件中而不是下一个js页面中）

import mySvg from '../../public/modphone.svg'
<img src={mySvg} />