fix: fix svg for transform

.changeset/orange-needles-report.md

@@ -0,0 +1,5 @@
+---
+'rax-compat': patch
+---
+
+fix: fix svg

packages/rax-compat/src/compat/element.ts

@@ -17,7 +17,7 @@ export function createJSXElementFactory(factory: typeof ElementFactory) {
     // Compat for props.
     if (isRealDOM) {
       // Only the dom needs to be transformed, not the components.
-      rest = transformProps(rest);
+      rest = transformProps(type, rest);
 
       // Delete props on real dom that are not allowed in react.
       delete rest.onAppear;

packages/rax-compat/src/props.ts

@@ -8,7 +8,7 @@
   return key.indexOf('on') === 0;
 }
 
-function transformProps(props: ComponentProps<JSXElementConstructor<any>>): Record<string, any> {
+function transformProps(type: string, props: ComponentProps<JSXElementConstructor<any>>): Record<string, any> {
   const transformedProps: Record<string, any> = {};
   Object.keys(props).forEach((propKey: string) => {
     let key: string = propKey;
@@ -21,18 +21,23 @@
     // etc...
     if (isEventLikeProp(lowerCasedPropKey)) {
       if (registrationNameToReactEvent.has(lowerCasedPropKey)) {
-        const reactEvent: string = registrationNameToReactEvent.get(lowerCasedPropKey);
+        const reactEvent: string = registrationNameToReactEvent.get(lowerCasedPropKey) || '';
         if (reactEvent !== propKey) {
           key = reactEvent;
         }
       }
       // eslint-disable-next-line no-prototype-builtins
-    } else if (possibleStandardNames.hasOwnProperty(lowerCasedPropKey)) {
-      // Transform attribute names that make it works properly in React.
-      key = possibleStandardNames[lowerCasedPropKey];
-    } else {
-      // Handles component props from rax-components like resizeMode, this causes React to throw a warning.
-      key = lowerCasedPropKey;
+    }
+
+    const needTransform = (type !== 'svg');
+    if (needTransform) {
+      if (possibleStandardNames.hasOwnProperty(lowerCasedPropKey)) {
+        // Transform attribute names that make it works properly in React.
+        key = possibleStandardNames[lowerCasedPropKey];
+      } else {
+        // Handles component props from rax-components like resizeMode, this causes React to throw a warning.
+        key = lowerCasedPropKey;
+      }
     }
 
     transformedProps[key] = val;