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

score 2 · Answer 1 · answered Mar 31 '22 at 01:03

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.

Yeah when I implement it the way the documentation suggests from SVGator, theres a massive error prefaced with "Module build failed (from ./node_modules/@svgr/webpack/lib/index.js)"; apparently its a bug with ReactJS of some sort. I'm still relatively new to Tailwind, but here is an example of what I'd like to display in React, granted, there will be more images and etc. involved: https://stackoverflow.com/a/39021942/18241240 — guyman, Mar 31 '22 at 01:17
I tried tinkering with the SVG and adding different parts, but that whole deal is well out of my realm of expertise. I suggest simply adding the css from one of those answers into your index.css file directly. There was an answer in the same thread that didnt use JQuery [here](https://stackoverflow.com/a/39021536/18076918) and got a similar result. You also could try copy pasting over the css into their tailwind equivalents but I believe you at the least need to use your index.css file for the webkit transformations. Hopefully someone can provide a more complete answer — daedadev, Mar 31 '22 at 01:59

score 0 · Accepted Answer · answered Apr 02 '22 at 18:56

Ended up just using standard CSS to implement this, I'll post it here in case anyone wants to utilize (it is modified extensively):

ReactJS/TailwindCSS:

<div id="container" className='dark:bg-[#6052dd] bg-[#aaa0ff] transition ease-out duration-500'>
                    <div class="item">
                        <div className='rounded-[30%] shadow-lg w-[100%] py-[2px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.html} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.react} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.flutter} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.css} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.vue} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[0px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.redux} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.firebase} alt="HTML icon" />
                        </div>
                    </div>
                </div>

The index.css file, this contains the actual transitional animations that achieve the revolving effect:

#container {
  --n:7;   /* number of item */
  --d:45s; /* duration */

  width: 500px;
  height: 500px;
  margin: 40px auto;
  display:grid;
  grid-template-columns:30px;
  grid-template-rows:30px;
  place-content: center;
  border-radius: 50%;
  /* background-color: #aaa0ff; */
}
.item {
  grid-area:1/3/3/1;
  box-shadow: 50px #000;
  line-height: 80px;
  text-align: center;
  align-self: center;
  width: 80px;
  height: 80px;
  border-radius: 30%;
  /* background: rgb(231, 231, 231); */
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(310px) rotate(0);
}
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(310px) rotate(-1turn);
  }
}

.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}
.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}
.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}
.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}
.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}
.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}
.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}
/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/

What this ends up depicting (this revolves around the center circle, as expected):

If anyone wants to convert the index.css into TailwindCSS, feel free.

Animated SVG in React

2 Answers2