Amio
6 years ago
2 changed files with 76 additions and 0 deletions
@ -0,0 +1,8 @@ |
|||||
|
# badgen-icons |
||||
|
|
||||
|
Icons for badgen.net |
||||
|
|
||||
|
## Add an icon |
||||
|
|
||||
|
- Optimize markup with [svgomg](https://jakearchibald.github.io/svgomg/) |
||||
|
- Preview with `preview/index.html` |
||||
@ -0,0 +1,68 @@ |
|||||
|
<html> |
||||
|
<head> |
||||
|
<style> |
||||
|
body { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
#preview { |
||||
|
text-align: center; |
||||
|
padding: 15vh 0; |
||||
|
} |
||||
|
#preview svg { |
||||
|
transform: scale(2); |
||||
|
} |
||||
|
#markup { |
||||
|
border: none; |
||||
|
box-sizing: border-box; |
||||
|
background: #EEE; |
||||
|
padding: 1em 1.2em; |
||||
|
height: 30vh; |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="preview"></div> |
||||
|
<textarea id="markup" placeholder="paste svg markup"></textarea> |
||||
|
<script> |
||||
|
const markup = document.querySelector('#markup') |
||||
|
const preview = document.querySelector('#preview') |
||||
|
|
||||
|
function createBadge (svg) { |
||||
|
const base64 = svg |
||||
|
? `data:image/svg+xml;base64,${btoa(markup.value)}` |
||||
|
: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' |
||||
|
|
||||
|
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53.6" height="30" viewBox="0 0 536 200"> |
||||
|
<linearGradient id="a" x2="0" y2="100%"> |
||||
|
<stop offset="0" stop-opacity=".1" stop-color="#EEE"/> |
||||
|
<stop offset="1" stop-opacity=".1"/> |
||||
|
</linearGradient> |
||||
|
<mask id="m"><rect width="536" height="200" rx="30" fill="#FFF"/></mask> |
||||
|
<g mask="url(#m)"> |
||||
|
<rect width="212" height="200" fill="#555"/> |
||||
|
<rect width="324" height="200" fill="#08C" x="212"/> |
||||
|
<rect width="536" height="200" fill="url(#a)"/> |
||||
|
</g> |
||||
|
<g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110"> |
||||
|
<text x="172" y="148" textLength="0" fill="#000" opacity="0.25"/> |
||||
|
<text x="162" y="138" textLength="0"/> |
||||
|
<text x="267" y="148" textLength="224" fill="#000" opacity="0.25">icon</text> |
||||
|
<text x="257" y="138" textLength="224">icon</text> |
||||
|
</g> |
||||
|
<image x="40" y="35" width="130" height="130" xlink:href="${base64}"/> |
||||
|
</svg>` |
||||
|
} |
||||
|
|
||||
|
// init badge |
||||
|
preview.innerHTML = createBadge() |
||||
|
|
||||
|
// update badge on input |
||||
|
markup.oninput = function () { |
||||
|
preview.innerHTML = createBadge(markup.value) |
||||
|
} |
||||
|
</script> |
||||
|
</body> |
||||
|
<body> |
||||
|
</html> |
||||
Loading…
Reference in new issue