title: Animated SVG icon as a Component in React JS
body: <p>I'm trying to make this animated SVG as a component in React JS, but I can't find a solution.</p>
  
  <p>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?</p>
  
  <p><strong>SVG</strong></p>
  
  <pre><code>&lt;svg class="spinner" width="150" height="150" viewBox="0 0 100 100"&gt;
        &lt;circle class="background" r="24" cx="50" cy="50"&gt;&lt;/circle&gt;
        &lt;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"
        &gt;&lt;/path&gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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);
    }
  }
  </code></pre>