56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
|
# 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)
|