.. | ||
build | ||
main.css | ||
main.html | ||
main.js | ||
README.md | ||
webpack.config.js |
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
import './logo.svg';
module.exports = 'sprite.svg#logo-usage';
Import from CSS
.logo {background: url('./logo.svg')}
.logo {background: url('sprite.svg#logo-usage')}
Import from HTML
<img src="./logo.svg" alt="">
<img src="sprite.svg#logo-usage" alt="">