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:
If anyone wants to convert the index.css into TailwindCSS, feel free.