feat(react-icons): enable /headless and /svg-sprite api

nx.json

@@ -17,6 +17,7 @@
         "projects": [
           "packages/react-icons",
           "packages/react-icons-font-subsetting-webpack-plugin",
+          "packages/react-icons-svg-sprite-subsetting-webpack-plugin",
           "packages/react-native-icons"
         ],
         "projectsRelationship": "independent"

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

@@ -0,0 +1,25 @@
+// @ts-check
+const { resolveFluentIconImport } = require('./fluent-icons-transform');
+
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { esmodules: true }, modules: false }],
+    ['@babel/preset-react', { runtime: 'classic' }],
+    '@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,
+    //     },
+    //   },
+    // ],
+  ],
+};

packages/icon-transform-demo/fluent-icons-transform.js

@@ -0,0 +1,30 @@
+// @ts-check
+
+// NOTE: this is not used anymore - we use our new webpack loader
+
+/**
+ * Resolves a @fluentui/react-icons import name to its atomic module path.
+ * @param {string} importName - The named export being imported.
+ * @param {'svg' | 'svg-sprite' | 'fonts'} [target='svg'] - The target subpath (e.g. 'svg', 'svg-sprite', 'fonts',
+ *   'base/svg', 'base/svg-sprite', 'base/fonts').
+ * @returns {string} The resolved module path.
+ */
+function resolveFluentIconImport(importName, target = 'svg') {
+  if (importName === 'useIconContext' || importName === 'IconDirectionContextProvider') {
+    return '@fluentui/react-icons/providers';
+  }
+
+  const match = importName.match(/^(.+?)(\d+)?(Regular|Filled|Light|Color)$/);
+  if (!match) {
+    return '@fluentui/react-icons/utils';
+  }
+
+  return `@fluentui/react-icons/${target}/${kebabCase(match[1])}`;
+}
+
+/** Simplified lodash.kebabCase – handles PascalCase icon names with digits. */
+function kebabCase(/** @type {string} */ str) {
+  return str.replace(/[a-z\d](?=[A-Z])|[a-zA-Z](?=\d)|[A-Z](?=[A-Z][a-z])/g, '$&-').toLowerCase();
+}
+
+module.exports = { resolveFluentIconImport };

packages/icon-transform-demo/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "icon-transform-demo",
+  "version": "1.0.0",
+  "description": "Demo app for @fluentui/react-icons with babel-plugin-transform-imports showcase",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "clean": "git clean -fXd dist/",
+    "build": "webpack",
+    "dev": "webpack serve --open"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@fluentui/react-icons-font-subsetting-webpack-plugin": "*",
+    "@fluentui/react-icons-svg-sprite-subsetting-webpack-plugin": "*",
+    "@fluentui/react-icons-atomic-webpack-loader": "*",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
+    "babel-loader": "^9.2.1",
+    "babel-plugin-transform-imports": "^2.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "typescript": "5.0.4",
+    "webpack": "^5.100.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
+  },
+  "dependencies": {
+    "@fluentui/react-icons": "*",
+    "@griffel/react": "1.6.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  }
+}

packages/icon-transform-demo/project.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "name": "icon-transform-demo",
+  "projectType": "application",
+  "sourceRoot": "packages/icon-transform-demo/src",
+  "tags": [],
+  "targets": {}
+}

