gilbarbara / react-inlinesvg

An SVG loader component for ReactJS

Home Page:https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

icon request is not cached on the level of react-inlinesvg component

strodoff opened this issue · comments

Hi guys
I use the same icon in several places (with your library).
Instead of making one network request for this icon many requests are made

Steps to reproduce the behavior

  1. Go to https://codepen.io/strodoff/pen/OJvEOjL?editors=1010
  2. Open the inspect tools
  3. Go to the Network
  4. See many requests for a single icon

Expected behavior
We expect to see only one request for the icon

Additional context
The issue occurs when I import
import SVG from 'react-inlinesvg'

The issue does NOT occur when I import
import * as reactInlinesvg from 'react-inlinesvg'

Hey @strodoff

Make sure the remote SVG has CORS headers or the cache might not be populated. The remote file doesn't have the appropriate headers in the example you posted.

The cache is populated AFTER a successful response, so simultaneously loading the same URL in multiple components won't work.

The import difference doesn't make much sense as this library exports a default class. It might have something to do with your setup.