feat: prefer resizable Fluent icons

.storybook/react-icons-font.css

@@ -0,0 +1,6 @@
+/* Prevent inherited text weight from synthetically bolding font icons.
+ * TODO: Remove when https://github.com/microsoft/fluentui-system-icons/issues/1235 is fixed.
+ */
+:where([data-fui-icon]) {
+  font-weight: normal;
+}

.storybook/react-icons-webpack.js

@@ -0,0 +1,108 @@
+// @ts-check
+
+const FluentUIReactIconsFontSubsettingPlugin = require('@fluentui/react-icons-font-subsetting-webpack-plugin').default;
+
+const FONT_ICON_VARIANT = 'fonts';
+const iconLoader = require.resolve('@fluentui/react-icons-atomic-webpack-loader');
+const headlessBaseStyles = require.resolve('@fluentui/react-icons/headless/styles.css');
+const headlessFontStyles = require.resolve('@fluentui/react-icons/headless/fonts/styles.css');
+const fontIconStyles = require.resolve('./react-icons-font.css');
+
+/** @typedef {string | string[] | import('webpack').EntryObject} ResolvedEntry */
+
+/**
+ * @param {ResolvedEntry} entry
+ * @param {string[]} imports
+ * @returns {ResolvedEntry}
+ */
+function prependEntryImports(entry, imports) {
+  if (typeof entry === 'string') {
+    return [...imports, entry];
+  }
+
+  if (Array.isArray(entry)) {
+    return [...imports, ...entry];
+  }
+
+  if (entry && typeof entry === 'object') {
+    return Object.fromEntries(
+      Object.entries(entry).map(([name, value]) => {
+        if (typeof value === 'string' || Array.isArray(value)) {
+          return [name, prependEntryImports(value, imports)];
+        }
+
+        if (value && typeof value === 'object') {
+          return [name, { ...value, import: prependEntryImports(value.import ?? [], imports) }];
+        }
+
+        return [name, value];
+      }),
+    );
+  }
+
+  return entry;
+}
+
+/**
+ * Configures atomic Fluent icon imports for Storybook.
+ * Set FLUENTUI_ICON_VARIANT=fonts to use subsetted font icons; SVG atoms are the default.
+ *
+ * @see https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md
+ * @see https://github.com/microsoft/fluentui-system-icons/tree/main/packages/react-icons-font-subsetting-webpack-plugin
+ *
+ * @param {{ config: import('webpack').Configuration; headless?: boolean }} options
+ */
+function configureReactIcons(options) {
+  const { config, headless = false } = options;
+  const useFontIcons = process.env.FLUENTUI_ICON_VARIANT === FONT_ICON_VARIANT;
+
+  config.module ??= {};
+  config.module.rules ??= [];
+  config.module.rules.push({
+    test: /\.[mc]?[jt]sx?$/,
+    enforce: 'pre',
+    use: [
+      {
+        loader: iconLoader,
+        options: {
+          iconVariant: useFontIcons ? 'fonts' : 'svg',
+          fallbackVariant: 'svg',
+          headless,
+        },
+      },
+    ],
+  });
+
+  if (useFontIcons) {
+    config.module.rules.push({
+      test: /\.(ttf|woff2?)$/,
+      type: 'asset',
+    });
+    config.plugins ??= [];
+    config.plugins.push(new FluentUIReactIconsFontSubsettingPlugin());
+  }
+
+  const styleImports = [];
+  if (headless) {
+    styleImports.push(headlessBaseStyles);
+  }
+  if (useFontIcons) {
+    if (headless) {
+      styleImports.push(headlessFontStyles);
+    }
+    styleImports.push(fontIconStyles);
+  }
+
+  if (styleImports.length > 0) {
+    const originalEntry = config.entry;
+
+    config.entry = async () => {
+      const entry = typeof originalEntry === 'function' ? await originalEntry() : originalEntry;
+      return prependEntryImports(entry ?? [], styleImports);
+    };
+  }
+
+  return config;
+}
+
+module.exports = { configureReactIcons };

apps/public-docsite-v9-headless/.storybook/main.js

@@ -1,5 +1,6 @@
 const headlessMain = require('../../../packages/react-components/react-headless-components-preview/stories/.storybook/main');
 const { registerRules, rules } = require('@fluentui/scripts-storybook');
+const { configureReactIcons } = require('../../../.storybook/react-icons-webpack');
 
 module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...headlessMain,
