forked from edent/SuperTinyIcons
Small tool for radius visualization (#23)
* Updated them for a consistent style (all with background) * Added small website tool for previsualization. Fixes #1
This commit is contained in:
Francisco Presencia
committed by
Terence Eden
Terence Eden
parent
e9e1d099a5
commit
ba8b9a73ac
49
index.html
Normal file
49
index.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Super Tiny Social Icons</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.3.2/picnic.min.css">
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
@media all and (max-width: 600px) {
|
||||
body {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
h1, h2 {
|
||||
padding-top: 0;
|
||||
}
|
||||
input {
|
||||
margin: 0 0 .6em 0;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Super Tiny Social Icons</h1>
|
||||
|
||||
<section class="flex two four-800">
|
||||
<h2>Radius %</h2>
|
||||
<label>
|
||||
<input class="rangeout" value="15">
|
||||
</label>
|
||||
<label class="full half-800">
|
||||
<input type="range" value="15" min="0" max="50" name="radius" placeholder="">
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<div class="icons flex three four-500 five-700 six-900"></div>
|
||||
|
||||
<script src="javascript.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
37
javascript.js
Normal file
37
javascript.js
Normal file
@@ -0,0 +1,37 @@
|
||||
var items = [
|
||||
'amazon', 'phone', 'spotify', 'wechat', 'dropbox', 'instagram', 'hackernews',
|
||||
'pinterest', 'stackoverflow', 'whatsapp', 'email', 'linkedin', 'reddit',
|
||||
'steam', 'wikipedia', 'facebook', 'lock', 'rss', 'slideshare', 'telegram',
|
||||
'mail', 'skype', 'tumblr', 'wordpress', 'github', 'pdf', 'vk', 'wire',
|
||||
'twitter', 'youtube', 'google_plus', 'paypal', 'snapchat', 'vimeo', 'flickr',
|
||||
'soundcloud', 'html5', 'mastodon'
|
||||
];
|
||||
|
||||
var container = document.querySelector('.icons');
|
||||
var range = document.querySelector('input[type="range"]');
|
||||
var number = document.querySelector('input.rangeout');
|
||||
range.addEventListener('input', function(e){
|
||||
number.value = parseInt(e.target.value);
|
||||
render(e.target.value);
|
||||
});
|
||||
|
||||
number.addEventListener('input', function(e){
|
||||
range.value = parseInt(e.target.value);
|
||||
render(e.target.value);
|
||||
});
|
||||
|
||||
var urls = items.map(item => '/tiny/' + item + '.svg');
|
||||
var icons;
|
||||
Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => {
|
||||
icons = all;
|
||||
render(range.value);
|
||||
});
|
||||
|
||||
var render = function(radius = 15){
|
||||
console.log('Rendering!', icons);
|
||||
|
||||
icons = icons.map(icon => {
|
||||
return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"');
|
||||
});
|
||||
container.innerHTML = '<div>' + icons.join('</div><div>') + '</div>';
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect fill="#fff" height="512" rx="15%" width="512"/>
|
||||
<path d="m256 152c-52-1-100 43-103 95a103 103 0 0 0 200 43 104 104 0 0 0 -97-138zm0 169c-40 2-74-40-65-79 7-40 54-65 91-48 36 14 52 63 31 95a66 66 0 0 1 -57 32zm131-171c1 20-27 31-41 16-14-14-3-41 17-40 13 0 24 11 24 24z"/>
|
||||
<path d="m424 89c-25-27-64-35-100-33-54 0-109-1-164 1-43 2-85 31-98 73-10 32-5 66-6 98 0 42-1 84 1 126 3 46 37 87 81 98 30 7 62 3 92 4 42 0 83 1 124-1 44-3 85-33 96-76 9-32 5-64 6-97 0-41 1-83-1-125-2-25-13-50-31-68zm-3 250c1 35-23 70-57 77-28 5-56 2-83 3-40-1-80 1-120-1-32-2-61-26-66-58-4-28-1-57-2-86 1-38-1-76 1-114 2-32 26-60 58-65 29-4 59-1 88-2 38 0 76-1 113 1 33 2 62 29 66 62 3 30 1 61 2 92z"/>
|
||||
<rect height="512" rx="15%" width="512"/>
|
||||
<path fill="#fff" d="m256 152c-52-1-100 43-103 95a103 103 0 0 0 200 43 104 104 0 0 0 -97-138zm0 169c-40 2-74-40-65-79 7-40 54-65 91-48 36 14 52 63 31 95a66 66 0 0 1 -57 32zm131-171c1 20-27 31-41 16-14-14-3-41 17-40 13 0 24 11 24 24z"/>
|
||||
<path fill="#fff" d="m424 89c-25-27-64-35-100-33-54 0-109-1-164 1-43 2-85 31-98 73-10 32-5 66-6 98 0 42-1 84 1 126 3 46 37 87 81 98 30 7 62 3 92 4 42 0 83 1 124-1 44-3 85-33 96-76 9-32 5-64 6-97 0-41 1-83-1-125-2-25-13-50-31-68zm-3 250c1 35-23 70-57 77-28 5-56 2-83 3-40-1-80 1-120-1-32-2-61-26-66-58-4-28-1-57-2-86 1-38-1-76 1-114 2-32 26-60 58-65 29-4 59-1 88-2 38 0 76-1 113 1 33 2 62 29 66 62 3 30 1 61 2 92z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 752 B After Width: | Height: | Size: 764 B |
@@ -1,6 +1,6 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect fill="#fff" height="512" rx="15%" width="512"/>
|
||||
<g fill="#134563">
|
||||
<rect fill="#134563" height="512" rx="15%" width="512"/>
|
||||
<g fill="#fff">
|
||||
<path d="m370.4 229.6h-24v-51.2a90.8 90.8 0 0 0 -90.4-90.4 90.8 90.8 0 0 0 -90.4 90.4v51.2h-24v-51.2a114.4 114.4 0 1 1 228.8 0z"/>
|
||||
<path d="m358.4 447.2h-204.8a39 39 0 0 1 -38.4-38.4v-153.6a39 39 0 0 1 38.4-38.4h204.8a39 39 0 0 1 38.4 38.4v153.6a38.4 38.4 0 0 1 -38.4 38.4zm-204.8-204.8c-7.2 0-12.8 5.6-12.8 12.8v153.6c0 7.2 5.6 12.8 12.8 12.8h204.8c7.2 0 12.8-5.6 12.8-12.8v-153.6c0-7.2-5.6-12.8-12.8-12.8z"/>
|
||||
<path d="m281.6 293.6a25.3 25.3 0 0 1 -25.6 25.6 25.3 25.3 0 0 1 -25.6-25.6 25.3 25.3 0 0 1 25.6-25.6c14.4 0 25.6 12 25.6 25.6"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 738 B After Width: | Height: | Size: 738 B |
@@ -1,4 +1,4 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect fill="#fff" height="512" rx="15%" width="512"/>
|
||||
<path d="m86 456c-13 0-23-7-28-18-7-18 4-43 30-69 21-20 50-37 86-50 19-35 37-74 49-107-27-43-32-96-23-125 7-19 17-26 25-29 11-4 23-1 31 7 12 13 16 39 13 79-1 16-6 38-16 64l1 2 20 25 49 59 15-1c60 0 100 13 114 36 5 10 5 21 0 30-7 13-23 20-42 20l-15-1c-24-4-51-23-83-57a613 613 0 0 0 -120 20c-16 29-51 88-77 105-9 7-19 10-29 10zm66-99c-18 9-33 19-45 31-24 23-25 37-24 40l3 1c4 0 10-2 15-5 11-8 31-33 51-67zm197-37c20 19 37 29 51 32l10 1c10 0 17-4 19-7v-4c-5-7-27-20-80-22zm-107-83c-9 23-20 48-33 72 31-8 58-11 74-13h7a1722 1722 0 0 1 -48-59zm-7-154h-1c-3 1-6 6-8 12-7 20-4 53 9 83 4-14 7-26 7-36 4-44-4-56-6-58z" fill="#f00"/>
|
||||
<rect fill="#f00" height="512" rx="15%" width="512"/>
|
||||
<path fill="#fff" d="m86 456c-13 0-23-7-28-18-7-18 4-43 30-69 21-20 50-37 86-50 19-35 37-74 49-107-27-43-32-96-23-125 7-19 17-26 25-29 11-4 23-1 31 7 12 13 16 39 13 79-1 16-6 38-16 64l1 2 20 25 49 59 15-1c60 0 100 13 114 36 5 10 5 21 0 30-7 13-23 20-42 20l-15-1c-24-4-51-23-83-57a613 613 0 0 0 -120 20c-16 29-51 88-77 105-9 7-19 10-29 10zm66-99c-18 9-33 19-45 31-24 23-25 37-24 40l3 1c4 0 10-2 15-5 11-8 31-33 51-67zm197-37c20 19 37 29 51 32l10 1c10 0 17-4 19-7v-4c-5-7-27-20-80-22zm-107-83c-9 23-20 48-33 72 31-8 58-11 74-13h7a1722 1722 0 0 1 -48-59zm-7-154h-1c-3 1-6 6-8 12-7 20-4 53 9 83 4-14 7-26 7-36 4-44-4-56-6-58z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 749 B After Width: | Height: | Size: 749 B |
@@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<rect height="512" width="512" rx="15%" fill="#FFF"/>
|
||||
<rect fill="#1ed760" height="512" width="512" rx="15%"/>
|
||||
<g clip-path="M0 170h170V0H0z" transform="matrix(2.38825 0 0 -2.38825 53 459)">
|
||||
<path d="M135 95c-27 16-72 17-98 9a8 8 0 1 0-4 15c29 9 78 7 110-11a8 8 0 0 0-8-13m-1-24c-2-3-6-4-9-2-23 13-57 17-84 9a7 7 0 0 0-4 13c31 9 69 5 95-11 3-2 4-6 2-9m-11-23c-1-2-4-3-7-2a96 96 0 0 1-73 8 5 5 0 1 0-3 10c32 8 60 5 82-9 2-1 3-5 1-7M85 169A84 84 0 1 1 85 1a84 84 0 0 1 0 168" fill="#1ed760"/>
|
||||
<path fill="#fff" d="M135 95c-27 16-72 17-98 9a8 8 0 1 0-4 15c29 9 78 7 110-11a8 8 0 0 0-8-13m-1-24c-2-3-6-4-9-2-23 13-57 17-84 9a7 7 0 0 0-4 13c31 9 69 5 95-11 3-2 4-6 2-9m-11-23c-1-2-4-3-7-2a96 96 0 0 1-73 8 5 5 0 1 0-3 10c32 8 60 5 82-9 2-1 3-5 1-7M85 169A84 84 0 1 1 85 1a84 84 0 0 1 0 168"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 509 B After Width: | Height: | Size: 509 B |
@@ -1,4 +1,4 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect fill="#fff" height="512" rx="15%" width="512"/>
|
||||
<path d="m432.48 297.45c0 55.15-44.37 100.02-99.51 100.02a100.1 100.1 0 0 1 -59.55-19.67 122.7 122.7 0 0 0 29.64-80.35l.04-159.16a47.13 47.13 0 0 0 -47.06-47.07 47.12 47.12 0 0 0 -47.06 47.07l-.04 159.15c0 30.69 11.8 58.73 30.38 80.36a100.05 100.05 0 0 1 -59.54 19.67c-55.15 0-100.25-44.87-100.25-100.03v-194.14h-23.53v194.16c0 68.11 55.9 123.54 124.03 123.54a123.5 123.5 0 0 0 76.71-26.7c21.06 16.66 47.22 26.7 76.1 26.7 68.12 0 123.16-55.43 123.16-123.55v-194.16h-23.53v194.16zm-176.48 64.32a99.57 99.57 0 0 1 -23.53-64.32l.04-159.16a23.55 23.55 0 0 1 23.53-23.53 23.56 23.56 0 0 1 23.53 23.53l-.04 159.15a99.52 99.52 0 0 1 -23.53 64.33z"/>
|
||||
<rect height="512" rx="15%" width="512"/>
|
||||
<path fill="#fff" d="m432.48 297.45c0 55.15-44.37 100.02-99.51 100.02a100.1 100.1 0 0 1 -59.55-19.67 122.7 122.7 0 0 0 29.64-80.35l.04-159.16a47.13 47.13 0 0 0 -47.06-47.07 47.12 47.12 0 0 0 -47.06 47.07l-.04 159.15c0 30.69 11.8 58.73 30.38 80.36a100.05 100.05 0 0 1 -59.54 19.67c-55.15 0-100.25-44.87-100.25-100.03v-194.14h-23.53v194.16c0 68.11 55.9 123.54 124.03 123.54a123.5 123.5 0 0 0 76.71-26.7c21.06 16.66 47.22 26.7 76.1 26.7 68.12 0 123.16-55.43 123.16-123.55v-194.16h-23.53v194.16zm-176.48 64.32a99.57 99.57 0 0 1 -23.53-64.32l.04-159.16a23.55 23.55 0 0 1 23.53-23.53 23.56 23.56 0 0 1 23.53 23.53l-.04 159.15a99.52 99.52 0 0 1 -23.53 64.33z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 769 B After Width: | Height: | Size: 769 B |
Reference in New Issue
Block a user