[SvgIcon] Correct API docs and code style (#30470)

docs/src/pages/components/icons/icons.md

@@ -97,7 +97,9 @@ If you need a custom SVG icon (not available in the [Material Icons](/components
 This component extends the native `<svg>` element:
 
 - It comes with built-in accessibility.
-- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other MUI components that use icons. (This can be customized with the `viewBox` attribute, to inherit `viewBox` value from original image `inheritViewBox` attribute can be used).
+- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other MUI components that use icons.
+  This can be customized with the `viewBox` attribute.
+  To inherit the `viewBox` value from the original image, the `inheritViewBox` attribute can be used.
 - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop.
 
 ```jsx
@@ -133,7 +135,7 @@ You can use the `SvgIcon` wrapper even if your icons are saved in the `.svg` for
 // ---
 import StarIcon from './star.svg';
 
-<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />
+<SvgIcon component={StarIcon} inheritViewBox />
 ```
 
 It's also possible to use it with "url-loader" or "file-loader". This is the approach used by Create React App.
@@ -148,7 +150,7 @@ It's also possible to use it with "url-loader" or "file-loader". This is the app
 // ---
 import { ReactComponent as StarIcon } from './star.svg';
 
-<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />
+<SvgIcon component={StarIcon} inheritViewBox />
 ```
 
 ### createSvgIcon

docs/translations/api-docs/svg-icon/svg-icon.json

@@ -7,7 +7,7 @@
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.",
     "htmlColor": "Applies a color attribute to the SVG element.",
-    "inheritViewBox": "Useful when you want to reference a custom <code>component</code> and have <code>SvgIcon</code> pass that <code>component</code>&#39;s viewBox to the root node. If <code>true</code>, the root node will inherit the custom <code>component</code>&#39;s viewBox and the <code>viewBox</code> prop will be ignored.",
+    "inheritViewBox": "If <code>true</code>, the root node will inherit the custom <code>component</code>&#39;s viewBox and the <code>viewBox</code> prop will be ignored. Useful when you want to reference a custom <code>component</code> and have <code>SvgIcon</code> pass that <code>component</code>&#39;s viewBox to the root node.",
     "shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering\">MDN Web Docs</a>. If you are having issues with blurry icons you should investigate this prop.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "titleAccess": "Provides a human-readable title for the element that contains it. <a href=\"https://www.w3.org/TR/SVG-access/#Equivalent\">https://www.w3.org/TR/SVG-access/#Equivalent</a>",

packages/mui-material/src/SvgIcon/SvgIcon.d.ts

@@ -49,10 +49,10 @@ export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
      */
     htmlColor?: string;
     /**
-     * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
-     * `component`'s viewBox to the root node.
      * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
      * prop will be ignored.
+     * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+     * `component`'s viewBox to the root node.
      * @default false
      */
     inheritViewBox?: boolean;

packages/mui-material/src/SvgIcon/SvgIcon.js

@@ -68,8 +68,8 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
     component = 'svg',
     fontSize = 'medium',
     htmlColor,
-    titleAccess,
     inheritViewBox = false,
+    titleAccess,
     viewBox = '0 0 24 24',
     ...other
   } = props;
@@ -164,10 +164,10 @@ SvgIcon.propTypes /* remove-proptypes */ = {
    */
   htmlColor: PropTypes.string,
   /**
-   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
-   * `component`'s viewBox to the root node.
    * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
    * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
    * @default false
    */
   inheritViewBox: PropTypes.bool,

packages/mui-material/src/SvgIcon/SvgIcon.test.js

@@ -98,21 +98,24 @@ describe('<SvgIcon />', () => {
   });
 
   describe('prop: inheritViewBox', () => {
-    const customSvg = (props) => (
+    const CustomSvg = (props) => (
       <svg viewBox="-4 -4 24 24" {...props}>
         {path}
       </svg>
     );
+
     it('should render with the default viewBox if neither inheritViewBox nor viewBox are provided', () => {
-      const { container } = render(<SvgIcon component={customSvg} />);
+      const { container } = render(<SvgIcon component={CustomSvg} />);
       expect(container.firstChild).to.have.attribute('viewBox', '0 0 24 24');
     });
+
     it('should render with given viewBox if inheritViewBox is not provided', () => {
-      const { container } = render(<SvgIcon component={customSvg} viewBox="0 0 30 30" />);
+      const { container } = render(<SvgIcon component={CustomSvg} viewBox="0 0 30 30" />);
       expect(container.firstChild).to.have.attribute('viewBox', '0 0 30 30');
     });
+
     it("should use the custom component's viewBox if true", () => {
-      const { container } = render(<SvgIcon component={customSvg} inheritViewBox />);
+      const { container } = render(<SvgIcon component={CustomSvg} inheritViewBox />);
       expect(container.firstChild).to.have.attribute('viewBox', '-4 -4 24 24');
     });
   });