The easy way to use SVG sprite-sheets
GitHub license npm npm GitHub issues minified bundle size
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
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; };