Skip to content

Instantly share code, notes, and snippets.

@oscarotero
Created September 27, 2018 08:07
Show Gist options
  • Save oscarotero/ecae90d902443859e3c7c47e57dcfd31 to your computer and use it in GitHub Desktop.
Save oscarotero/ecae90d902443859e3c7c47e57dcfd31 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0;
}
textarea {
border: solid 2px black;
padding: 1rem;
width: 100px;
height: 100px;
box-sizing: border-box;
}
svg {
width: 100%;
height: auto;
display: block;
}
#preview {
display: inline-block;
cursor: pointer;
width: 100px;
height: 100px;
margin-left: 1rem;
}
#preview:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<textarea placeholder="Drop here" id="input"></textarea>
<div id="preview"></div>
<script type="text/javascript">
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs=saveAs||function(e){"use strict";if(!("undefined"==typeof e||"undefined"!=typeof navigator&&/MSIE [1-9]\./.test(navigator.userAgent))){var t=e.document,n=function(){return e.URL||e.webkitURL||e},o=t.createElementNS("http://www.w3.org/1999/xhtml","a"),r="download"in o,a=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},i=/constructor/i.test(e.HTMLElement)||e.safari,d=/CriOS\/[\d]+/.test(navigator.userAgent),f=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},s="application/octet-stream",u=4e4,c=function(e){var t=function(){"string"==typeof e?n().revokeObjectURL(e):e.remove()};setTimeout(t,u)},l=function(e,t,n){t=[].concat(t);for(var o=t.length;o--;){var r=e["on"+t[o]];if("function"==typeof r)try{r.call(e,n||e)}catch(a){f(a)}}},v=function(e){return/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)?new Blob([String.fromCharCode(65279),e],{type:e.type}):e},p=function(t,f,u){u||(t=v(t));var p,w=this,m=t.type,y=m===s,S=function(){l(w,"writestart progress write writeend".split(" "))},h=function(){if((d||y&&i)&&e.FileReader){var o=new FileReader;return o.onloadend=function(){var t=d?o.result:o.result.replace(/^data:[^;]*;/,"data:attachment/file;"),n=e.open(t,"_blank");n||(e.location.href=t),t=void 0,w.readyState=w.DONE,S()},o.readAsDataURL(t),void(w.readyState=w.INIT)}if(p||(p=n().createObjectURL(t)),y)e.location.href=p;else{var r=e.open(p,"_blank");r||(e.location.href=p)}w.readyState=w.DONE,S(),c(p)};return w.readyState=w.INIT,r?(p=n().createObjectURL(t),void setTimeout(function(){o.href=p,o.download=f,a(o),S(),c(p),w.readyState=w.DONE})):void h()},w=p.prototype,m=function(e,t,n){return new p(e,t||e.name||"download",n)};return"undefined"!=typeof navigator&&navigator.msSaveOrOpenBlob?function(e,t,n){return t=t||e.name||"download",n||(e=v(e)),navigator.msSaveOrOpenBlob(e,t)}:(w.abort=function(){},w.readyState=w.INIT=0,w.WRITING=1,w.DONE=2,w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null,m)}}("undefined"!=typeof self&&self||"undefined"!=typeof window&&window||this);"undefined"!=typeof module&&module.exports?module.exports.saveAs=saveAs:"undefined"!=typeof define&&null!==define&&null!==define.amd&&define("FileSaver.js",function(){return saveAs});
</script>
<script type="text/javascript">
const textarea = document.getElementById('input');
const preview = document.getElementById('preview');
let value;
textarea.addEventListener('input', ev => {
try {
value = JSON.parse(textarea.value);
textarea.value = '';
preview.innerHTML = value.svg;
} catch (error) {
alert('Erro');
textarea.value = '';
}
});
preview.addEventListener('click', ev => {
const blob = new Blob([value.svg], {type: "text/xml+svg;charset=utf-8"});
saveAs(blob, value.icon.commonName + '.svg');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment