From 12613edc917b79e2acabd69a564df1ceaf65f666 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Wed, 4 Dec 2024 14:54:26 -0500
Subject: [PATCH] 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.
---
 webpack.config.federate.remote.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/webpack.config.federate.remote.js b/webpack.config.federate.remote.js
index afb8932..5ccab6a 100644
--- 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$/,