| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- # Extracted sprite example
- Extract SVG sprite as separate file with `extract: true` option (see [webpack config](webpack.config.js)).
- 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](https://css-tricks.com/svg-fragment-identifiers-work/#article-header-id-4) which
- [supported by most of browsers](http://caniuse.com/#feat=svg-fragment) except of Safari (both desktop and mobile) and Android browser prior to 4.4.4.
- ### [Demo](build/main.html)
- ### Import from JS
- [Input](main.js)
-
- ```js
- import './logo.svg';
- ```
- [Output](build/main.js#L87)
- ```js
- module.exports = 'sprite.svg#logo-usage';
- ```
- ### Import from CSS
- [Input](main.css)
- ```css
- .logo {background: url('./logo.svg')}
- ```
- [Output](build/main.css)
- ```css
- .logo {background: url('sprite.svg#logo-usage')}
- ```
- ### Import from HTML
- [Input](main.html)
- ```html
- <img src="./logo.svg" alt="">
- ```
- [Output](build/main.html)
- ```html
- <img src="sprite.svg#logo-usage" alt="">
- ```
- - [sprite.svg](build/sprite-c9cbc8.svg)
- - [main.html](build/main.html)
- - [main.css](build/main.css)
- - [main.js](build/main.js)
|
