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

{
  "componentDescription": "",
  "propDescriptions": {
    "children": { "description": "Node passed into the SVG element." },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "color": {
      "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>. You can use the <code>htmlColor</code> prop to apply a color attribute to the SVG element."
    },
    "component": {
      "description": "The component used for the root node. Either a string to use a HTML element or a component."
    },
    "fontSize": {
      "description": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size."
    },
    "htmlColor": { "description": "Applies a color attribute to the SVG element." },
    "inheritViewBox": {
      "description": "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": {
      "description": "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/Reference/Attribute/shape-rendering\">MDN Web Docs</a>. If you are having issues with blurry icons you should investigate this prop."
    },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "titleAccess": {
      "description": "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>"
    },
    "viewBox": {
      "description": "Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox=&quot;0 0 50 20&quot;, this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px."
    }
  },
  "classDescriptions": {
    "colorAction": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"action\"</code>"
    },
    "colorDisabled": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"disabled\"</code>"
    },
    "colorError": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"error\"</code>"
    },
    "colorPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"secondary\"</code>"
    },
    "fontSizeInherit": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"inherit\"</code>"
    },
    "fontSizeLarge": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"large\"</code>"
    },
    "fontSizeMedium": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"medium\"</code>"
    },
    "fontSizeSmall": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"small\"</code>"
    },
    "root": { "description": "Styles applied to the root element." }
  }
}