@@ -18,6 +19,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     if (process.env.REACT_COMPILER) {
       registerRules({ rules: rules.reactCompilerRule, config: localConfig });
     }
+    configureReactIcons({ config: localConfig, headless: true });
 
     return localConfig;
   },

apps/public-docsite-v9-headless/project.json

@@ -6,6 +6,12 @@
   "tags": ["platform:web", "vNext"],
   "targets": {
     "build-storybook": {
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        { "env": "FLUENTUI_ICON_VARIANT" }
+      ],
       "dependsOn": [
         {
           "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"],
@@ -20,7 +26,12 @@
           "target": "build"
         }
       ],
-      "inputs": ["default", "{workspaceRoot}/.storybook/**", "{projectRoot}/.storybook/**"]
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        { "env": "FLUENTUI_ICON_VARIANT" }
+      ]
     }
   }
 }

apps/public-docsite-v9/.storybook/main.js

@@ -2,6 +2,7 @@ const path = require('path');
 const { getPackageStoriesGlob, registerTsPaths, rules, registerRules } = require('@fluentui/scripts-storybook');
 
 const rootMain = require('../../../.storybook/main');
+const { configureReactIcons } = require('../../../.storybook/react-icons-webpack');
 
 const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json');
 
@@ -59,6 +60,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
       rules: [rules.scssRule, ...(process.env.REACT_COMPILER ? rules.reactCompilerRule : [])],
       config: localConfig,
     });
+    configureReactIcons({ config: localConfig });
 
     return localConfig;
   },

apps/public-docsite-v9/project.json

