Within my React application, I am bringing in an SVG as a React component in the following manner:
import React from "react";
import {ReactComponent as SomeSVGComponent} from "./some_svg.svg";
function SomeComponent(props){
return (
<div>
<SomeSVGComponent />
</div>
);
}
This application was initialized using create-react-app, which means webpack handles the import process.
The SVG's path elements contain an inline style attribute that includes the length of the path:
<svg ...>
...
<path style="--pathLength:180.12531;" d=.../>
</svg>
This specific style variable is crucial for the proper functioning of animations within my application.
However, (I suspect this is due to webpack's behavior in this context), when the SVG is imported as a React component, the style attribute gets overwritten to style={{-pathlength:180.12531}}, leading to a compilation error:
Failed to compile.
SyntaxError: unknown: Unexpected token (8:4)
6 | ...props
7 | }) => <svg width={137} height={46} {...props}>{title ? <title>{title}</title> : null}<path style={{
> 8 | -pathlength: 762.1506987288266
| ^
9 | }} .../>
Is there a way to keep the current structure of importing the SVG as a React Component without losing the inline style variable?
Perhaps there is a method to override webpack's default import behavior?