separate handling of stripes-components and application icons

Icons in stripes-components are imported as components whereas those in applications are just resources, so we need to load them differently.
folio-org · Dec 4, 2024 · 12613ed · 12613ed
1 parent 42cac16
commit 12613ed
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/webpack.config.federate.remote.js b/webpack.config.federate.remote.js
@@ -92,14 +92,24 @@ const buildConfig = (metadata) => {
             filename: './img/[name].[contenthash].[ext]',
           },
         },
+        // {
+        //   test: /\.svg$/,
+        //   use: [{
+        //     loader: 'url-loader',
+        //     options: {
+        //       esModule: false,
+        //     },
+        //   }]
+        // },
         {
           test: /\.svg$/,
-          use: [{
-            loader: 'url-loader',
-            options: {
-              esModule: false,
-            },
-          }]
+          type: 'asset/inline',
+          resourceQuery: { not: /icon/ } // exclude built-in icons from stripes-components which are loaded as react components.
+        },
+        {
+          test: /\.svg$/,
+          resourceQuery: /icon/, // stcom icons use this query on the resource.
+          use: ['@svgr/webpack']
         },
         {
           test: /\.js.map$/,