Administrator eec7f449c9 first commit		%!s(int64=4) %!d(string=hai) anos
..
build	eec7f449c9 first commit	%!s(int64=4) %!d(string=hai) anos
README.md	eec7f449c9 first commit	%!s(int64=4) %!d(string=hai) anos
main.css	eec7f449c9 first commit	%!s(int64=4) %!d(string=hai) anos
main.html	eec7f449c9 first commit	%!s(int64=4) %!d(string=hai) anos
main.js	eec7f449c9 first commit	%!s(int64=4) %!d(string=hai) anos
webpack.config.js	eec7f449c9 first commit	%!s(int64=4) %!d(string=hai) anos

Extracted sprite example

Extract SVG sprite as separate file with extract: true option (see webpack config). When loader is in extract mode, the returning value is extracted sprite file URL with symbol id at the end, e.g. sprite.svg#symbolId. This makes possible to use SVG stacking technique which supported by most of browsers except of Safari (both desktop and mobile) and Android browser prior to 4.4.4.

Demo

Import from JS

Input

import './logo.svg';

Output

module.exports = 'sprite.svg#logo-usage';

Import from CSS

Input

.logo {background: url('./logo.svg')}

Output

.logo {background: url('sprite.svg#logo-usage')}

Import from HTML

Input

<img src="./logo.svg" alt="">

Output

<img src="sprite.svg#logo-usage" alt="">

README.md

Extracted sprite example

Demo

Import from JS

Import from CSS

Import from HTML