Wczytywanie grafik w aplikacji React

Question

Witam,
tworzę aplikację React (typescript) i mam pewien problem z ikonami. Aplikacja posiada wiele ikon, są one przechowywane w plikach svg i wyświetlane w znaczniku img.

/* Przykład */

import icon from '../icons/icon.svg'

const Component = () => {
   return <>
      <img src={icon} alt='Ikona' />
   </>
}

export default Component

Problem polega na tym, że gdy jakiś komponent jest renderowany, to ikona doczytuje się dopiero po krótkiej chwili. 

W jaki sposób mogę wczytać wszystkie ikony do pamięci przeglądarki na samym początku, aby później nie doczytywały się z opóźnieniem? 

Czy dobrym pomysłem było by utworzenie komponentów dla ikon, które zwracały by kod svg? (Aktualnie aplikacja wykorzystuje ponad 60 ikon, choć ze wzglądu na warianty kolorystyczne liczba potencjalnych komponentów byłaby nieco mniejsza). Chodzi mi o coś w tym stylu:

const IconA = () => {
   return <svg width="25" /* [...] */ >
       /* [...] */
   </svg>
}

export default IconA

Dziękuję!

Answer 1

Spróbuj dodać preload do ikonek, ale to też ingerencja w plik HTML globalnie w sekcji head

  <link rel="preload" href="/path/to/icon.svg" as="image">

React ma biblioteke do svg : react-svg

Wtedy możesz to wykorzystać tworząc bezpośrednio komponent: 
 

import { ReactSVG } from 'react-svg'

const IconComponent = () => (
  <ReactSVG src="path/to/icon.svg" />
);

export default IconComponent;

Możesz skorzystać ze stanu aplikacji i ładować ikonki, zanim generalnie strona zostanie załadowana: 
Używasz wtedy state i  onLoad image https://stackoverflow.com/questions/43115246/how-to-detect-when-a-image-is-loaded-that-is-provided-via-props-and-change-sta/59396181#59396181|

Popatrz sobie na ten przykład w code-sanboxie
https://codesandbox.io/s/angry-artem-zszyqs

Answer 2

Hej, jeśli korzystasz z vite, to możesz wykorzystać vite-plugin-svgr. Używam prywatnie jak i w pracy i nie zauważyłem żeby ikony ładowały się z opóźnieniem