6

I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.

Here is how I load svg image

import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />

Please find the gif link that shows the loading delay issue. https://ibb.co/jH35S38

PS. This happens in production only.

3
  • depends what's in the menu_icon.svg If it's large enough it may take 1 second to a) transfer over your network and b) render. Commented Jun 14, 2019 at 7:58
  • Sorry, Edited my question. It happens only in production and the SVG images are not that big it's 2 kb each(without gzip)
    – logesh
    Commented Jun 14, 2019 at 8:11
  • We're going to need a testcase here. We don't debug production systems. Once you fix your production system, your question isn't helpful to anyone else. Commented Jun 14, 2019 at 8:41

1 Answer 1

13

I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay. It works for me.

https://blog.logrocket.com/how-to-use-svgs-in-react/

import React from 'react';

import {ReactComponent as ReactLogo} from './logo.svg';

const App = () => {
return (
 <div className="App">
   <ReactLogo />
 </div>
);
}
export default App;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.