edent-gh/SuperTinyIcons
1
0
Fork 0
forked from edent/SuperTinyIcons
Code Pull Requests Activity

Updated Radius Tool

Browse Source
This commit is contained in:
edent
2017-11-27 17:33:39 +00:00
parent 945e1c3f1e
commit 29bc78857c
2 changed files with 91 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
javascript.js
View File

@@ -1,45 +0,0 @@
var items = [
'amazon', 'github', 'html5', 'mastodon', 'reddit', 'soundcloud',
'tox', 'wechat', 'youtube', 'dropbox', 'gitlab', 'instagram',
'paypal', 'rss', 'spotify', 'tumblr', 'whatsapp', 'email',
'google_plus','linkedin', 'pdf', 'skype', 'stackoverflow','twitter',
'wikipedia', 'facebook', 'google', 'lock', 'phone', 'slideshare',
'steam', 'vimeo', 'wire', 'flickr', 'hackernews', 'mail',
'pinterest', 'snapchat', 'telegram', 'vk', 'wordpress', 'meetup',
'line', 'lastpass', 'windows', 'digidentity','ubuntu', 'bitbucket',
'apple', 'npm', 'docker', 'symantec', 'yubico', 'keybase',
'ebay', 'evernote', 'kickstarter','yahoo', 'bitcoin', 'bluetooth',
'ibm', 'yammer', 'android', 'authy', 'blogger', 'cloudflare',
'codepen', 'digitalocean','discord', 'medium', 'airbnb', 'wifi',
'delicious', 'disqus', 'ghost', 'opensource', 'patreon', 'trello',
'intel', 'badoo'
];
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>';
}

136
radius.html
View File

@@ -1,50 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Super Tiny Social Icons - Radius Tool</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;
background: #f0f8ff;
}
@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>
<a href="https://github.com/edent/SuperTinySocialIcons">Download the SuperTinySocialIcons on GitHub</a>
<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>
<head>
<meta charset="utf-8" />
<title>Super Tiny Icons - SVG Radius Tool</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;
background: #f0f8ff;
}
@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 Icons</h1>
<a href="https://github.com/edent/SuperTinyIcons">Download the SuperTinyIcons SVGs on GitHub</a>
<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>
<div class="icons flex three four-500 five-700 six-900"></div>
<script src="javascript.js"></script>
</body>
<script>
var items = [
'amazon', 'github', 'html5', 'mastodon', 'reddit', 'soundcloud',
'tox', 'wechat', 'youtube', 'dropbox', 'gitlab', 'instagram',
'paypal', 'rss', 'spotify', 'tumblr', 'whatsapp', 'email',
'google_plus','linkedin', 'pdf', 'skype', 'stackoverflow','twitter',
'wikipedia', 'facebook', 'google', 'lock', 'phone', 'slideshare',
'steam', 'vimeo', 'wire', 'flickr', 'hackernews', 'mail',
'pinterest', 'snapchat', 'telegram', 'vk', 'wordpress', 'meetup',
'line', 'lastpass', 'windows', 'digidentity','ubuntu', 'bitbucket',
'apple', 'npm', 'docker', 'symantec', 'yubico', 'keybase',
'ebay', 'evernote', 'kickstarter','yahoo', 'bitcoin', 'bluetooth',
'ibm', 'yammer', 'android', 'authy', 'blogger', 'cloudflare',
'codepen', 'digitalocean','discord', 'medium', 'airbnb', 'wifi',
'delicious', 'disqus', 'ghost', 'opensource', 'patreon', 'trello',
'intel', 'badoo'
];
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>';
}
</script>
</body>
</html>