How to Add Animated SVG to React Websites

Updated: Apr 14, 2022

There are multiple React frameworks that you can use for your website. Whether it's client or server-side rendered, there are lots of different solutions that you can use to add animated SVG.

In case your SVG is animated on mouse over, you must add it as Inline SVG. You will see how this works in the following examples:

React websites based on Create React App

To add an animated SVG to your Create React App project, you need to construct a custom component.

We also have a working example on github.
The final component will look like this.

/* eslint-disable */

import { useEffect } from "react";
import { ReactComponent as Svg } from "./stopwatch.svg";

export default function Stopwatch() {
  useEffect(() => {
  // ... javascript goes here 
  // !function ... long code 
  }, []);
  return (
      // SVG part goes here
      <Svg/>
  )
}

The import of static SVG's works as described on the CRA docs. We can use this feature to import our SVG but only after we extract the Javascript. You need to open the SVG file with an editor, cut the code between

<script><![CDATA[…….code……]]></script>

these tags and paste it in the useEffect hook. After you have removed the javascript, just delete the empty tags

<script><![CDATA[]]></script>

from the SVG file.

You also need to add the

/* eslint-disable */

comment at the top of your component file because the javascript is minified and it will create a lot of code styling errors. Do not try to format the javascript otherwise line wrapping can make it stop working.

Now just import your SVG file and return it in the function.

Also import your component where you want to use your SVG.

Now you should have a working animated SVG.

React websites using Webpack

Client based React apps are mostly using Webpack to bundle all the dependencies into a single file. You can use multiple plugins for loading files by specifying their path using include or exclude keys, as shown in this Webpack documentation.

Webpack has a loader for handling SVG that's called file-loader. There are a couple of ways to make this work. We'll start with the method created by Webpack.

Method (1)

Let's install it.

npm install file-loader --save-dev

Add the configuration to webpack.config.js file.

      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },

Now you can simply import SVG files and use them.

import React from 'react';
import Animated from './Animated.svg';

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

Method (2)

Import SVG using svg-react-loader - "A webpack loader allowing for inline usage of a SVG as a React component" as mentioned on the github page.

Install.

npm install --save-dev svg-react-loader

Add its configuration to webpack.config.js

      {
        test: /\.svg$/,
        exclude: /node_modules/,
        use: {
          loader: 'svg-react-loader',
        },
      }

The react component looks like this.

import React from 'react';
import Animated from './Animated.svg'

const MyComponent = () => (
    <Animated />
)

export default MyComponent

Gatsby websites

Here we can use gatsby-plugin-react-svg a plugin based on svg-react-loader.

Just install it.

npm install --save gatsby-plugin-react-svg

Add config to gatsby-config.js.

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
    options: {
      rule: {
        include: /assets/ // Where the animated svgs are.
      }
    }
  }
];

Import SVG.

import React from 'react';
import Animated from '../assets/Animated.svg'

const MyComponent = () => (
    <Animated />
)

export default MyComponent

Next.js websites

Next supports SVG out of the box, just add it to the public folder as explained in their documentation and use it in the object tag like so .

const Index = () => (
 <div>
  <object type="image/svg+xml" data="/animated.svg">svg-animation</object>
 </div>
);

export default Index;

Add animated SVG to React Native

Add animated SVG to WordPress

Add animated SVG to your website

We hope this helps.

In case you know different ways to import animated SVG or you've got questions, just send us an email to contact@svgator.com and we will get back to you as soon as we can.

Add animated SVG to React websites

React websites based on Create React App

React websites using Webpack

Gatsby websites

Next.js websites