react-lazy-svg is a simple way to use SVGs with the performance benefits of a sprite-sheet and svg css styling possibilities. Without bloating the bundle. It automatically creates a sprite-sheet for all used SVGs on the client but also provides a function to create a server side rendered sprite-sheet for icons used in the first paint. So you can inject the critical svg

Usage

npm install --save react-lazy-svg

Examples on how to use react-lazy-svg with remix and next.js can be found in the ./example-nextjs/ and ./example-remix/ directory.

Wrap the App with the contextProvider and provide a function to resolve SVG strings by URL. If you are using server side rendering you should also call initOnClient() to hydrate the sprite sheet context.

import { SpriteContextProvider, initOnClient. Icon } from 'react-lazy-svg';
import icon1 from './icon1.svg';

const loadSVG = async (url: string) => {
  return await (await fetch(url)).text();
};
initOnClient();

const Root = () => (
  <SpriteContextProvider loadSVG={loadSVG}>
    <Icon url={icon1} className="icon"></Icon>
    <Icon url={icon1} className="icon red"></Icon>
  </SpriteContextProvider>
);

On the server the SVG resolver function could look like this, and load the svg contents from the file system.

const svgIconFiles = new Map<string, string>();
const readFile = promisify(fs.readFile);
const cdnBase = 'http://localhost:3001/static/media/';

export const readSvg = async (url: string) => {
  if (svgIconFiles.has(url)) {
    return svgIconFiles.get(url);
  }

  if (url.startsWith(cdnBase)) {
    url = path.join(
      process.cwd(),
      url.replace(cdnBase, './build/public/static/media/'),
    );

    const svgString = await readFile(url, { encoding: 'utf8' });
    svgIconFiles.set(url, svgString);

    return svgString;
  }

  return undefined;
};