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

Remove radius.html

Browse Source 
Updated NPM
Fix imgur reference
This commit is contained in:
edent
2019-02-24 11:47:25 +00:00
parent 9ea41f17f6
commit 5a849b9790
4 changed files with 3 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -286,8 +286,6 @@ This is the standard guideline. Use this to help with sizing your icons and they
* **Yellow** is like a road shoulder, it is there if more space is needed. It should be used for protruding elements, like corners or ornaments.
* **Red** is off limits. It should not be touched by the icons. Red is also how a circular icon would look.
To see how the logos look, you can [play around with the corner radius size using our interactive tool](https://edent.github.io/SuperTinyIcons/radius.html)
## Installation
```sh

2
images/reference/index.md
View File

@@ -109,7 +109,7 @@ Where possible this links to the organisation's brand guidelines page.
| <img src="/images/svg/vivino.svg" width="256" /> | <img src="/images/reference/vivino.svg" width="256" /> | https://www.vivino.com/press |
| <img src="/images/svg/apereo.svg" width="256" /> | <img src="/images/reference/apereo.png" width="256" /> | https://www.apereo.org |
| <img src="/images/svg/hackerone.svg" width="256" /> | <img src="/images/reference/hackerone.png" width="256" /> | https://www.hackerone.com/branding |
| <img src="/images/svg/imgur.svg" width="256" /> | <img src="/images/reference/imgur.png" width="256" /> | https://imgurinc.com/press |
| <img src="/images/svg/imgur.svg" width="256" /> | <img src="/images/reference/imgur.svg" width="256" /> | https://imgurinc.com/press |
| <img src="/images/svg/bitwarden.svg" width="256" /> | <img src="/images/reference/bitwarden.png" width="256" /> | https://github.com/bitwarden/brand |
| <img src="/images/svg/slack.svg" width="256" /> | <img src="/images/reference/slack.svg" width="256" /> | https://slack.com/media-kit |
| <img src="/images/svg/bandcamp.svg" width="256" /> | <img src="/images/reference/bandcamp.png" width="256" /> | https://bandcamp.com/buttons |

4
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "super-tiny-icons",
"version": "0.1.8",
"version": "0.1.9",
"description": "Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos",
"homepage": "https://github.com/edent/SuperTinyIcons/",
"license": "MIT",
@@ -19,6 +19,6 @@
"url": "https://shkspr.mobi/blog/"
},
"keywords": [
"icons", "svg", "iconset", "logo", "logos", "twitter", "facebook", "svg"
"icons", "svg", "iconset", "logo", "logos", "twitter", "facebook", "svg", "flattr"
]
}

124
radius.html
View File

@@ -1,124 +0,0 @@
<!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>