<!-- Love SVGR? Please consider supporting our collective: ๐ https://opencollective.com/svgr/donate --> ## ๐ Bug Report SVGR does not inline the `transform-origin` CSS property correctly. It applies it as a HTML attribute within the generated JSX like so: ```typescript import React from 'react' import { SVGIconProps } from '../types' const SvgLoader = ({ size = 16, ...props }: SVGIconProps) => ( <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 38 38" fill="currentColor" {...props} > <style> { '@keyframes rotating{0%{transform:rotate(0deg)}100%{transform:rotate(720deg)}}@keyframes fade{0%{opacity:1}50%{opacity:0.3}100%{opacity:1}}' } </style> <g> <path style={{ animation: 'rotating 1s infinite cubic-bezier(.61,-0.11,.32,1.13)', }} transform-origin="50% 50%" /> </g> </svg> ) export default SvgLoader ``` ## To Reproduce Steps to reproduce the behavior: 1. Run SVGR over an SVG with a `<style>` block that includes a CSS class with the `transform-origin` property. 3. Note how it is added directly to the referenced element inline as a HTML attribute but it's not camelCase. ## Expected behavior The `transform-origin` property should be applied inline as `transformOrigin`.
This issue appears to be discussing a feature request or bug report related to the repository. Based on the content, it seems to be resolved. The issue was opened by m7kvqbe1 and has received 3 comments.