https://github.com/zmitry/svg-loader-example
https://github.com/zmitry/svg-loader-example
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zmitry/svg-loader-example
- Owner: zmitry
- Created: 2018-02-28T00:16:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-28T00:18:17.000Z (over 8 years ago)
- Last Synced: 2025-03-23T00:26:18.432Z (about 1 year ago)
- Language: JavaScript
- Size: 50.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```
[Output](build/main.html)
```html
```
- [sprite.svg](build/sprite-c9cbc8.svg)
- [main.html](build/main.html)
- [main.css](build/main.css)
- [main.js](build/main.js)