diff --git a/README.md b/README.md index 9314afa..01d6abd 100644 --- a/README.md +++ b/README.md @@ -3,16 +3,17 @@

react-lazy-svg

The easy way to use SVG sprite-sheets

-[![GitHub license](https://img.shields.io/github/license/kaoDev/react-lazy-svg?style=flat-square)](https://github.com/kaoDev/react-lazy-svg) +[![GitHub license](https://img.shields.io/github/license/kaoDev/react-lazy-svg?style=flat-square)](https://github.com/kaoDev/react-lazy-svg/blob/main/license.md) [![npm](https://img.shields.io/npm/dm/react-lazy-svg?style=flat-square)](https://www.npmjs.com/package/react-lazy-svg) [![npm](https://img.shields.io/npm/v/react-lazy-svg?style=flat-square)](https://www.npmjs.com/package/react-lazy-svg) [![GitHub issues](https://img.shields.io/github/issues/kaoDev/react-lazy-svg?style=flat-square)](https://github.com/kaoDev/react-lazy-svg/issues) +[![minified bundle size](https://img.shields.io/bundlephobia/minzip/react-lazy-svg?style=flat-square)](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(); +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); } - 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; }