feat(atomic-loader): support @fluentui/react-brand-icons

[micahgodbolt]

Problem

@fluentui/react-brand-icons (published from microsoftdesign/Design System/_git/fluent-product-icons) already ships atomic subpath exports (./svg/*), but the @fluentui/react-icons-atomic-webpack-loader is hardcoded to only transform @fluentui/react-icons barrel imports.

This forces consumers to either:

• Use barrel imports and pull the entire 340-icon bundle
• Manually rewrite every import to atomic paths
• Avoid the package entirely (which is what m365-copilot-nav in 1JS does today)

Key Insight: The Packages Are Nearly Identical

Feature	react-icons	react-brand-icons
Icon suffixes	Regular, Filled, Light, Color	Regular, Filled, Color
Atom path pattern	./svg/<kebab-name>	./svg/<kebab-name>
Utility exports	wrapIcon, bundleIcon, createFluentIcon, useIconState	Same
sideEffects	false	false
Suffix regex match	✅	✅ (subset — same regex works)

The existing ICON_SUFFIX_REGEX (/(\d*)?(Regular|Filled|Light|Color)$/) already matches brand icon names with zero changes.

Proposed Solution

Extend the existing loader (not a new package) with a modules option:

src/transform.ts

Replace hardcoded MODULE_NAME = '@fluentui/react-icons' with a configurable Set of module names. Pass the matched module name through to getAtomicImportPath so paths resolve correctly per-package.

src/index.ts

Add modules option (default: both packages). Update fast-path string check to test against all configured modules.

API (backward compatible)

{
  loader: '@fluentui/react-icons-atomic-webpack-loader',
  options: {
    // Default: ['@fluentui/react-icons', '@fluentui/react-brand-icons']
    // Opt out of brand-icons:
    modules: ['@fluentui/react-icons'],
  },
}

Before / After

// Input
import { AddFilled } from '@fluentui/react-icons';
import { WordColor } from '@fluentui/react-brand-icons';

// Output (after loader)
import { AddFilled } from '@fluentui/react-icons/svg/add';
import { WordColor } from '@fluentui/react-brand-icons/svg/word';

Implementation

I have a working implementation with all 25 tests passing (17 existing + 8 new). The diff is ~130 lines across 4 files:

• src/transform.ts — parameterize module name
• src/index.ts — add modules option, update fast-path
• test/transform.test.ts — 8 new tests
• README.md — document brand-icons + modules option

Happy to submit a PR if someone can point me to the right process (my EMU account can't fork this repo). I can share a git format-patch if helpful.

Motivation

1JS consumers (M365 Copilot, etc.) need brand icons but can't adopt them without atomic import support — the bundle cost of the barrel import is prohibitive.

[Hotell]

needs different design

[Hotell]

this is wrong, product icons has no provider, no utils export map

[Hotell]

this is bad design, product icons don't and wont support all iconVariants, so this api needs either better more generic design or handle the logic properly internally

[Hotell]

also FYI the chunk is tree shakeable, the atomizer purpose is primarily for 2 things:

• preventing dupes with chunks and lazy loading scenarios
• bundler speed processing / dev loop

[Hotell]

this is replaced #1113 feel free to close @micahgodbolt