feat(sidebar): implement new design [EE-3447] (#7118)

webpack/webpack.common.js

@@ -14,6 +14,7 @@ const CopyPlugin = require('copy-webpack-plugin');
 const pkg = require('../package.json');
 const projectRoot = path.resolve(__dirname, '..');
 
+/** @type {import('webpack').Configuration} */
 module.exports = {
   entry: {
     main: './app',
@@ -63,6 +64,21 @@ module.exports = {
         test: /.xml$/,
         type: 'asset/resource',
       },
+      {
+        test: /\.(gif|png|jpe?g)$/i,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.svg$/i,
+        type: 'asset',
+        resourceQuery: { not: [/c/] }, // exclude react component if *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.tsx?$/,
+        resourceQuery: /c/, // *.svg?c
+        use: [{ loader: '@svgr/webpack', options: { icon: true } }],
+      },
       {
         test: /\.css$/,
         use: [

webpack/webpack.develop.js

@@ -7,7 +7,7 @@ module.exports = merge(commonConfig, {
   module: {
     rules: [
       {
-        test: /\.(woff|woff2|eot|ttf|svg|ico|png|jpg|gif)$/,
+        test: /\.(woff|woff2|eot|ttf|ico)$/,
         type: 'asset/resource',
       },
     ],

webpack/webpack.production.js

@@ -10,10 +10,6 @@ module.exports = merge(commonConfig, {
         test: /\.(woff|woff2|eot|ttf|ico)$/,
         type: 'asset/inline',
       },
-      {
-        test: /\.(gif|png|jpe?g|svg)$/i,
-        type: 'asset/resource',
-      },
     ],
   },
 });