Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Delay when rendering svg image in react application

Tags:

image

reactjs

svg

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.

like image 321
logesh Avatar asked Sep 03 '26 02:09

logesh


1 Answers

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;
like image 81
Ioannis Mentesidis Avatar answered Sep 04 '26 20:09

Ioannis Mentesidis



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!