Skip to content

Instantly share code, notes, and snippets.

@dominikwilkowski

dominikwilkowski/README.md

Last active September 26, 2018 04:25
Show Gist options
  • Save dominikwilkowski/f1845b5696115b56617c272a47c2571f to your computer and use it in GitHub Desktop.
Save dominikwilkowski/f1845b5696115b56617c272a47c2571f to your computer and use it in GitHub Desktop.
Download ZIP
SVG with two colors embedded
Raw
README.md

SVG with two colors embedded

Raw
index.html
<!doctype HTML>
<html lang="en-AU">
<head>
<title>test</title>
</head>
<body>
<style>
.icon {
color: red;
fill: blue;
}
.icon:hover {
color: rebeccapurple;
fill: hotpink;
}
</style>
<svg class="icon" role="img" title="Code">
<use xlink:href="icons.svg#code"/>
</svg>
<svg class="icon" role="img" title="Heart">
<use xlink:href="icons.svg#heart"/>
</svg>
<svg class="icon" role="img" title="Design">
<use xlink:href="icons.svg#design"/>
</svg>
<script>
!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.svg4everybody=b()}):"object"==typeof exports?module.exports=b():a.svg4everybody=b()}(this,function(){/*! svg4everybody v2.0.0 | github.com/jonathantneal/svg4everybody */
function a(a,b){if(b){var c=!a.getAttribute("viewBox")&&b.getAttribute("viewBox"),d=document.createDocumentFragment(),e=b.cloneNode(!0);for(c&&a.setAttribute("viewBox",c);e.childNodes.length;)d.appendChild(e.firstChild);a.appendChild(d)}}function b(b){b.onreadystatechange=function(){if(4===b.readyState){var c=document.createElement("x");c.innerHTML=b.responseText,b.s.splice(0).map(function(b){a(b[0],c.querySelector("#"+b[1].replace(/(\W)/g,"\\$1")))})}},b.onreadystatechange()}function c(c){function d(){for(var c;c=e[0];){var j=c.parentNode;if(j&&/svg/i.test(j.nodeName)){var k=c.getAttribute("xlink:href");if(f&&(!g||g(k,j,c))){var l=k.split("#"),m=l[0],n=l[1];if(j.removeChild(c),m.length){var o=i[m]=i[m]||new XMLHttpRequest;o.s||(o.s=[],o.open("GET",m),o.send()),o.s.push([j,n]),b(o)}else a(j,document.getElementById(n))}}}h(d,17)}c=c||{};var e=document.getElementsByTagName("use"),f="shim"in c?c.shim:/\bEdge\/12\b|\bTrident\/[567]\b|\bVersion\/7.0 Safari\b/.test(navigator.userAgent)||(navigator.userAgent.match(/AppleWebKit\/(\d+)/)||[])[1]<537,g=c.validate,h=window.requestAnimationFrame||setTimeout,i={};f&&d()}return c});
svg4everybody();
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
sprite.svg
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="design" viewBox="0 0 40 60">
<path fill="currentColor" fill-rule="nonzero" d="M39 27L23.3 1.2a2 2 0 0 0-3.5-.1L1.5 26.8c-.7.9-1 2.1-1 3.1v26.4c0 2 1.6 3.7 3.7 3.7h32c2 0 3.7-1.6 3.7-3.7V29.8a6 6 0 0 0-.9-2.9zm-12.5 0A7.3 7.3 0 0 0 14 27 7.5 7.5 0 0 0 8 23.5H6.8l7.8-10.9h12.7l7 11.1-1.8-.2a7 7 0 0 0-6 3.4zM25 39v9.9h-9.8V31a5 5 0 0 1 4.9-5 5 5 0 0 1 4.9 5V39zM21.4 3.2l4.3 7h-9.3l5-7zM3 38.9V31a5 5 0 0 1 5-5 5 5 0 0 1 4.9 5v17.8H3l-.2-.1v-9.8zm34.5 17.4c0 .7-.6 1.2-1.2 1.2h-32c-.6 0-1.3-.5-1.3-1.2v-5h34.5v5zm0-10v2.4l-.1.1h-9.7V32.4c0-3.7 2-6.4 4.9-6.4a5 5 0 0 1 5 5.1v15.2z"/>
</symbol>
<symbol id="heart" viewBox="0 0 81 80">
<path fill="currentColor" fill-rule="nonzero" d="M49.01 28.07c2.6 0 5.13.94 7.14 2.89a10 10 0 0 1 0 14.08L41.7 59.63c-.67.68-1.68.68-2.35 0L25.07 45.2a10.17 10.17 0 0 1-.33-14.08 9.8 9.8 0 0 1 7.14-3.06c2.52 0 5.04.93 6.97 2.89l1.6 1.6 1.59-1.6A9.75 9.75 0 0 1 49 28.07zm-8.57-11.1a2.27 2.27 0 0 1-2.26-2.3V2.3a2.27 2.27 0 1 1 4.53 0v12.38c0 1.28-1 2.3-2.27 2.3zM22.05 22.3l-7.9-9.42c-.83-.93-.67-2.37.26-3.22.92-.85 2.35-.68 3.2.25l7.89 9.5c.84.93.67 2.38-.26 3.22a2.25 2.25 0 0 1-3.19-.33zm-7.14 16.28h-.42l-12.1-2.12a2.2 2.2 0 0 1-1.84-2.63 2.18 2.18 0 0 1 2.6-1.87l12.1 2.12a2.2 2.2 0 0 1 1.85 2.63 2.18 2.18 0 0 1-2.19 1.87zm1.93 13.4c1.1-.68 2.52-.26 3.02.76.6 1.1.26 2.55-.84 3.14L8.36 62.1a1.7 1.7 0 0 1-1.1.33c-.75 0-1.5-.34-1.93-1.1-.59-1.1-.25-2.55.84-3.14l10.67-6.2zm15.54 11.36c1.18.43 1.76 1.7 1.26 2.97l-4.2 11.62a2.24 2.24 0 0 1-2.1 1.53c-.25 0-.5-.09-.76-.17a2.37 2.37 0 0 1-1.34-2.97l4.2-11.62a2.33 2.33 0 0 1 2.94-1.36zm19.07 1.36l4.11 11.62a2.33 2.33 0 0 1-1.34 2.97c-.25.08-.5.17-.76.17-.92 0-1.76-.6-2.1-1.53l-4.2-11.62a2.33 2.33 0 0 1 1.35-2.97 2.3 2.3 0 0 1 2.94 1.36zm23.18-6.53c1.1.6 1.51 2.04.76 3.22a2.33 2.33 0 0 1-1.94 1.1c-.33 0-.75-.16-1.09-.33l-10.66-6.2a2.35 2.35 0 0 1-.84-3.13 2.3 2.3 0 0 1 3.1-.85l10.67 6.2zm5.71-24.42c.17 1.27-.67 2.45-1.85 2.63L66.4 38.5h-.42a2.24 2.24 0 0 1-2.18-1.87 2.34 2.34 0 0 1 1.84-2.63l12.1-2.12c1.17-.17 2.35.6 2.6 1.87zm-23.26-10.7c-.5 0-1.01-.16-1.43-.59-.93-.84-1.1-2.28-.25-3.22l7.89-9.5c.84-.93 2.27-1.1 3.2-.25.92.85 1.09 2.29.25 3.22l-7.9 9.5c-.5.6-1.1.85-1.76.85z"/>
</symbol>
<symbol id="code" viewBox="0 0 59 63">
<g fill-rule="nonzero">
<path fill="currentColor" d="M12.7 25.7c-3.3 0-6.5-1.3-9-3.7A12.8 12.8 0 0 1 1 8c.2-.5.7-.9 1.2-1 .6-.1 1.2.1 1.6.5l5.9 5.9L13 9.9l-5.8-6c-.5-.4-.6-1-.5-1.5.1-.6.5-1 1-1.3C12.5-1 18 0 21.6 3.9c2.4 2.4 3.7 5.5 3.7 9a12.6 12.6 0 0 1-12.6 12.8zM3.6 12c-.2 2.7.7 5.3 2.6 7.4A9.1 9.1 0 0 0 21.8 13a9.2 9.2 0 0 0-10-9.1l5 5c.3.3.4.8.4 1.2 0 .5-.2 1-.4 1.3l-5.9 6c-.7.6-1.7.6-2.4 0L3.6 12zM46.3 59.6a12.7 12.7 0 0 1-9-21.6c5-5 13-5 17.8 0 3.7 3.7 4.7 9.1 2.8 13.9-.2.6-.7.9-1.3 1-.5.1-1.1-.1-1.6-.4l-5.8-6-3.5 3.5 5.9 6c.4.4.6 1 .4 1.6 0 .5-.4 1-1 1.2-1.5.5-3 .8-4.7.8zm0-22c-2.3 0-4.7 1-6.4 2.7a9.4 9.4 0 0 0 0 13 9 9 0 0 0 7.3 2.7l-5.1-5c-.4-.3-.5-.8-.5-1.2 0-.5.3-1 .5-1.3l5.8-6c.7-.6 1.7-.6 2.4 0l5 5c.2-2.6-.7-5.3-2.7-7.3a9 9 0 0 0-6.3-2.6z"/>
<path d="M37.6 41.3c-.4 0-.9-.1-1.2-.4l-18-18.4c-.7-.7-.7-1.7 0-2.4s1.7-.7 2.4 0l18 18.2c.7.7.7 1.7 0 2.4-.4.4-.7.6-1.2.6z"/>
<path d="M24.1 37.6c-.3 0-.8-.1-1-.3-.7-.6-.8-1.8-.3-2.5l22.4-28c.6-.7 1.7-.9 2.4-.3.7.6.8 1.8.2 2.5L25.5 37c-.4.4-.8.6-1.4.6z"/>
<path d="M9.4 62c-1.8 0-3.6-.5-5.1-1.8A8.3 8.3 0 0 1 3 48.6L13 36.4a8 8 0 0 1 11.4-1.1 8.2 8.2 0 0 1 1.2 11.6L15.7 59a8 8 0 0 1-6.3 3zm9.9-25.2h-.5c-1.2.1-2.4.7-3.2 1.7L5.8 50.7c-1.6 2-1.4 5.1.7 6.7 2 1.7 5 1.4 6.6-.7L23 44.6c.8-1 1.1-2.2 1-3.5a4.6 4.6 0 0 0-1.7-3.3c-1-.7-2-1-3-1zM49.5 3.2l.4.2c1 .8 1.2 2.4.4 3.5l-4.5 6-4.3-3.2 4.6-6c.8-1.1 2.3-1.4 3.4-.5z"/>
<path d="M16.2 57.4c-.3 0-.8 0-1-.3L5 49c-.7-.5-1-1.7-.3-2.4.6-.8 1.8-.9 2.5-.3l10.1 8.1c.8.6 1 1.8.4 2.5-.5.3-1 .5-1.5.5z"/>
</g>
</symbol>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment