How to make an icon spin in React

Question

I'm trying to make a spinning icon through React and I think there's something I'm missing in my attempt. Here's my return function.

  return (
    <div className="loader">
      <p>Loading Data</p>
      <FaIcons.FaCog className="loaderIcon"/>
    </div>
  );

And here's the CSS.

.loaderIcon .spin.FaIcons{
    margin-right: 7px;
    top: 2px;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}

Does anyone know why the icon isn't spinning?

Answer 1

Turns out the problem was that I was referencing the wrong class. I only had to reference the icon class.

.loaderIcon {
    margin-right: 7px;
    top: 2px;
    animation: spin 1s infinite linear;
}