diff --git a/packages/next/plugins/with-nx.ts b/packages/next/plugins/with-nx.ts
index f55667b34e009..87d2949858772 100644
--- a/packages/next/plugins/with-nx.ts
+++ b/packages/next/plugins/with-nx.ts
@@ -333,40 +333,22 @@ export function getNextConfig(
 
       // Default SVGR support to be on for projects.
       if (nx?.svgr !== false) {
-        config.module.rules.push({
-          test: /\.svg$/,
-          oneOf: [
-            // If coming from JS/TS file, then transform into React component using SVGR.
-            {
-              issuer: /\.[jt]sx?$/,
-              use: [
-                {
-                  loader: require.resolve('@svgr/webpack'),
-                  options: {
-                    svgo: false,
-                    titleProp: true,
-                    ref: true,
-                  },
-                },
-                {
-                  loader: require.resolve('url-loader'),
-                  options: {
-                    limit: 10000, // 10kB
-                    name: '[name].[hash:7].[ext]',
-                  },
-                },
-              ],
-            },
-            // Fallback to plain URL loader if someone just imports the SVG and references it on the <img src> tag
-            {
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: 10000, // 10kB
-                name: '[name].[hash:7].[ext]',
-              },
-            },
-          ],
-        });
+        config.module.rules.push(
+          // Apply rule for svg imports ending in ?url
+          {
+            test: /\.svg$/i,
+            type: 'asset',
+            resourceQuery: /url/, // apply to *.svg?url
+          },
+
+          // Convert all other svg imports to React components
+          {
+            test: /\.svg$/i,
+            issuer: /\.[jt]sx?$/,
+            resourceQuery: { not: [/url/] },
+            use: ['@svgr/webpack'],
+          }
+        );
       }
 
       return userWebpack(config, options);