feat(atomic-loader): add svg-sprite variant support

Author: Hotell

packages/react-icons-atomic-webpack-loader/README.md

@@ -63,9 +63,9 @@ module.exports = {
 
 ## Options
 
-| Option        | Type                 | Default | Description                                           |
-| ------------- | -------------------- | ------- | ----------------------------------------------------- |
-| `iconVariant` | `'svg'` \| `'fonts'` | `'svg'` | Whether icons resolve to SVG or font-based components |
+| Option        | Type                                   | Default | Description                                                        |
+| ------------- | -------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `iconVariant` | `'svg'` \| `'fonts'` \| `'svg-sprite'` | `'svg'` | Whether icons resolve to SVG, font-based, or SVG sprite components |
 
 ### Using font icons
 
@@ -86,15 +86,34 @@ module.exports = {
 
 This changes icon resolution from `@fluentui/react-icons/svg/*` to `@fluentui/react-icons/fonts/*`. Non-icon exports (`utils`, `providers`) are unaffected.
 
+### Using SVG sprite icons
+
+```js
+{
+  test: /\.[mc]?[jt]sx?$/,
+  enforce: 'pre',
+  use: [
+    {
+      loader: '@fluentui/react-icons-atomic-webpack-loader',
+      options: {
+        iconVariant: 'svg-sprite',
+      },
+    },
+  ],
+}
+```
+
+This changes icon resolution from `@fluentui/react-icons/svg/*` to `@fluentui/react-icons/svg-sprite/*`. Non-icon exports (`utils`, `providers`) are unaffected.
+
 ## How it works
 
 The loader uses a Babel transform to rewrite import and re-export declarations that reference `@fluentui/react-icons`. Each named specifier is routed to an atomic subpath based on its name:
 
-| Export type    | Example                                          | Resolved path                                     |
-| -------------- | ------------------------------------------------ | ------------------------------------------------- |
-| Icon component | `AddFilled`, `ArrowLeftRegular`                  | `@fluentui/react-icons/svg/add` (or `/fonts/add`) |
-| Context / hook | `useIconContext`, `IconDirectionContextProvider` | `@fluentui/react-icons/providers`                 |
-| Utility        | `bundleIcon`, `createFluentIcon`                 | `@fluentui/react-icons/utils`                     |
+| Export type    | Example                                          | Resolved path                                                        |
+| -------------- | ------------------------------------------------ | -------------------------------------------------------------------- |
+| Icon component | `AddFilled`, `ArrowLeftRegular`                  | `@fluentui/react-icons/svg/add` (or `/fonts/add`, `/svg-sprite/add`) |
+| Context / hook | `useIconContext`, `IconDirectionContextProvider` | `@fluentui/react-icons/providers`                                    |
+| Utility        | `bundleIcon`, `createFluentIcon`                 | `@fluentui/react-icons/utils`                                        |
 
 Files that don't reference `@fluentui/react-icons` are passed through untouched (fast regex pre-check).
 

packages/react-icons-atomic-webpack-loader/src/index.ts

@@ -4,7 +4,7 @@ import type { LoaderContext } from 'webpack';
 const REACT_ICONS_IMPORT_REGEX = /['"]@fluentui\/react-icons['";\s]/;
 
 export interface FluentIconsAtomicImportLoaderOptions {
-  iconVariant?: 'svg' | 'fonts';
+  iconVariant?: 'svg' | 'fonts' | 'svg-sprite';
 }
 
 export default function fluentIconsAtomicImportLoader(

packages/react-icons-atomic-webpack-loader/src/transform.ts

@@ -9,12 +9,12 @@ const MODULE_NAME = '@fluentui/react-icons';
 const ICON_SUFFIX_REGEX = /(\d*)?(Regular|Filled|Light|Color)$/;
 
 interface TransformOptions {
-  iconVariant: 'svg' | 'fonts';
+  iconVariant: 'svg' | 'fonts' | 'svg-sprite';
   isTypescript: boolean;
   isTsx: boolean;
 }
 
-function getAtomicImportPath(importName: string, iconVariant: 'svg' | 'fonts'): string {
+function getAtomicImportPath(importName: string, iconVariant: 'svg' | 'fonts' | 'svg-sprite'): string {
   if (importName === 'useIconContext' || importName === 'IconDirectionContextProvider') {
     return '@fluentui/react-icons/providers';
   }

packages/react-icons-atomic-webpack-loader/test/src/svg-sprite-imports.js

@@ -0,0 +1,4 @@
+import { AddFilled } from '@fluentui/react-icons';
+import { ArrowLeftRegular, bundleIcon } from '@fluentui/react-icons';
+
+console.log(AddFilled, ArrowLeftRegular, bundleIcon);

packages/react-icons-atomic-webpack-loader/test/webpack.config.js

@@ -39,6 +39,16 @@ const entries = {
     ],
     mustExclude: ['"@fluentui/react-icons"', '@fluentui/react-icons/svg/'],
   },
+  'svg-sprite-imports': {
+    src: './src/svg-sprite-imports.js',
+    loaderOptions: { iconVariant: 'svg-sprite' },
+    mustInclude: [
+      '@fluentui/react-icons/svg-sprite/add',
+      '@fluentui/react-icons/svg-sprite/arrow-left',
+      '@fluentui/react-icons/utils',
+    ],
+    mustExclude: ['"@fluentui/react-icons"', '@fluentui/react-icons/svg/', '@fluentui/react-icons/fonts/'],
+  },
 };
 
 /**