diff --git a/packages/react/plugins/webpack.ts b/packages/react/plugins/webpack.ts
index ea7157ae76eff1..b2d2040d5917ff 100644
--- a/packages/react/plugins/webpack.ts
+++ b/packages/react/plugins/webpack.ts
@@ -5,42 +5,29 @@ import ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 export function getWebpackConfig(config: Configuration) {
   config.module.rules.push({
     test: /\.svg$/,
-    oneOf: [
-      // If coming from JS/TS or MDX file, then transform into React component using SVGR.
+    issuer: /\.(js|ts|md)x?$/,
+    use: [
       {
-        issuer: /\.(js|ts|md)x?$/,
-        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]',
-              esModule: false,
-            },
-          },
-        ],
+        loader: require.resolve('@svgr/webpack'),
+        options: {
+          svgo: false,
+          titleProp: true,
+          ref: true,
+        },
       },
-      // Fallback to plain URL loader.
       {
-        use: [
-          {
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000, // 10kB
-              name: '[name].[hash:7].[ext]',
-            },
-          },
-        ],
+        loader: require.resolve('url-loader'),
+        options: {
+          limit: 10000, // 10kB
+          name: '[name].[hash:7].[ext]',
+          esModule: false,
+        },
       },
     ],
+  }, {
+    test: /\.svg$/,
+    issuer: /\.(css|scss|less|sass|styl|stylus)?$/,
+    type: 'assets/resource'
   });
 
   if (config.mode === 'development' && config['devServer']?.hot) {