svg-classic-sprite-loader

• 中文说明

Webpack loader for creating classic SVG sprites.

The main reason we make a different loader from svg-sprite-loader is that non-classic way (not using background-position) to create svg sprite does not work in Safari.

This article shows several ways to create svg sprites. You can take a look in different browers.

Installation

npm install --save-dev svg-classic-sprite-loader

Note: This loader does not support Webpack@4.x currently.

Quick Start

Add loader in webpack.config.js like this:

module.exports = {
    ...
    module: {
        rules: [
            { test: /\.css$/, use: [
                'style-loader',
                'css-loader',
                'svg-classic-sprite-loader',
            ] },
            { test: /\.svg$/, use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            } },
        ],
    },
};

Use svgs in a CSS file:

.foo {
    background: url(./assets/check.svg);
}
.bar {
    background: url(./assets/accessory.svg);
}

The loader will merge svgs into a sprite file, and replace CSS codes:

.foo {
    background: url(sprite.svg) -20px -20px no-repeat;
}
.bar {
    background: url(sprite.svg) -92px -20px no-repeat;
}

For more examples, check here.

Features:sparkles:

• Easy to use, just set up the associated svg path in CSS only.
• Generating sprite according to need.
• Output multiple sprite.

Config

loader options

defaultName

• Type: string
• Default: 'sprite'

Default file name of sprite output file.

padding

• Type: number
• Default: 'sprite'

The margin between svgs in sprite.

filter

• Type: string
• Default: 'all'

Options: 'all'、'query'、RegExp

How to filter svg files for merging:

• 'all': All imported svgs will be merged.
• 'query': Only svg path with ?sprite query param will be merged.
• RegExp: Only svg path matched by RegExp

queryParam

Customize key of query param in svg path. Only works when filter: 'query'

• Type: string
• Default: 'sprite'

Examples

Use query

/* webpack.config.js */
loader: 'svg-classic-sprite-loader',
options: {
    filter: 'query',
},

/* css */
.test {
    background: url(./assets/log-check.svg?sprite);
}
.test1 {
    background: url(./assets/check.svg?sprite=sprite);
}
.test2 {
    background: url(./assets/apm-check.svg);
}

log-check.svg and check.svg are merged into sprite.svg. Finally output files are sprite.svg and apm-check.svg.

Output multiple sprites

.foo {
    background: url(./assets/check.svg?sprite=sprite1);
}
.bar {
    background: url(./assets/accessory.svg?sprite=sprite2);
}
...

check.svg is merged into sprite1.svg, and accessory.svg is merged into sprite2. Finally output files are sprite1.svg and sprite2.svg.

Use RegExp

/* webpack.config.js */
loader: 'svg-classic-sprite-loader',
options: {
    filter: /log/,
},

/* css */
.test{
    background: url(./assets/log-check.svg?sprite=sprite1);
}
.test1{
    background: url(./assets/check.svg?sprite=sprite1);
}

Only log-check.svg is merged into sprite1.svg. Finally output files are sprite1.svg and check.svg.

Changelog

See Releases

Contribution Guide

See Contributing Guide

LICENSE

MIT