loading="lazy"

[iofjuupasli]

There is an attribute loading in img element with lazy option.

It would be great to have that attribute with same options for inlineSvg.

I have quite a big set of SVGs, and it would be more optimal only load them when they are visible after scrolling. I can solve that by implementing infinite scroll behavior on my side. But loading="lazy" would be the simplest solution

[gilbarbara]

Hey,

Just documenting here before closing.

---

loading="lazy" is a native <img> attribute — the browser defers the request until the image nears the viewport. react-inlinesvg doesn't render an <img>; it fetches the SVG text and inlines a real <svg> into the DOM, so there's no native lazy path to hook into.

Supporting this in the library would mean rendering an observable placeholder element (for an IntersectionObserver) before the SVG loads. That goes against a core design point — the component renders nothing but the SVG, no wrapper — and gating it behind a lazy prop just adds a parallel render path that every other consumer pays for in complexity.

It composes cleanly in app code, where you own the placeholder element (which you need for layout/sizing anyway):

import { useInView } from 'react-intersection-observer';
import InlineSVG, { Props } from 'react-inlinesvg';

function LazySVG(props: Props) {
  const { ref, inView } = useInView({ triggerOnce: true, rootMargin: '200px' });

  return <span ref={ref}>{inView && <InlineSVG {...props} />}</span>;
}