feat(demo-app): use our atomic loader instead of babel transform for imports

Author: Hotell

packages/icon-transform-demo/babel.config.js

@@ -8,18 +8,18 @@ module.exports = {
     '@babel/preset-typescript',
   ],
   plugins: [
-    [
-      'transform-imports',
-      {
-        '@fluentui/react-icons': {
-          // Rewrites barrel imports to atomic SVG imports:
-          //   import { AddRegular } from '@fluentui/react-icons'
-          //   → import { AddRegular } from '@fluentui/react-icons/svg/add'
-          transform: (importName) => resolveFluentIconImport(importName, 'svg-sprite'),
-          preventFullImport: false,
-          skipDefaultConversion: true,
-        },
-      },
-    ],
+    // [
+    //   'transform-imports',
+    //   {
+    //     '@fluentui/react-icons': {
+    //       // Rewrites barrel imports to atomic SVG imports:
+    //       //   import { AddRegular } from '@fluentui/react-icons'
+    //       //   → import { AddRegular } from '@fluentui/react-icons/svg/add'
+    //       transform: (importName) => resolveFluentIconImport(importName, 'svg-sprite'),
+    //       preventFullImport: false,
+    //       skipDefaultConversion: true,
+    //     },
+    //   },
+    // ],
   ],
 };

packages/icon-transform-demo/webpack.config.js

@@ -25,7 +25,14 @@ module.exports = {
       {
         test: /\.[mc]?[jt]sx?$/,
         enforce: 'pre',
-        use: ['@fluentui/react-icons-atomic-webpack-loader'],
+        use: [
+          {
+            loader: '@fluentui/react-icons-atomic-webpack-loader',
+            options: {
+              iconVariant: 'svg',
+            },
+          },
+        ],
       },
       {
         test: /\.tsx?$/,