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:
moduleexports =...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:
The loader will merge svgs into a sprite file, and replace CSS codes:
For more examples, check here.
Features✨
- 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 */
log-check.svg
and check.svg
are merged into sprite.svg
. Finally output files are sprite.svg
and apm-check.svg
.
Output multiple sprites
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 */
Only log-check.svg
is merged into sprite1.svg
. Finally output files are sprite1.svg
and check.svg
.
Changelog
See Releases