A tiny, intuitive, robust, caching solution for injecting SVG Sprites into the DOM.
Developed and maintained by INCORS, the creators of iconfu.com.
SVGSpriteInject loads an SVG Sprite from an external source and puts it inline at the end of the HTML document.
In order to apply CSS styles to SVG Sprite images, the SVG Sprite has to be inline in the DOM. With the SVG Sprite injector you can keep your SVGs as individual files, but you can still style the SVG with CSS.
Include the SvgSpriteInject Javascript file in the <head> element of your HTML document
<head>
...
<script src="svg-sprite-inject.min.js"></script>
...
</head>Download plain version: svg-sprite-inject.js
Download minified version: svg-sprite-inject.min.js
If you are using npm do:
$ npm install @iconfu/svg-sprite-injectIf you are using Yarn
$ yarn add @iconfu/svg-sprite-inject- Call
SvgSpriteInject(pathToSvg)to inject an SVG Sprite. - Display the SVGs of the SVG Sprite in the HTML document with
<svg ...><use xlink:href="#..."></use></svg>
Example:
<html>
<head>
<script src="svg-sprite-inject.min.js"></script>
<script>
// Inject the SVG Sprite
SvgSpriteInject('path/to/svg-sprite.svg');
</script>
</head>
<body>
<!-- Show a Sprite SVG image -->
<svg width="128" height="128"><use xlink:href="#my-sprite-image"></use></svg>
</body>
</html>That's all: The SVG Sprite gets injected and the images referencing the SVG Sprite will show!!!
✨ ✨ ✨
- Reduce requests: When injecting each SVG individually there is a network request for each SVG. With SVG Sprites you can reduce the this to only one request.
- Improve performance: Having the same SVG multiple times in the same document (like in large tables) can impact the rendering performance if having each SVG inline. With SVG Sprites you only reference the same SVG.
- Reduced size: If multiple images share the same SVG Filters the overall download size can be reduced, because the filters can be reused.
| Function | Description |
|---|---|
| SVGSpriteInject(path, options) | Loads an SVG Sprite with the specified path and puts it in the DOM at the end of the document. The optional second parameter sets the options for this injection. An SVGSpriteHandler object is returned. |
| Function | Description |
|---|---|
| remove() | Remove the SVG Sprite from the document. |
| Property name | Type | Default | Description |
|---|---|---|---|
| afterInject | function(svgSprite) | empty function |
Hook after SVG Sprite is injected. The SVG Sprite element is passed as an argument. |
| onLoadFail | function() | empty function |
Hook after SVG load fails. |
<html>
<head>
<script src="svg-sprite-inject.min.js"></script>
<script>
SVGSpriteInject('path/to/svg-sprite.svg', {
afterInject: function(svgSprite) {
// do something when the SVG Sprite is injected
},
onLoadFail: function() {
// do some error handling
}
});
</script>
</head>
<body>
<svg style="width: 128px; height: 128px;"><use xlink:href="#svg-sprite-image-name"></use></svg>
</body>
</html>All modern browsers, and IE11+