Add animated SVG to React websites

Updated: Dec 17, 2019

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

This is fairly easy if you are using version 2.0 of Create React App.

All you have to do is to import the SVG and use it.

Sample component:

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;

If you need more insight into how this works, you can follow this amazing tutorial on Egghead.

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 theyr 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;

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.