0.0.1 • Published 6 years ago

webpack-svg-sprite v0.0.1

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

Webpack SVG Sprite Plugin

Build an SVG sprite with Webpack and svg-sprite using configuration rather than imported dependencies in your app bundles. This is helpful if your app is not entirely powered by your bundled files - for example, a multi-page application made up of server-side and client-side components.

Usage

webpack.config.babel.js

import path from 'path';
import webpack from 'webpack';
import WebpackSVGSpritePlugin from 'webpack-svg-sprite';
import icons from './svg-sprite.js';
...
module.exports = {
    ...
    plugins: [
        new WebpackSVGSpritePlugin({icons}),
        ...
    ]
    ...
};

svg-sprite.js

export default [
    'user',
    'lock',
    'menu',
    ...
];

It's up to you to include the sprite in your app now, but once you've got it, you can now do this:

    <svg>
        <use href="#user"></use>
    </svg>

Options

NameTypeDefaultDescription
iconsArray<String> | String[]Either an array of icon names, or a reference to a config file containing the list. Each icon's file name will be used as the ID (i.e. icon-name.svg will be 'icon-name').
contextString'./icons'The path to the folder containing the separate SVG icon files.
destString'./dist'The path to the output folder where the generated SVG sprite file will be placed.
filenameString'sprite.svg' or the name of the config file if options.icons is a string.The name of the generated SVG sprite file. (i.e. 'svg-sprite.svg'
0.0.1

6 years ago