line-art-loader
A Webpack loader that inlines SVG files, converting all of its nodes to paths. Useful for line art animations in React components.
Usage
npm install --save line-art-loader
The first loader handles all SVG files with the pattern *.lineart.svg. The second (optional) loader handles all other SVG files.
module: loaders: test: /\.lineart.svg$/ loader: 'svg-inline-loader!line-art-loader' test: /^.*\.svg$/i loader: YOUR_LOADER_HERE
React Component
This loader integrates easily with the <IconSVG />
component from svg-inline-loader (https://github.com/sairion/svg-inline-loader), which is included as a dependency. Use it like so:
import lineArt from 'test.lineart.svg'; // later, in render()<IconSVG = />
Inspiration and Prior Art
- vivus: https://github.com/maxwellito/vivus
- Animated Line Drawing in SVG: https://jakearchibald.com/2013/animated-line-drawing-svg/
- Codrops SVG Drawing Animation: http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/
- The original: Polygon: PS4 Review: http://www.polygon.com/a/ps4-review/video_review