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

1npm 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:

1module.exports = {
2    ...
3    module: {
4        rules: [
5            { test: /\.css$/, use: [
6                'style-loader',
7                'css-loader',
8                'svg-classic-sprite-loader',
9            ] },
10            { test: /\.svg$/, use: {
11                loader: 'file-loader',
12                options: {
13                    name: '[name].[ext]'
14                }
15            } },
16        ],
17    },
18};

Use svgs in a CSS file:

1.foo {
2    background: url(./assets/check.svg);
3}
4.bar {
5    background: url(./assets/accessory.svg);
6}

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

1.foo {
2    background: url(sprite.svg) -20px -20px no-repeat;
3}
4.bar {
5    background: url(sprite.svg) -92px -20px no-repeat;
6}

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

1/* webpack.config.js */
2loader: 'svg-classic-sprite-loader',
3options: {
4    filter: 'query',
5},

1/* css */
2.test {
3    background: url(./assets/log-check.svg?sprite);
4}
5.test1 {
6    background: url(./assets/check.svg?sprite=sprite);
7}
8.test2 {
9    background: url(./assets/apm-check.svg);
10}

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

Output multiple sprites

1.foo {
2    background: url(./assets/check.svg?sprite=sprite1);
3}
4.bar {
5    background: url(./assets/accessory.svg?sprite=sprite2);
6}
7...

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

1/* webpack.config.js */
2loader: 'svg-classic-sprite-loader',
3options: {
4    filter: /log/,
5},

1/* css */
2.test{
3    background: url(./assets/log-check.svg?sprite=sprite1);
4}
5.test1{
6    background: url(./assets/check.svg?sprite=sprite1);
7}

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