Skip to content

Instantly share code, notes, and snippets.

@bennyschudel

bennyschudel/SvgAssetLoader.js

Last active December 13, 2016 13:04
Show Gist options
  • Save bennyschudel/7608748bd45bff39f80a6fdfa62606cb to your computer and use it in GitHub Desktop.
Save bennyschudel/7608748bd45bff39f80a6fdfa62606cb to your computer and use it in GitHub Desktop.
Download ZIP
SVG Asset Loader
Raw
assets.html
<svg id="icon--new-mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M23.5 28h-19c-.3 0-.5-.2-.5-.5v-21c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5s-.2.5-.5.5H5v20h18V15.5c0-.3.2-.5.5-.5s.5.2.5.5v12c0 .3-.2.5-.5.5z"/>
<path d="M27.9 7L25 4.2c-.1-.1-.2-.2-.3-.2s-.3.1-.4.1L22.5 6l-8.8 8.8s-.1.1-.1.2l-2.1 5c-.1.2 0 .4.1.6.1.1.2.1.4.1h.2l4.9-2.1c.1 0 .1-.1.2-.1l8.7-9 1.8-1.8c.2-.2.2-.5.1-.7zM16.8 17.3l-2.1-2.1 8.1-8.1L25 9.2l-8.2 8.1zm-2.6-1.2l1.8 1.8-3.1 1.3 1.3-3.1zm11.5-7.6l-2.1-2.1 1.1-1.1 2.1 2.1-1.1 1.1z"/>
</svg>
<svg id="icon--new-mail2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M23.5 28h-19c-.3 0-.5-.2-.5-.5v-21c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5s-.2.5-.5.5H5v20h18V15.5c0-.3.2-.5.5-.5s.5.2.5.5v12c0 .3-.2.5-.5.5z"/>
<path id="path-id" d="M27.9 7L25 4.2c-.1-.1-.2-.2-.3-.2s-.3.1-.4.1L22.5 6l-8.8 8.8s-.1.1-.1.2l-2.1 5c-.1.2 0 .4.1.6.1.1.2.1.4.1h.2l4.9-2.1c.1 0 .1-.1.2-.1l8.7-9 1.8-1.8c.2-.2.2-.5.1-.7zM16.8 17.3l-2.1-2.1 8.1-8.1L25 9.2l-8.2 8.1zm-2.6-1.2l1.8 1.8-3.1 1.3 1.3-3.1zm11.5-7.6l-2.1-2.1 1.1-1.1 2.1 2.1-1.1 1.1z"/>
</svg>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
[data-svg-asset] > svg {
width: 32px;
height: 32px;
fill: black;
}
</style>
</head>
<body>
<span data-svg-asset="icon--new-mail"></span>
<span data-svg-asset="icon--new-mail2"></span>
<script>
function onLoad() {
var svgAssetLoader = new SvgAssetLoader({ src: 'assets.html' }).load();
}
</script>
<script src="SvgAssetLoader.js" onload="onLoad()"></script>
</body>
</html>
Raw
SvgAssetLoader.js
;(function() {
function SvgAssetLoader(config) {
this.src = config.src;
this.key = config.key || 'svg-asset';
this.doc = undefined;
};
SvgAssetLoader.prototype.load = function() {
var obj = this.obj = document.createElement('object');
obj.onload = this.onLoad.bind(this);
obj.type = 'text/html';
obj.style.visibility = 'hidden';
obj.style.width = '0';
obj.style.height = '0';
obj.style.position = 'absolute';
obj.style.overflow = 'hidden';
obj.style.zIndex = '-1';
obj.data = this.src;
document.body.appendChild(obj);
return this;
};
SvgAssetLoader.prototype.onReady = function() {};
SvgAssetLoader.prototype.onLoad = function(event) {
this.doc = this.obj.contentDocument;
this.assetize(document.body);
this.onReady(this);
};
SvgAssetLoader.prototype.getAsset = function(id) {
var node = this.doc.getElementById(id).cloneNode(true);
var div = document.createElement('div');
div.appendChild(node);
// clean up whitespace a bit ...
var html = div.innerHTML
.replace(/\n\r?/g, '')
.replace(/>\s+</g, '><');
var matches = html.match(/id="[^"]+"/g);
var map = {};
matches.forEach(function(str) {
var id = str.match(/id="([^"]+)"/)[1];
var newId = 'svg-' + (Math.random() + 1).toString(36).substr(-8);
// replace id tags
html = html.split('id="' + id + '"').join('id="' + newId + '"');
// replace id references
html = html.split('(#' + id + ')').join('(#' + newId + ')');
map[id] = newId;
});
return {
html: html,
meta: map
};
};
SvgAssetLoader.prototype.assetize = function(el) {
[].slice.call(el.querySelectorAll('[data-' + this.key + ']'))
.filter(function(node) { return (node.innerHTML === ''); })
.forEach(function(node) {
var id = node.getAttribute('data-' + this.key);
var data = this.getAsset(id);
node.innerHTML = data.html;
}.bind(this));
};
window.SvgAssetLoader = SvgAssetLoader;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment