@svgr/webpack is not working with this package

[SolidZORO]

do you have code examples?

[thaitanloi365]

const withPlugins = require('next-compose-plugins');
const withNextTranslate = require('next-translate');

const withAntdLess = require('next-plugin-antd-less')({
  lessVarsFilePath: './src/styles/vars.less',
  lessVarsFilePathAppendToEndOfContent: true,
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {
    modules: {
      localIdentName: process.env.MODE !== 'production' ? '[folder]__[local]__[hash:4]' : '[hash:8]',
    },
  },
});

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

const nextConfig = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.svg?$/,
      oneOf: [
        {
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                prettier: false,
                svgo: true,
                svgoConfig: {
                  plugins: [{ removeViewBox: false }],
                },
                titleProp: true,
              },
            },
          ],
          issuer: {
            and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
          },
        },
      ],
    });
    return config;
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  future: {
    strictPostcssConfiguration: true,
  },
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  }
};

module.exports = withPlugins([withBundleAnalyzer, withAntdLess, withNextTranslate], nextConfig);

Then I imported a SVG, the SVG is a static image instead of SVG ( because @svg/webpack doesn't affect ). I tried to setup another project without your lib, and it worked correctly

import ArrowDownIcon from '/src/assets/svg/arrow-down.svg';

console.log('*** ArrowDownIcon', ArrowDownIcon);
*** ArrowDownIcon {
  src: '/_next/static/image/src/assets/svg/arrow-down.76d9edcb38b215064e0dad54401393c1.svg',
  height: 16,
  width: 16
}

[thaitanloi365]

@SolidZORO Hi, I have set up a sample to reproduce this issue.

https://codesandbox.io/s/naughty-antonelli-1cmwq?file=/pages/index.js

Thanks.

[SolidZORO]

The solution:

ref: https://github.com/vercel/next.js/tree/canary/examples/svg-components

demo: https://mkn.vercel.app/test/svg-image src: https://github.com/SolidZORO/mkn/blob/master/src/page-components/test/TestSvgImage/TestSvgImage.tsx

[yunsii]

@SolidZORO It's looks like still not work with @svgr/webpack, use babel-plugin-inline-react-svg instead?