125 lines
4.7 KiB
HTML
125 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<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;
|
|
position: absolute;
|
|
}
|
|
.overlay {
|
|
position: absolute;
|
|
opacity: 0.25;
|
|
}
|
|
.underlay {
|
|
position: relative;
|
|
height:150px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Super Tiny Icons</h1>
|
|
<a href="https://github.com/edent/SuperTinyIcons">Download the SuperTinyIcons SVGs on GitHub</a>
|
|
<p>This is the standard guideline. Use this to help with sizing your icons and they will look good no matter what border radius is chosen.</p>
|
|
|
|
<img src="https://edent.github.io/SuperTinyIcons/images/guidelines/guideline.svg" width="128" alt="A template for logos" />
|
|
|
|
<ul>
|
|
<li><strong>Green</strong> is the safe zone, where the main body of the icon should be.</li>
|
|
<li><strong>Yellow</strong> is like a road shoulder, it is there if more space is needed. It should be used for protruding elements, like corners or ornaments.</li>
|
|
<li><strong>Red</strong> is off limits. It should not be touched by the icons. Red is also how a circular icon would look.</li>
|
|
</ul>
|
|
<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>
|
|
var items = [
|
|
'../guidelines/guideline',
|
|
'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', 'laravel', 'twilio', 'google_play', 'gmail',
|
|
'plex', 'slack', 'xing', 'pinboard', 'internet_archive', 'samsunginternet',
|
|
'baidu', 'twitch', 'ok', 'pocket', 'stumbleupon', 'viber',
|
|
'workato', 'sketch', 'vlc', 'google_maps','access', 'ethereum',
|
|
'opencast', 'stackexchange', 'qq', 'vegetarian', 'gogcom', 'strava',
|
|
'ko-fi', 'untappd', 'vivino', 'apereo', 'hackerone', 'imgur',
|
|
'bitwarden', 'bandcamp', 'dribbble', 'w3c', 'google_scholar', 'flattr'
|
|
];
|
|
|
|
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 => 'images/svg/' + item + '.svg');
|
|
var icons;
|
|
Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => {
|
|
icons = all.map(icon => {
|
|
return icon;
|
|
});
|
|
|
|
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 class="underlay">' + icons.join('<img class="overlay" src="images/guidelines/guideline.svg"/></div><div class="underlay">') + '<img class="overlay" src="images/guidelines/guideline.svg"/></div>';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|