I'm trying to make this animated SVG as a component in React JS, but I can't find a solution.
I would like to avoid moving all the styles into a separate .css file if possible. How can I import the SVG as a component in React JS but keep all of the stylings?
SVG
<svg class="spinner" width="150" height="150" viewBox="0 0 100 100">
<circle class="background" r="24" cx="50" cy="50"></circle>
<path
class="line"
d="M 37.5,50 C 37.5,43.096441 43.096441,37.5 50,37.5 C 56.903559,37.5 62.5,43.096441 62.5,50 C 62.5,56.903559 56.903559,62.5 50,62.5 C 43.096441,62.5 37.5,56.903559 37.5,50"
></path>
</svg>
CSS
body {
align-items: center;
background: #333;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.background {
fill: #555;
}
.line {
animation: PacMan 5s infinite;
fill: none;
stroke: #d26188;
stroke-width: 25;
}
.spinner {
animation: Spin 2s infinite linear;
}
@keyframes PacMan {
0% {
stroke-dasharray: 79px 79;
}
50% {
stroke-dasharray: 1px 79;
}
100% {
stroke-dasharray: 79px 79;
}
}
@keyframes Spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}