react-lazy-svg

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

Usage no npm install needed!

<script type="module">
  import reactLazySvg from 'https://cdn.skypack.dev/react-lazy-svg';
</script>

README

sloth emoji

react-lazy-svg

The easy way to use SVG sprite-sheets

GitHub license npm npm GitHub issues

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.

Usage

npm install --save react-lazy-svg

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>();
export const readSvg = async (url: string) => {
  if (svgIconFiles.has(url)) {
    return svgIconFiles.get(url);
  }

  const readFile = promisify(fs.readFile);

  const cdnBase = 'http://localhost:3001/static/media/';

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

  // ignore external assets on server side
  if (!url.startsWith('http')) {
    const svgString = await readFile(url, { encoding: 'utf8' });
    svgIconFiles.set(url, svgString);
    return svgString;
  }

  return undefined;
};