@@ -6,6 +6,12 @@
   "tags": ["platform:web", "vNext"],
   "targets": {
     "build-storybook": {
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        { "env": "FLUENTUI_ICON_VARIANT" }
+      ],
       "dependsOn": [
         {
           "projects": [
@@ -21,7 +27,12 @@
       ]
     },
     "build-storybook:docsite": {
-      "inputs": ["default", "{workspaceRoot}/.storybook/**", "{projectRoot}/.storybook/**"],
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        { "env": "FLUENTUI_ICON_VARIANT" }
+      ],
       "outputs": ["{projectRoot}/dist/react"],
       "executor": "nx:noop",
       "dependsOn": [

apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Button, Tooltip } from '@fluentui/react-components';
 
-import { TextItalic24Regular, TextUnderline24Regular, TextBold24Regular } from '@fluentui/react-icons';
+import { TextItalicRegular, TextUnderlineRegular, TextBoldRegular } from '@fluentui/react-icons';
 
 import { Scenario } from './utils';
 
@@ -12,15 +12,15 @@ export const ButtonsWithTooltip: React.FunctionComponent = () => {
       <h1>Tooltip variants</h1>
       <h2>Tooltips for text formatting icon-only buttons</h2>
       <Tooltip relationship="label" content="Make text bold">
-        <Button icon={<TextBold24Regular />} />
+        <Button icon={<TextBoldRegular />} />
       </Tooltip>
 
       <Tooltip relationship="label" content="Make text underline">
-        <Button icon={<TextUnderline24Regular />} />
+        <Button icon={<TextUnderlineRegular />} />
       </Tooltip>
 
       <Tooltip relationship="label" content="Make text italic">
-        <Button icon={<TextItalic24Regular />} />
+        <Button icon={<TextItalicRegular />} />
       </Tooltip>
 
       <h2>Tooltip as an additional button description</h2>

apps/public-docsite-v9/src/Concepts/Accessibility/LabellingExamples/Examples.stories.tsx

@@ -15,7 +15,7 @@ import {
   Divider,
   makeStyles,
 } from '@fluentui/react-components';
-import { Send24Regular, Mic24Regular, PeopleRegular, PersonDelete24Regular } from '@fluentui/react-icons';
+import { SendRegular, MicRegular, PeopleRegular, PersonDeleteRegular } from '@fluentui/react-icons';
 import { FluentWapper } from './FluentUiWrapper.stories';
 
 const useStyles = makeStyles({
@@ -33,23 +33,23 @@ const useStyles = makeStyles({
 
 export const ActionAvoidBad = () => (
   <FluentWapper>
-    <Button aria-label="Click here to send message " size="small" icon={<Send24Regular />} />
+    <Button aria-label="Click here to send message " size="small" icon={<SendRegular />} />
   </FluentWapper>
 );
 export const ActionAvoidGood = () => (
   <FluentWapper>
-    <Button aria-label="Send message" size="small" icon={<Send24Regular />} />
+    <Button aria-label="Send message" size="small" icon={<SendRegular />} />
   </FluentWapper>
 );
 
 export const ComponentTypeAvoidBad = () => (
   <FluentWapper>
-    <Button aria-label="Mute microphone button" size="small" icon={<Mic24Regular />} />
+    <Button aria-label="Mute microphone button" size="small" icon={<MicRegular />} />
   </FluentWapper>
 );
 export const ComponentTypeAvoidGood = () => (
   <FluentWapper>
-    <Button aria-label="Mute microphone" size="small" icon={<Mic24Regular />} />
+    <Button aria-label="Mute microphone" size="small" icon={<MicRegular />} />
   </FluentWapper>
 );
 
@@ -205,7 +205,7 @@ export const ReuseVisibleTextBad = () => {
       <div className={styles.visibleTextContainer}>
         <Avatar />
         <span>Robert Tolbert</span>
-        <Button icon={<PersonDelete24Regular />} aria-label="Remove Robert Tolbert" />
+        <Button icon={<PersonDeleteRegular />} aria-label="Remove Robert Tolbert" />
       </div>
     </FluentWapper>
   );
@@ -220,7 +220,7 @@ export const ReuseVisibleTextGood = () => {
         <Avatar />
         <span id="userNameId">Robert Tolbert</span>
         <Button
-          icon={<PersonDelete24Regular />}
+          icon={<PersonDeleteRegular />}
           aria-label="Remove"
           id="removeButtonId"
           aria-labelledby="removeButtonId userNameId"

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardFooter.mdx

@@ -61,7 +61,7 @@ After:
 ```tsx
 import * as React from 'react';
 import { Button, Card, CardFooter, makeStyles, shorthands } from '@fluentui/react-components';
-import { Pin20Regular, Share20Regular, ServiceBell20Regular, Eye20Regular } from '@fluentui/react-icons';
+import { PinRegular, ShareRegular, ServiceBellRegular, EyeRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   card: {
@@ -97,16 +97,16 @@ export const Default = () => {
         action={
           views > 0 ? (
             <span className={styles.actions}>
-              <Eye20Regular aria-hidden />
+              <EyeRegular aria-hidden />
               <span>{views}</span>
               <span className={styles.visuallyHidden}> views</span>
             </span>
           ) : undefined
         }
       >
-        <Button appearance="transparent" icon={<Share20Regular />} aria-label="Share document" />
-        <Button appearance="transparent" icon={<Pin20Regular />} aria-label="Pin document" />
-        <Button appearance="transparent" icon={<ServiceBell20Regular />} aria-label="Manage document notifications" />
+        <Button appearance="transparent" icon={<ShareRegular />} aria-label="Share document" />
+        <Button appearance="transparent" icon={<PinRegular />} aria-label="Pin document" />
+        <Button appearance="transparent" icon={<ServiceBellRegular />} aria-label="Manage document notifications" />
       </CardFooter>
     </Card>
   );

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.mdx

@@ -113,7 +113,7 @@ An equivalent `RadioGroup` implementation:
 import * as React from 'react';
 import { makeStyles, shorthands, Label, Radio, RadioGroup } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
-import { AnimalCat24Regular } from '@fluentui/react-icons';
+import { AnimalCatRegular } from '@fluentui/react-icons';
 
 const useIconOptionStyles = makeStyles({
   root: {
@@ -155,7 +155,7 @@ const RadioGroupCustomOptionExample = () => {
               className: labelStyles.root,
               children: (
                 <>
-                  A <AnimalCat24Regular />
+                  A <AnimalCatRegular />
                 </>
               ),
             }}

apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react';
 import { Steps } from 'storywright';
-import {
-  Breadcrumb,
-  BreadcrumbButton,
-  BreadcrumbProps,
-  BreadcrumbItem,
-  BreadcrumbDivider,
-} from '@fluentui/react-breadcrumb';
-import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular } from '@fluentui/react-icons';
-const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
+import type { BreadcrumbProps } from '@fluentui/react-breadcrumb';
+import { Breadcrumb, BreadcrumbButton, BreadcrumbItem, BreadcrumbDivider } from '@fluentui/react-breadcrumb';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export const steps = new Steps()
   .snapshot('default')