Stas Gavrylov

@stasgavrylov

Lead Frontend Engineer @ Rails Reactor

Slides:

https://slides.com/stasgavrylov/svg-workflow/live

Seamless SVG workflow
in

create-react-app

without

eject

ing

Problem

Solutions

Option 0: <img> tag

Solutions

Option 1: Duplicate files

Solutions

Option 2: Inline SVGs

Solutions

Option 3: Icon Font

Solutions

Option 4:

"npm run eject" + some-svg-loader

Solutions

Option 5: SVG Sprites

svg-sprite
+
svg4everybody
+
<use>

svg-sprite

1. Supports different outputs, uses SVGO, highly configurable
2. File names will become IDs
3. Remove FILL and STROKE attributes from SVGs in advance

My basic script

svg4everybody

Adds external SVG support for all browsers

<use> element

Simplest use case

<SVGIcon /> (code)

SvgIcon.css

App.js

Links

• Inline SVGs vs Icon Fonts [CSS-Tricks]

• svg-sprite [npm]

• My sprite-creating script

• svg4everybody [npm]

• <SvgIcon />

• Styling SVG <use> content with CSS [Tympanus]