The easy way to use SVG sprite-sheets
[](https://github.com/kaoDev/react-lazy-svg/blob/main/license.md) [](https://www.npmjs.com/package/react-lazy-svg) [](https://www.npmjs.com/package/react-lazy-svg) [](https://github.com/kaoDev/react-lazy-svg/issues) [](https://bundlephobia.com/package/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 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/](./example-nextjs/) and [./example-remix/](./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 = () => (