SVG does not animate when imported in JS files

[vreddi]

Browser used: Latest Chrome

I am trying to use the animated SVG within a React application which is bundled using webpack. Webpack config does use the image-webpack-loader module which allows me to import the svg in one of my react component files:

import SearchImage from 'assets/images/search_animated.svg';

and be used in my React component as JSX:

<img src={SearchImage} alt="" className="searchbox-cover-no-results-image" />

When this renders on the browser no animation triggers. The image stays in its initial state.

However when I tried manually adding the image in the html, the animation worked just fine.

Seems like there might be compatibility issues with how the image is being imported. Any ideas how could I fix this within the React app?

[maxwellito]

Hi there, Do you have the embedded code available somewhere? I believe the image-webpack-loader is removing vital parts of the SVG animation. Do you have an optimiser as part of your build?

Maybe try to disable svgo

use: [
  'file-loader',
  {
    loader: 'image-webpack-loader',
    options: {
      ...
      svgo: {
        enabled: false
      }
    }
  }
]

[vreddi]

@maxwellito Yes that makes sense. That worked!