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

Icon Layout Tool

Browse Source 
For #86
This commit is contained in:
edent
2017-12-02 17:00:15 +00:00
parent 5c151d8839
commit c0db6b6ff0
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -3,8 +3,6 @@ Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourit
The logos have a 512x512 viewbox, they will fit in a circle with radius 256. They will scale up and down to suit your needs.
You can [play around with the corner radius size using our interactive tool](https://edent.github.io/SuperTinyIcons/radius.html)
Originally created for my contact page - [https://edent.tel/](https://edent.tel/)
## How Small?
@@ -182,6 +180,8 @@ 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)
## Licenses
The majority of these vector logos are based on someone else's work.

23
radius.html
View File

@@ -27,12 +27,30 @@
}
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>
@@ -47,6 +65,7 @@
<script>
var items = [
'../guidelines/guideline',
'amazon', 'github', 'html5', 'mastodon', 'reddit', 'soundcloud',
'tox', 'wechat', 'youtube', 'dropbox', 'gitlab', 'instagram',
'paypal', 'rss', 'spotify', 'tumblr', 'whatsapp', 'email',
@@ -81,7 +100,7 @@
var icons;
Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => {
icons = all.map(icon => {
return icon + '<b>' + icon.match(/aria-label\=\"(.*?)\"/)[1] + '</b>';
return icon;
});
render(range.value);
@@ -93,7 +112,7 @@
icons = icons.map(icon => {
return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"');
});
container.innerHTML = '<div>' + icons.join('</div><div>') + '</div>';
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>