edent/SuperTinyIcons
1
0
Fork 1
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki 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

25
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);
@@ -91,9 +110,9 @@
console.log('Rendering!', icons);
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>
</body>