{"record":{"id":"3d848776424a20c6","repo":"mui/material-ui","slug":"expected-an-svg-element-as-the-root-child","errorCode":null,"errorMessage":"Expected an svg element as the root child","messagePattern":"Expected an svg element as the root child","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/mui-icons-material/builder.mjs","lineNumber":151,"sourceCode":"    ],\n  });\n\n  // True if the svg has multiple children\n  let childrenAsArray = false;\n  const jsxResult = svgo.optimize(result.data, {\n    plugins: [\n      {\n        name: 'svgAsReactFragment',\n        fn: () => {\n          return {\n            root: {\n              enter(root) {\n                const [svg, ...rootChildren] = root.children;\n                if (rootChildren.length > 0) {\n                  throw new Error('Expected a single child of the root');\n                }\n                if (svg.type !== 'element' || svg.name !== 'svg') {\n                  throw new Error('Expected an svg element as the root child');\n                }\n\n                if (svg.children.length > 1) {\n                  childrenAsArray = true;\n                  svg.children.forEach((svgChild, index) => {\n                    svgChild.attributes.key = index;\n                    // Original name will be restored later\n                    // We just need a mechanism to convert the resulting\n                    // svg string into an array of JSX elements\n                    svgChild.name = `SVGChild:${svgChild.name}`;\n                  });\n                }\n\n                root.children = svg.children;\n              },\n            },\n          };\n        },","sourceCodeStart":133,"sourceCodeEnd":169,"githubUrl":"https://github.com/mui/material-ui/blob/bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5/packages/mui-icons-material/builder.mjs#L133-L169","documentation":"The same SVGO plugin asserts that the single root child is an <svg> element (type 'element' and name 'svg'). If the root child is a different element (e.g. <g>, <symbol>, or a non-element node like a text/comment that survived optimisation), the icon builder throws because the React template expects to wrap an <svg>.","triggerScenarios":"Feeding the builder an SVG whose outermost element is not <svg> (e.g. a bare <g> or <path>), or an SVG whose root <svg> was stripped/renamed by an SVGO plugin.","commonSituations":"Hand-authored icon fragment not wrapped in <svg>; SVGO plugin misconfiguration stripping the root; copied icon markup missing the outer svg tag.","solutions":["Ensure the SVG source's single root element is <svg>...</svg>.","Remove custom SVGO plugins that rename or unwrap the root svg element.","Re-export the icon from a vector tool with 'SVG document' output rather than a fragment."],"exampleFix":"<!-- before -->\n<g><path d=\"...\"/></g>\n<!-- after -->\n<svg xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"...\"/></g></svg>","handlingStrategy":"validation","validationCode":"function rootIsSvg(svgString) {\n  const match = svgString.trim().match(/^<svg[\\s>]/i);\n  return !!match;\n}\nif (!rootIsSvg(source)) throw new Error('Expected <svg> as the root element');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Ensure every icon source's outermost element is <svg>.","Avoid SVGO plugins that unwrap or rename the root svg.","Add a pre-build lint that asserts the root tag name is svg."],"tags":["build","icons","svg","tooling","validation"],"backgroundTag":null,"analyzedSha":"bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5","analyzedAt":"2026-08-12T22:59:56.717Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}