Add animated SVG to React websites

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 wrap the SVG in a React Component when you import it.

Sample component:

import React from 'react';
import  {ReactComponent as AnimatedLogo} from './Animated.svg';

function MyComponent() {
  return (
    <AnimatedLogo />
    
  );
}

export default MyComponent;

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 the Webpack documentation.

Webpack has a loader for handling SVG that's called svg-inline-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 svg-inline-loader --save-dev

Add the configuration to webpack.config.js file.

    {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
    }

This loader works best with react-inlinesvg.

npm install react-inlinesvg

Now you can simply import SVG files and use them.

import React from 'react';
import SVG from 'react-inlinesvg'
import Animated from './Animated.svg'

const MyComponent = () => (
    <SVG src={Animated} />
)

export default MyComponent

Method (2)

This is a more simpler approach because it requires only one dependency.

It's called 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

Method(3)

Here is a plugin from babel.

It's called babel-plugin-inline-react-svg.

First, install.

npm install --save-dev babel-plugin-inline-react-svg

Add the configuration to .babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "inline-react-svg"
    ]
}

Now simply import your SVG.

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

Another framework, another plugin.

This one works with babel-plugin-inline-react-svg.

First we're going to install it.

npm install --save-dev babel-plugin-inline-react-svg

Add the configuration to .babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "inline-react-svg"
  ]
}

And import the svg.

import React from 'react';
import Animated from '../assets/Animated.svg'
const Index = () => (
    <div>
        <Animated />
    </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.