Animated SVG in React

Question

I have a React web app utilizing Tailwind CSS and I'm attempting to import a pre-animated SVG file that I obtained from SVGator, however, the file immediately throws a massive error when imported. What is the best way for imported pre-animated SVG files, if there is a proper method?

What I want to animate is a circle with an icon that will revolve entirely around a specific axis, which is a picture in the center.

Here is the circle:

<div className='w-[5%] mx-20 self-center'>
  <div className='shadow-lg bg-gray-200 rounded-full'>
    <img className="w-15 mx-auto" src={images.react} alt="React icon" />
  </div>
</div>

I would much rather just import a pre-animated SVG into the site, as implementing multiple circles revolving around the same radius might become bothersome in regards to CSS.

EDIT: For reference, I have found this answer that depicts a rough structure of what I'd like to implement within React/Tailwind: https://stackoverflow.com/a/39021942/18241240

Answer 1

Hopefully I am understanding you correctly. You want to import an SVG file from svgator into your react application.

Here is the solution I found for your issue in the svgator documentation

import React from 'react';
import ExampleSVG from './Example.svg';

function App() {
  return (
    <object type="image/svg+xml" data={ExampleSVG}>svg-animation</object>
  );
}
export default App;

I am also a developer using tailwind and have sort of made a similar SVG to one that you are describing I believe.

      <svg
        className="animate-spin h-10 w-10"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          className="opacity-40"
          cx={"12"}
          cy={"12"}
          r="10"
          stroke="#454545"
          stroke-width={"2"}
        ></circle>
        <path
          fill="#FFFFFF"
          className="opacity-75"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        ></path>
      </svg>

The svg spins due to the animate-spin class from tailwind and ultimately it looks something like a loading animation. Not sure if it could help you out but it is a more do it yourself approach. All of that d in the path component is linked to adobe graphics I believe. I simply used the ones found in the tailwindCSS documentation.

Hopefully this helps.