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. 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/) Originally created for my contact page - [https://edent.tel/](https://edent.tel/)
## How Small? ## 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. * **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. * **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 ## Licenses
The majority of these vector logos are based on someone else's work. The majority of these vector logos are based on someone else's work.

25
radius.html
View File

@@ -27,12 +27,30 @@
} }
svg { svg {
display: block; display: block;
position: absolute;
}
.overlay {
position: absolute;
opacity: 0.25;
}
.underlay {
position: relative;
height:150px;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Super Tiny Icons</h1> <h1>Super Tiny Icons</h1>
<a href="https://github.com/edent/SuperTinyIcons">Download the SuperTinyIcons SVGs on GitHub</a> <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"> <section class="flex two four-800">
<h2>Radius %</h2> <h2>Radius %</h2>
<label> <label>
@@ -47,6 +65,7 @@
<script> <script>
var items = [ var items = [
'../guidelines/guideline',
'amazon', 'github', 'html5', 'mastodon', 'reddit', 'soundcloud', 'amazon', 'github', 'html5', 'mastodon', 'reddit', 'soundcloud',
'tox', 'wechat', 'youtube', 'dropbox', 'gitlab', 'instagram', 'tox', 'wechat', 'youtube', 'dropbox', 'gitlab', 'instagram',
'paypal', 'rss', 'spotify', 'tumblr', 'whatsapp', 'email', 'paypal', 'rss', 'spotify', 'tumblr', 'whatsapp', 'email',
@@ -81,7 +100,7 @@
var icons; var icons;
Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => { Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => {
icons = all.map(icon => { icons = all.map(icon => {
return icon + '<b>' + icon.match(/aria-label\=\"(.*?)\"/)[1] + '</b>'; return icon;
}); });
render(range.value); render(range.value);
@@ -91,9 +110,9 @@
console.log('Rendering!', icons); console.log('Rendering!', icons);
icons = icons.map(icon => { icons = icons.map(icon => {
return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"'); 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> </script>
</body> </body>