A Webpack loader that inlines SVG files, converting all of its nodes to paths. Useful for line art animations.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintrc
.flowconfig
.gitignore
.jscsrc
.tern-project
README.md
index.js
package.json
test.svg

README.md

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: /^(?!.*lineart\.svg$).*\.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 src={lineArt} />

Inspiration and Prior Art