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

{
  "componentDescription": "",
  "propDescriptions": {
    "children": { "description": "Node passed into the SVG element." },
    "color": {
      "description": "The color of the component. It supports those theme colors that make sense for this component. 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 theme&#39;s fontSize applied to the icon that will override the <code>size</code> prop. Use this prop when you want to use a specific font-size from the theme."
    },
    "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."
    },
    "size": { "description": "The size of the component." },
    "slotProps": { "description": "The props used for each slot inside." },
    "slots": { "description": "The components used for each slot inside." },
    "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": {
    "colorDanger": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"danger\"</code>"
    },
    "colorInherit": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"inherit\"</code>"
    },
    "colorNeutral": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"neutral\"</code>"
    },
    "colorPrimary": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSuccess": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"success\"</code>"
    },
    "colorWarning": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"warning\"</code>"
    },
    "fontSizeInherit": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"inherit\"</code>"
    },
    "fontSizeLg": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"lg\"</code>"
    },
    "fontSizeMd": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"md\"</code>"
    },
    "fontSizeSm": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"sm\"</code>"
    },
    "fontSizeXl": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"xl\"</code>"
    },
    "fontSizeXl2": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"xl2\"</code>"
    },
    "fontSizeXl3": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"xl3\"</code>"
    },
    "fontSizeXl4": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"xl4\"</code>"
    },
    "fontSizeXs": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fontSize=\"xs\"</code>"
    },
    "sizeLg": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"lg\"</code>"
    },
    "sizeMd": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"md\"</code>"
    },
    "sizeSm": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"sm\"</code>"
    }
  },
  "slotDescriptions": { "root": "The component that renders the root." }
}