Animated SVG icon as a Component in React JS

Question

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);
  }
}

Answer 1

You can inline the style inside the component as well. The style should be a string (wrap in back ticks because the text is multiline), so React won't try to parse the curly brackets as expressions.

Note: the class names that are embedded in the style will effect everything on the page, so you should add a namespace, or make them unique in some other form.

 const Spinner = () => ( <React.Fragment> <style> {` .spinner .background { fill: #555; } .spinner .line { animation: PacMan 5s infinite; fill: none; stroke: #d26188; stroke-width: 25; } .spinner .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); } } `} </style> <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> </React.Fragment> ) ReactDOM.render( <Spinner />, root )

 body { align-items: center; background: #333; display: flex; flex-direction: column; justify-content: center; height: 100vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>