diff --git a/README.md b/README.md index 9314afa..01d6abd 100644 --- a/README.md +++ b/README.md @@ -3,16 +3,17 @@
The easy way to use SVG sprite-sheets
-[](https://github.com/kaoDev/react-lazy-svg) +[](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. +in the first paint. So you can inject the critical svg ## Usage @@ -20,6 +21,10 @@ in the first paint. 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. @@ -46,26 +51,23 @@ contents from the file system. ```ts const svgIconFiles = new Map