packages/icon-transform-demo/src/app.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import { makeStyles } from '@griffel/react';
+
+// ----------------------------------------------------------------
+// All imports below use the barrel entry `@fluentui/react-icons`.
+// At build time, `@fluentui/react-icons-atomic-webpack-loader`
+// rewrites each named import to its atomic module path, e.g.:
+//   import { AddRegular } from '@fluentui/react-icons'
+//   → import { AddRegular } from '@fluentui/react-icons/svg/add'
+// ----------------------------------------------------------------
+import {
+  AccessTimeRegular,
+  AccessTimeFilled,
+  AccessibilityRegular,
+  AccessibilityFilled,
+  AddRegular,
+  AddFilled,
+  AddCircleRegular,
+  AddCircleFilled,
+  AgentsRegular,
+  AgentsFilled,
+  AirplaneRegular,
+  AirplaneFilled,
+  AlertRegular,
+  AlertFilled,
+  AlbumRegular,
+  AlbumFilled,
+  AlignLeftRegular,
+  AlignLeftFilled,
+  AnimalCatRegular,
+  AnimalCatFilled,
+  bundleIcon,
+  iconFilledClassName,
+  iconRegularClassName,
+} from '@fluentui/react-icons';
+
+// import { AccessTimeRegular as AccessTimeRegularHeadless } from '@fluentui/react-icons/headless/svg/access-time';
+
+// ---------- compound (bundled) icons ----------
+const AccessTime = bundleIcon(AccessTimeFilled, AccessTimeRegular);
+const Accessibility = bundleIcon(AccessibilityFilled, AccessibilityRegular);
+const Add = bundleIcon(AddFilled, AddRegular);
+const AddCircle = bundleIcon(AddCircleFilled, AddCircleRegular);
+const Agents = bundleIcon(AgentsFilled, AgentsRegular);
+const Airplane = bundleIcon(AirplaneFilled, AirplaneRegular);
+const Alert = bundleIcon(AlertFilled, AlertRegular);
+const Album = bundleIcon(AlbumFilled, AlbumRegular);
+const AlignLeft = bundleIcon(AlignLeftFilled, AlignLeftRegular);
+const AnimalCat = bundleIcon(AnimalCatFilled, AnimalCatRegular);
+
+type IconEntry = { Icon: ReturnType<typeof bundleIcon>; name: string };
+
+const icons: IconEntry[] = [
+  { Icon: AccessTime, name: 'AccessTime' },
+  { Icon: Accessibility, name: 'Accessibility' },
+  { Icon: Add, name: 'Add' },
+  { Icon: AddCircle, name: 'AddCircle' },
+  { Icon: Agents, name: 'Agents' },
+  { Icon: Airplane, name: 'Airplane' },
+  { Icon: Alert, name: 'Alert' },
+  { Icon: Album, name: 'Album' },
+  { Icon: AlignLeft, name: 'AlignLeft' },
+  { Icon: AnimalCat, name: 'AnimalCat' },
+];
+
+// ---------- styles ----------
+const useStyles = makeStyles({
+  grid: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '12px',
+    padding: '16px',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '110px',
+    height: '110px',
+    backgroundColor: '#f5f5f5',
+    borderRadius: '8px',
+    fontSize: '36px',
+    cursor: 'pointer',
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+    [`&:hover .${iconFilledClassName}`]: { display: 'inline' },
+    [`&:hover .${iconRegularClassName}`]: { display: 'none' },
+  },
+  label: {
+    fontSize: '11px',
+    marginTop: '6px',
+    textAlign: 'center',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '100px',
+  },
+  header: {
+    padding: '16px 16px 0',
+    fontFamily: 'system-ui, sans-serif',
+  },
+  subtitle: {
+    color: '#666',
+    fontSize: '14px',
+    fontWeight: 'normal',
+    marginTop: '4px',
+  },
+});
+
+// ---------- components ----------
+function IconCard({ Icon, name }: IconEntry) {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.card}>
+      <Icon />
+      <span className={styles.label}>{name}</span>
+    </div>
+  );
+}
+
+export function App() {
+  const styles = useStyles();
+
+  return (
+    <main>
+      <div className={styles.header}>
+        <h1>Fluent Icons — Transform Demo</h1>
+        <p className={styles.subtitle}>
+          20 icons (10 groups × Filled + Regular) imported via barrel entry.
+          <br />
+          <code>@fluentui/react-icons-atomic-webpack-loader</code> rewrites them to atomic paths at build time.
+        </p>
+      </div>
+      <div className={styles.grid}>
+        {icons.map(({ Icon, name }) => (
+          <IconCard key={name} Icon={Icon} name={name} />
+        ))}
+        {/* <IconCard Icon={AccessTimeRegularHeadless} name="AccessTimeRegular (headless)" /> */}
+      </div>
+    </main>
+  );
+}