From c9bef2cac914722a1ceb60894f2a104a4c209d88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 25 Apr 2024 11:48:23 +0200
Subject: [PATCH] [material-ui][SvgIcon] Convert to support CSS extraction
 (#41779)

---
 .../src/app/material-ui/icons/page.tsx        | 72 ++++++++++++++++++
 .../src/pages/material-ui/icons.tsx           | 73 +++++++++++++++++++
 packages/mui-material/src/SvgIcon/SvgIcon.js  | 73 +++++++++++++------
 3 files changed, 197 insertions(+), 21 deletions(-)
 create mode 100644 apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
 create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx

diff --git a/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
new file mode 100644
index 00000000000000..a5a646c5635606
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
@@ -0,0 +1,72 @@
+'use client';
+import * as React from 'react';
+import CreateSvgIcon from '../../../../../../docs/data/material/components/icons/CreateSvgIcon';
+import FontAwesomeIcon from '../../../../../../docs/data/material/components/icons/FontAwesomeIcon';
+import FontAwesomeIconSize from '../../../../../../docs/data/material/components/icons/FontAwesomeIconSize';
+import FontAwesomeSvgIconDemo from '../../../../../../docs/data/material/components/icons/FontAwesomeSvgIconDemo';
+import Icons from '../../../../../../docs/data/material/components/icons/Icons';
+import SvgIconChildren from '../../../../../../docs/data/material/components/icons/SvgIconChildren';
+import SvgIconsColor from '../../../../../../docs/data/material/components/icons/SvgIconsColor';
+import SvgIconsSize from '../../../../../../docs/data/material/components/icons/SvgIconsSize';
+import SvgMaterialIcons from '../../../../../../docs/data/material/components/icons/SvgMaterialIcons';
+
+export default function IconsPage() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Create Svg Icon</h2>
+        <div className="demo-container">
+          <CreateSvgIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Icon</h2>
+        <div className="demo-container">
+          <FontAwesomeIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Icon Size</h2>
+        <div className="demo-container">
+          <FontAwesomeIconSize />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Svg Icon Demo</h2>
+        <div className="demo-container">
+          <FontAwesomeSvgIconDemo />
+        </div>
+      </section>
+      <section>
+        <h2> Icons</h2>
+        <div className="demo-container">
+          <Icons />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icon Children</h2>
+        <div className="demo-container">
+          <SvgIconChildren />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icons Color</h2>
+        <div className="demo-container">
+          <SvgIconsColor />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icons Size</h2>
+        <div className="demo-container">
+          <SvgIconsSize />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Material Icons</h2>
+        <div className="demo-container">
+          <SvgMaterialIcons />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
new file mode 100644
index 00000000000000..0839fd022f0bc9
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import CreateSvgIcon from '../../../../../docs/data/material/components/icons/CreateSvgIcon.tsx';
+import FontAwesomeIcon from '../../../../../docs/data/material/components/icons/FontAwesomeIcon.tsx';
+import FontAwesomeIconSize from '../../../../../docs/data/material/components/icons/FontAwesomeIconSize.tsx';
+import FontAwesomeSvgIconDemo from '../../../../../docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx';
+import Icons from '../../../../../docs/data/material/components/icons/Icons.tsx';
+import SvgIconChildren from '../../../../../docs/data/material/components/icons/SvgIconChildren.tsx';
+import SvgIconsColor from '../../../../../docs/data/material/components/icons/SvgIconsColor.tsx';
+import SvgIconsSize from '../../../../../docs/data/material/components/icons/SvgIconsSize.tsx';
+import SvgMaterialIcons from '../../../../../docs/data/material/components/icons/SvgMaterialIcons.tsx';
+
+export default function IconsPage() {
+  return (
+    <MaterialUILayout>
+      <h1>Icons</h1>
+      <section>
+        <h2> Create Svg Icon</h2>
+        <div className="demo-container">
+          <CreateSvgIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Icon</h2>
+        <div className="demo-container">
+          <FontAwesomeIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Icon Size</h2>
+        <div className="demo-container">
+          <FontAwesomeIconSize />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Svg Icon Demo</h2>
+        <div className="demo-container">
+          <FontAwesomeSvgIconDemo />
+        </div>
+      </section>
+      <section>
+        <h2> Icons</h2>
+        <div className="demo-container">
+          <Icons />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icon Children</h2>
+        <div className="demo-container">
+          <SvgIconChildren />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icons Color</h2>
+        <div className="demo-container">
+          <SvgIconsColor />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icons Size</h2>
+        <div className="demo-container">
+          <SvgIconsSize />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Material Icons</h2>
+        <div className="demo-container">
+          <SvgMaterialIcons />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
index e99c51e720f9a9..37774cfad0e027 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.js
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 
+const useThemeProps = createUseThemeProps('MuiSvgIcon');
+
 const useUtilityClasses = (ownerState) => {
   const { color, fontSize, classes } = ownerState;
 
@@ -34,32 +35,60 @@ const SvgIconRoot = styled('svg', {
       styles[`fontSize${capitalize(ownerState.fontSize)}`],
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   userSelect: 'none',
   width: '1em',
   height: '1em',
   display: 'inline-block',
-  // the <svg> will define the property that has `currentColor`
-  // for example heroicons uses fill="none" and stroke="currentColor"
-  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
-    duration: theme.transitions?.duration?.shorter,
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter,
   }),
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography?.pxToRem?.(20) || '1.25rem',
-    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875rem',
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color:
-    (theme.vars || theme).palette?.[ownerState.color]?.main ??
+  variants: [
+    {
+      props: (props) => !props.hasSvgAsChild,
+      style: {
+        // the <svg> will define the property that has `currentColor`
+        // for example heroicons uses fill="none" and stroke="currentColor"
+        fill: 'currentColor',
+      },
+    },
+    {
+      props: { fontSize: 'inherit' },
+      style: { fontSize: 'inherit' },
+    },
+    {
+      props: { fontSize: 'small' },
+      style: { fontSize: theme.typography?.pxToRem?.(20) || '1.25rem' },
+    },
+    {
+      props: { fontSize: 'medium' },
+      style: { fontSize: theme.typography?.pxToRem?.(24) || '1.5rem' },
+    },
+    {
+      props: { fontSize: 'large' },
+      style: { fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem' },
+    },
+    // TODO v5 deprecate color prop, v6 remove for sx
+    ...Object.entries((theme.vars ?? theme).palette)
+      .filter(([, value]) => value.main)
+      .map(([color]) => ({
+        props: { color },
+        style: { color: (theme.vars ?? theme).palette?.[color]?.main },
+      })),
+    {
+      props: { color: 'action' },
+      style: { color: (theme.vars ?? theme).palette?.action?.active },
+    },
+    {
+      props: { color: 'disabled' },
+      style: { color: (theme.vars ?? theme).palette?.action?.disabled },
+    },
     {
-      action: (theme.vars || theme).palette?.action?.active,
-      disabled: (theme.vars || theme).palette?.action?.disabled,
-      inherit: undefined,
-    }[ownerState.color],
+      props: { color: 'inherit' },
+      style: { color: undefined },
+    },
+  ],
 }));
 
 const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
@@ -211,6 +240,8 @@ SvgIcon.propTypes /* remove-proptypes */ = {
   viewBox: PropTypes.string,
 };
 
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 
 export default SvgIcon;