Transpiling Vector Graphics to Component Frameworks: The Architecture of SVG to React, Babel AST Visitors & DOM Hydration

+---------------------------------------------------------------------------------------------------+
|                        XML TO REACT JSX ATTRIBUTE NORMALIZATION MATRIX                            |
+---------------------------------------------------------------------------------------------------+
| XML Attribute Name       | React JSX Prop Identifier     | Category & Engine Transformation Rule |
+---------------------------------------------------------------------------------------------------+
| stroke-width             | strokeWidth                   | Kebab-to-camelCase conversion        |
| stroke-linecap           | strokeLinecap                 | Kebab-to-camelCase conversion        |
| stroke-linejoin          | strokeLinejoin                | Kebab-to-camelCase conversion        |
| fill-rule                | fillRule                      | Kebab-to-camelCase conversion        |
| clip-rule                | clipRule                      | Kebab-to-camelCase conversion        |
| clip-path                | clipPath                      | Kebab-to-camelCase conversion        |
| class                    | className                     | Reserved JavaScript keyword mapping  |
| for                      | htmlFor                       | Reserved JavaScript keyword mapping  |
| xmlns:xlink              | xmlnsXlink                    | XML namespace colon sanitization     |
| xlink:href               | xlinkHref                     | Deprecated SVG attribute mapping     |
| href                     | href                          | Modern SVG2 hyperlink attribute      |
| tab-index                | tabIndex                      | Focusable interactive element prop   |
| style="fill: red;"     | style={{ fill: 'red' }}       | Inline CSS string to JS Object parse |
+---------------------------------------------------------------------------------------------------+

+---------------------------------------------------------------------------------------------------+
|                        SVGR / INNOXTOOLS COMPILER TRANSFORMATION PIPELINE                         |
+---------------------------------------------------------------------------------------------------+
|  [Raw SVG Markup] -> Ingest raw vector XML text string                                             |
|         |                                                                                         |
|         v                                                                                         |
|  [Stage 1: SVGO Optimization] -> Prune metadata, collapse empty groups, convert shapes to paths    |
|         |                                                                                         |
|         v                                                                                         |
|  [Stage 2: XML Parsing] -> Parse sanitized XML string into an Abstract Syntax Tree (AST)          |
|         |                                                                                         |
|         v                                                                                         |
|  [Stage 3: Babel AST Transformation] -> Traverse AST with Visitor Pattern:                        |
|             * Convert kebab-case attributes to camelCase props                                    |
|             * Parse inline style attributes into JavaScript Object expressions                   |
|             * Inject {...props} forward spread at root <svg> element                              |
|             * Replace hardcoded fill/stroke values with "currentColor" (Optional flag)          |
|         |                                                                                         |
|         v                                                                                         |
|  [Stage 4: TypeScript / Component Template Wrapping] -> Wrap JSX AST in React.forwardRef / TSX   |
|         |                                                                                         |
|         v                                                                                         |
|  [Stage 5: Code Generation (Babel Generator / Prettier)] -> Output formatted, type-safe code      |
+---------------------------------------------------------------------------------------------------+

// Architectural representation of an SVG-to-JSX Babel AST Visitor
export function svgToJsxPlugin({ types: t }: { types: any }) {
  return {
    visitor: {
      JSXAttribute(path: any) {
        const attributeName = path.node.name;
        
        // Handle namespaced attributes (e.g., xlink:href -> xlinkHref)
        if (t.isJSXNamespacedName(attributeName)) {
          const namespace = attributeName.namespace.name;
          const local = attributeName.name.name;
          const camelCased = namespace + local.charAt(0).toUpperCase() + local.slice(1);
          path.node.name = t.jsxIdentifier(camelCased);
          return;
        }

        // Handle standard kebab-case attributes (e.g., stroke-width -> strokeWidth)
        if (t.isJSXIdentifier(attributeName)) {
          const rawName = attributeName.name;
          if (rawName === "class") {
            path.node.name = t.jsxIdentifier("className");
          } else if (rawName === "for") {
            path.node.name = t.jsxIdentifier("htmlFor");
          } else if (rawName.includes("-")) {
            const camelName = rawName.replace(/-([a-z])/g, (_: string, match: string) => match.toUpperCase());
            path.node.name = t.jsxIdentifier(camelName);
          }
        }
      },

      JSXElement(path: any) {
        // Intercept root <svg> tag to inject dynamic prop spreading
        if (path.node.openingElement.name.name === "svg") {
          // Check if {...props} already exists
          const hasSpread = path.node.openingElement.attributes.some(
            (attr: any) => t.isJSXSpreadAttribute(attr)
          );
          if (!hasSpread) {
            path.node.openingElement.attributes.push(
              t.jsxSpreadAttribute(t.identifier("props"))
            );
          }
        }
      }
    }
  };
}