[SvgIcon] Remove classes prop and apply useSlot

Author: hbjORbj

packages/mui-joy/src/SvgIcon/SvgIcon.tsx

@@ -6,11 +6,12 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 import { SvgIconProps, SvgIconTypeMap, SvgIconOwnerState } from './SvgIconProps';
 
 const useUtilityClasses = (ownerState: SvgIconOwnerState) => {
-  const { color, fontSize, classes } = ownerState;
+  const { color, fontSize } = ownerState;
 
   const slots = {
     root: [
@@ -20,7 +21,7 @@ const useUtilityClasses = (ownerState: SvgIconOwnerState) => {
     ],
   };
 
-  return composeClasses(slots, getSvgIconUtilityClass, classes);
+  return composeClasses(slots, getSvgIconUtilityClass, {});
 };
 
 const SvgIconRoot = styled('svg', {
@@ -86,22 +87,26 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
+    elementType: SvgIconRoot,
+    externalForwardedProps: { ...other, component },
+    ownerState,
+    additionalProps: {
+      color: htmlColor,
+      focusable: 'false',
+      ...(titleAccess && { role: 'img' }),
+      ...(!titleAccess && { 'aria-hideen': true }),
+      ...(!inheritViewBox && { viewBox }),
+    },
+  });
+
   return (
-    <SvgIconRoot
-      as={component}
-      className={clsx(classes.root, className)}
-      focusable="false"
-      color={htmlColor}
-      aria-hidden={titleAccess ? undefined : true}
-      role={titleAccess ? 'img' : undefined}
-      ref={ref}
-      {...other}
-      {...(!inheritViewBox && { viewBox })}
-      ownerState={ownerState}
-    >
+    <SlotRoot {...rootProps}>
       {children}
       {titleAccess ? <title>{titleAccess}</title> : null}
-    </SvgIconRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<SvgIconTypeMap>;
 

packages/mui-joy/src/SvgIcon/SvgIconProps.ts

@@ -1,12 +1,10 @@
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import * as React from 'react';
 import { ColorPaletteProp, FontSize, SxProps, ApplyColorInversion } from '../styles/types';
-import { SvgIconClasses } from './svgIconClasses';
 
 export type SvgIconSlot = 'root';
 
 export interface SvgIconPropsSizeOverrides {}
-
 export interface SvgIconPropsColorOverrides {}
 
 export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
@@ -15,10 +13,6 @@ export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
      * Node passed into the SVG element.
      */
     children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<SvgIconClasses>;
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      * You can use the `htmlColor` prop to apply a color attribute to the SVG element.