react-svg-atlas

Use SVG store to greatly reduce HTML file size, and isolate one SVG from another. This is React version of gulp-svgstore

Combine svg files into one with <symbol> elements. Read more about this in CSS Tricks article.

PS: The proper way to isolate SVG is to use SVGO's prefixId plugin

Usage

1. Install

  yarn add react-svg-atlass

2. Wrap your SVG with HOC

import inAtlas from 'react-svg-atlas';
import MySVG from './my.svg'

// wrap
const SVG = inAtlass(MySVG)

// use
const Component = () => <SVG />

3. Define SVG Store

import {SVGAtlas} from 'react-svg-atlas'

 const ApplicationRoot = () => (
   <div>
        <MySuperApplicationStuff />
        <SVGAtlas />
   </div> 
 )

Keep in mind:

• In case of SSR SVGAtlas must be placed after all the SVGs used. All SVGs must be defined by the time Atlas got rendered.
• For frontend only tasks SVGAtlas could be places anywhere.

SVG Store

There is a few different SVG stores avaialable

1. SVGLocalStore, or SVGAtlas - default SVG store. Uses local SVG to store the data. SSR-friendly. Could not isolate sprites. Fast.
2. SVGBlobStore - moves sprites off page, able to work in isolation. Require isolation to be set. Medium.
3. SVGRasterStore - converts sprites to images, isolated by default. Slow to spinup, fast to work.

Isolation - one SVG could not soil another with parasite styles. In the same time you also could not set any styles. For SVGBlobStore require isolation prop to be set on SVG sprite.

the difference?

The best way to understand the difference, is to explore the storybook.

Benefits

1. react-svg-atlas replaces your SVG with a simple use tag, keeping only the reference to the object. The real SVG will be placed inside the Atlass(store). This could greatly reduce amount of HTML code, and means - Atlas should be used, in case you have used some icon at least twice.

2. use places referenced into the shadow dom, isolating it from outer world.

3. react-svg-atlas could replace SVG icon by autogenerated png image, greatly increasing client-side performance. By fact - SVGs are slowing down rendering, page scrolling, everything! PNGs works 10 times faster. But took some time (miliseconds) to generate.

4. Blob and Raster Atlases could isolate one SVG from another.

Cons

1. Due to shadow dom client-side performance is actually worser. react-svg-atlas could greatly speed up React rendering times, but it cost more for browser to render the suff. Recalculate styles could actually took twice more time. This is not the issue

Controlling the render (and isolation)

inAtlas will pass all unknown props down to SVG, resulting the new atlass element to be created. Props to be filtered out, and used by inAtlass by it own:
- style, will be passed down to use tag. - stroke, will be passed down to use tag. - fill, will be passed down to use tag.
- getSize, will be used to control the side of SVG. - fast, perform SVG-to-PNG render.

  const SVG = inAtlass(MySVG)
  <SVG width={10} /* height to be auto calculated*/ />
  <SVG width={10} height={20} />
  <SVG getSize={({width, height}) => ({width:width/2, height:height*2})} />
  
  <SVG stroke="red" fill="blue" />
  <SVG style={{stroke:"red", fill:"blue"}} />
  
  <SVG anyotherProp /> // will be passed down to the wrapped SVG  

Bypassing new props

  import {inIsolatedAtlas, constructAtlas} from 'react-svg-atlas';
  inIsolatedAtlas(SVG) -> will pass ALL props
  constructAtlas({prop1, prop2}) will construct a new HOC
  
  import {SVGReference} from 'react-svg-atlas';
  // import and use low-level API
  
  <SVGReference {...someProps}><SVG {...anotherProps}/></SVGReference>;

Using the CSS styles with isolation.

In case of isolation local CSS styles will NOT affect embed SVG. To let this happened just wrap SVG with a RecomputeStyle

import inAtlas, {inIsolatedAtlas, RecomputeStyle} from 'react-svg-atlass';

const SVG1 = inAtlas(SVG);        // will work is case you specify `isolation` prop
const SVG2 = inIsolatedAtlas(SVG);// will work always

<div style={{stroke:'red'}}>
 <RecomputeStyle>
   <SVG />
 </RecomputeStyle>
</div>

//is equal to

<SVG style={{stroke:'red'}}/>

The only thing you have to know - styled will be measured once.

SSR details

To maintain consistency across renders - use SVGAtlasContext

import {SVGAtlas, SVGAtlasContext} from 'react-svg-atlas'

 const ApplicationRoot = () => (
   <SVGAtlasContext>
       <div>
            <MySuperApplicationStuff />
            <SVGAtlas />
       </div> 
   </SVGAtlasContext>
 )

It will scope internal counter, and make all the renders the same.

Licence MIT