react-lazy-svg

The easy way to use SVG sprite-sheets


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

``bash
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.

`tsx
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 = () => (




);
`

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

`ts
const svgIconFiles = new Map();
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;
};
``