Skip to content

A Webpack loader that inlines SVG files, converting all of its nodes to paths. Useful for line art animations.

Notifications You must be signed in to change notification settings

tptee/line-art-loader

Repository files navigation

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

About

A Webpack loader that inlines SVG files, converting all of its nodes to paths. Useful for line art animations.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published