simple-icons/index.html

614 lines
22 KiB
HTML
Raw Normal View History

2017-04-23 19:31:56 +03:00
---
---
{% assign iconsUnsortedString = "" %}
{% assign greyscaleIconsUnsortedString = "" %}
{% for icon in site.data.simple-icons.icons %}
{% assign title = icon.title %}
{% assign filename = icon.title | replace: "+", "plus" | replace: " ", "" | replace: ".", "" | replace: "-", "" | replace: "!", "" | replace: "", "" | downcase %}
{% assign hex = icon.hex %}
{% assign hex = icon.hex %}
{% assign hexCharacter1 = hex | slice: 0, 1 %}
{% assign hexCharacter2 = hex | slice: 1, 1 %}
{% assign hexCharacter3 = hex | slice: 2, 1 %}
{% assign hexCharacter4 = hex | slice: 3, 1 %}
{% assign hexCharacter5 = hex | slice: 4, 1 %}
{% assign hexCharacter6 = hex | slice: 5, 1 %}
{% capture hexCharacterString %}{{ hexCharacter1 }},{{ hexCharacter2 }},{{ hexCharacter3 }},{{ hexCharacter4 }},{{ hexCharacter5 }},{{ hexCharacter6 }}{% endcapture %}
{% assign hexCharacterArray = hexCharacterString | split: "," %}
{% assign rgbString = "" %}
{% for hexCharacter in hexCharacterArray %}
{% case hexCharacter %}
{% when "A" %}
{% assign rgbString = rgbString | append: "10" %}
{% when "B" %}
{% assign rgbString = rgbString | append: "11" %}
{% when "C" %}
{% assign rgbString = rgbString | append: "12" %}
{% when "D" %}
{% assign rgbString = rgbString | append: "13" %}
{% when "E" %}
{% assign rgbString = rgbString | append: "14" %}
{% when "F" %}
{% assign rgbString = rgbString | append: "15" %}
{% else %}
{% assign rgbString = rgbString | append: hexCharacter %}
{% endcase %}
{% unless forloop.last %}{% assign rgbString = rgbString | append: "," %}{% endunless %}
{% endfor %}
{% assign rgbArray = rgbString | split: "," %}
{% assign rgbRed = rgbArray[0] | times: 16 | plus: rgbArray[1] | divided_by: 255.0 | round: 2 %}
{% assign rgbGreen = rgbArray[2] | times: 16 | plus: rgbArray[3] | divided_by: 255.0 | round: 2 %}
{% assign rgbBlue = rgbArray[4] | times: 16 | plus: rgbArray[5] | divided_by: 255.0 | round: 2 %}
{% assign rgbMax = 0.0 %}
{% if rgbRed > rgbMax %}
{% assign rgbMax = rgbRed %}
{% endif %}
{% if rgbGreen > rgbMax %}
{% assign rgbMax = rgbGreen %}
{% endif %}
{% if rgbBlue > rgbMax %}
{% assign rgbMax = rgbBlue %}
{% endif %}
{% assign rgbMin = 1.0 %}
{% if rgbRed < rgbMin %}
{% assign rgbMin = rgbRed %}
{% endif %}
{% if rgbGreen < rgbMin %}
{% assign rgbMin = rgbGreen %}
{% endif %}
{% if rgbBlue < rgbMin %}
{% assign rgbMin = rgbBlue %}
{% endif %}
{% if rgbRed <= 0.03928 %}
{% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %}
{% else %}
{% assign lRed = rgbRed | times: 0.3053 | plus: 0.6822 | times: rgbRed | plus: 0.0125 | times: rgbRed | times: 0.2126 %}
{% endif %}
{% if rgbGreen <= 0.03928 %}
{% assign lGreen = rgbGreen | divided_by: 12.92 | times: 0.7152 %}
{% else %}
{% assign lGreen = rgbGreen | times: 0.3053 | plus: 0.6822 | times: rgbGreen | plus: 0.0125 | times: rgbGreen | times: 0.7152 %}
{% endif %}
{% if rgbBlue <= 0.03928 %}
{% assign lBlue = rgbBlue | divided_by: 12.92 | times: 0.0722 %}
{% else %}
{% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %}
{% endif %}
{% assign luminance = lRed | plus: lGreen | plus: lBlue %}
{% if luminance >= 0.83 %}
2017-08-03 14:13:31 +03:00
{% assign class = "grid-item--dark" %}
{% else %}
2017-08-03 14:13:31 +03:00
{% assign class = "grid-item--light" %}
{% endif %}
{% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}
{% assign rgbDelta = rgbMax | minus: rgbMin %}
{% if rgbDelta == 0 %}
{% assign hslHue = 0 %}
{% assign hslSaturation = 0 %}
{% else %}
{% if hslLuminance < 0.5 %}
{% assign rgbMaxPlusMin = rgbMax | plus: rgbMin %}
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbMaxPlusMin %}
{% else %}
{% assign rgbTwoMinusMaxMinusMin = 2 | minus: rgbMax | minus: rgbMin %}
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbTwoMinusMaxMinusMin %}
{% endif %}
{% if rgbMax == rgbRed %}
{% assign hslHue = rgbGreen | minus: rgbBlue | divided_by: rgbDelta | times: 60.0 | modulo: 360.0 %}
{% elsif rgbMax == rgbGreen %}
{% assign hslHue = rgbBlue | minus: rgbRed | divided_by: rgbDelta | plus: 2.0 | times: 60.0 | modulo: 360.0 %}
{% else %}
{% assign hslHue = rgbRed | minus: rgbGreen | divided_by: rgbDelta | plus: 4.0 | times: 60.0 | modulo: 360.0 %}
{% endif %}
{% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %}
{% endif %}
{% if hslSaturation < 10 %}
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% else %}
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% endif %}
{% endfor %}
{% assign iconsArray = iconsUnsortedString | split: ";" %}
{% assign iconsArray = iconsArray | sort %}
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" %}
{% assign greyscaleIconsArray = greyscaleIconsArray | sort | reverse %}
<!doctype html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
<link rel="preconnect" href="//www.google-analytics.com">
<link rel="preconnect" href="//cdn.carbonads.com">
<link rel="preconnect" href="//github.com">
<title>Simple Icons</title>
<meta name="description" content="Free SVG icons for popular brands.">
<meta property="og:type" content="website">
<meta property="og:title" content="Simple Icons">
<meta property="og:description" content="Free SVG icons for popular brands.">
<meta property="og:url" content="https://simpleicons.org">
<meta property="og:site_name" content="Simple Icons">
<meta property="og:image" content="https://simpleicons.org/images/og.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Simple Icons">
<meta name="twitter:description" content="Free SVG icons for popular brands.">
<meta name="twitter:site" content="@bathtype">
<meta name="twitter:domain" content="Simple Icons">
<meta name="twitter:image:src" content="https://simpleicons.org/images/og.png">
<link rel="icon" type="image/x-icon" href="https://simpleicons.org/images/favicon.ico">
<link rel="icon" type="image/png" href="https://simpleicons.org/images/favicon.png">
<link rel="apple-touch-icon" href="https://simpleicons.org/images/apple-touch-icon.png">
<link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111">
<script>
2017-05-30 19:41:46 +03:00
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-97917186-1', 'auto');
ga('send', 'pageview');
</script>
2017-05-30 19:41:46 +03:00
<script async src='https://www.google-analytics.com/analytics.js'></script>
<style>
* {
box-sizing: border-box;
}
:root {
font-size: 100%;
}
a {
text-decoration: none;
}
2017-05-02 21:26:36 +03:00
abbr {
text-decoration: none;
}
body {
background-color: #FFFFFF;
color: #263238;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
margin: 0;
}
svg {
2017-08-03 14:13:31 +03:00
fill: currentColor;
height: 1.5rem;
width: 1.5rem;
}
#carbonads {
height: 100%;
width: 100%;
}
#carbonads a {
color: #263238;
}
#carbonads > span {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.carbon-img {
display: block;
padding: 1rem 1rem 0.5rem;
}
.carbon-text {
display: block;
font-size: 0.75rem;
line-height: 1rem;
margin: 0 auto;
max-width: 15rem;
}
.carbon-poweredby {
font-size: 0.625rem;
font-weight: 700;
line-height: 1.5rem;
opacity: 0.25;
text-transform: uppercase;
}
.footer {
background-color: #EEE;
padding: 1.5rem;
}
2017-05-03 10:23:48 +03:00
@media (min-width: 45rem) {
.footer {
display: flex;
justify-content: space-between;
padding: 3rem;
}
}
.footer a {
color: #263238;
text-decoration: underline;
}
.footer p {
margin: 0;
opacity: 0.5;
}
a.share-button {
background-color: #1DA1F2;
border-radius: 0.125rem;
color: #FFF;
display: block;
margin: 0.75rem 0 0;
padding: 0.75rem 1.5rem;
text-align: center;
text-decoration: none;
}
@media (min-width: 45rem) {
a.share-button {
margin: 0;
}
}
2017-05-02 21:26:36 +03:00
.hero {
font-size: 1.5rem;
line-height: 2rem;
margin: 0;
2017-05-03 10:23:48 +03:00
padding: 3rem 1.5rem 1.5rem;
2017-05-02 21:26:36 +03:00
text-align: center;
}
2017-05-03 10:23:48 +03:00
@media (min-width: 45rem) {
.hero {
padding: 4.5rem 3rem 1.5rem;
}
}
2017-05-02 21:26:36 +03:00
2017-05-26 02:04:23 +03:00
.search {
margin: 1rem 1.5rem;
text-align: center;
}
@media (min-width: 45rem) {
.search {
margin: 1rem 3rem;
text-align: left;
}
}
.search .search__wrapper {
display: inline-block;
position: relative;
}
.search .search__close {
display: none;
font-size: 1rem;
padding: 6px 12px;
position: absolute;
right: 0;
top: 1px;
}
.search .search__close span {
cursor: pointer;
}
.search input {
color: #333;
font-size: 1rem;
padding: 6px 12px;
}
@media (min-width: 45rem) {
.search input {
width: 250px;
}
}
.search--active .search__close {
display: block;
}
.search--active input {
padding-right: 32px;
}
.grid {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 1.5rem;
2017-05-26 02:04:23 +03:00
margin-top: 0;
padding: 0;
}
2017-05-03 10:23:48 +03:00
@media (min-width: 45rem) {
.grid {
margin: 3rem;
2017-05-26 02:04:23 +03:00
margin-top: 0;
}
}
2017-07-10 01:06:04 +03:00
.grid.search__empty:after {
content: 'No matching icons found.';
font-size: 1.25em;
line-height: 1.5em;
text-align: center;
width: 100%;
2017-07-10 14:02:19 +03:00
display: flex;
justify-content: center;
align-items: center;
2017-07-10 01:06:04 +03:00
}
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
grid-auto-rows: 6rem;
grid-column-gap: 0.375rem;
grid-row-gap: 0.375rem;
grid-auto-flow: dense;
}
2017-07-10 01:06:04 +03:00
.grid.search__empty:after {
grid-column: 1/span 2;
}
@media (min-width: 30.75rem) {
.grid.search__empty:after {
grid-column: 1/-3;
}
}
}
.grid-item {
background-color: #757575;
text-align: center;
}
2017-08-03 14:13:31 +03:00
.grid-item--light {
color: #FFF;
}
.grid-item--dark {
color: #222;
2017-08-03 14:13:31 +03:00
}
.grid-item__link {
color: inherit;
}
@supports not (display: grid) {
.grid-item {
border: 0.1875rem solid #FFF;
padding: 0 0 0.75rem;
width: 20%;
}
}
.grid-item--ad {
background-color: #EEE;
grid-column: -2 / -1;
grid-row-end: span 2;
height: auto;
}
@media (min-width: 21.75rem) {
.grid-item--ad {
grid-column: -3 / -1;
}
}
@supports not (display: grid) {
.grid-item--ad {
width: 100%;
}
}
.grid-item__link {
display: block;
padding: 1rem 1rem 0;
text-align: center;
width: 100%;
}
.grid-item__image {
height: 1.5rem;
width: 1.5rem;
}
.grid-item__title {
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.grid-item__subtitle {
font-size: 0.75rem;
line-height: 1rem;
margin: 0;
opacity: 0.5;
}
.navbar {
background-color: #263238;
}
.navbar__nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
2017-05-03 10:23:48 +03:00
@media (min-width: 45rem) {
.navbar__nav {
padding: 0 1.5rem;
}
}
.navbar__nav-item a {
color: #FFF;
display: block;
opacity: 0.5;
padding: 1.5rem 0.375rem;
}
.navbar__nav-item a:focus, .navbar__nav-item a:hover {
opacity: 1;
}
.navbar__nav-item:last-child a {
padding: 1.5rem 1.5rem 1.5rem 0.375rem;
}
.navbar__nav-item--home {
flex-grow: 1;
}
.navbar__nav-item--home a {
opacity: 1;
padding: 1.5rem 0 1.5rem 1.5rem;
}
2017-05-25 23:55:10 +03:00
.hidden {
display: none;
}
</style>
</head>
<body>
<header class="navbar" role="banner">
<ul class="navbar__nav" role="navigation">
<li class="navbar__nav-item navbar__nav-item--home"><a href="/">Simple&nbsp;Icons</a></li>
<li class="navbar__nav-item"><a href="https://github.com/danleech/simple-icons/blob/master/README.md">About</a></li>
<li class="navbar__nav-item"><a href="https://github.com/danleech/simple-icons">GitHub</a></li>
</ul>
</header>
<main role="main">
<p class="hero">Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular&nbsp;brands</p>
2017-05-26 02:04:23 +03:00
<div class="search">
<div class="search__wrapper">
<div class="search__close"><span>&times;</span></div>
<input type="text" placeholder="Search by brand …" />
</div>
</div>
<ul class="grid">
<li class="grid-item grid-item--ad">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&amp;serve=CVYD42T&amp;placement=simpleiconsorg" id="_carbonads_js"></script>
</li>
{% for icon in iconsArray %}
{% assign iconArray = icon | split: "," %}
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
2017-04-28 01:12:22 +03:00
<a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
{% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
</a>
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
</li>
{% endfor %}
{% for icon in greyscaleIconsArray %}
{% assign iconArray = icon | split: "," %}
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
2017-04-28 01:12:22 +03:00
<a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
{% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
</a>
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
</li>
{% endfor %}
</ul>
</main>
<footer class="footer" role="contentinfo">
<p>A <a href="https://github.com/danleech/simple-icons/blob/master/LICENSE.md">CC0</a> project maintained by <a href="https://twitter.com/bathtype">Dan&nbsp;Leech</a>.<br>
Use <a href="https://github.com/danleech/simple-icons">GitHub</a> for requests, corrections and contributions.</p>
<a class="share-button" href="https://twitter.com/share?url=https%3A%2F%2Fsimpleicons.org&via=bathtype&text=Simple%20Icons%3A%20free%20SVG%20icons%20for%20popular%20brands.">Share this on Twitter!</a>
</footer>
{% assign allIconNames = "" %}
{% for icon in iconsArray %}
{% assign iconArray = icon | split: "," %}
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[3] }}",{% endcapture %}
{% endfor %}
{% for icon in greyscaleIconsArray %}
{% assign iconArray = icon | split: "," %}
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[1] }}"{% unless forloop.last %},{% endunless %}{% endcapture %}
{% endfor %}
<script type="text/javascript">
2017-05-25 23:56:33 +03:00
(function(document) {
2017-07-10 13:56:28 +03:00
var icons = [{{ allIconNames }}].map(normalizeSearchTerm),
2017-07-10 01:06:04 +03:00
$grid = document.querySelector('.grid'),
$icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
2017-05-26 02:09:08 +03:00
$search = document.querySelector('.search'),
$searchClose = $search.querySelector('.search__close'),
$searchInput = $search.querySelector('input');
// include a modified debounce underscorejs helper function.
// see
// - http://underscorejs.org/docs/underscore.html#section-83
// - http://underscorejs.org/#debounce
function debounce(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function() {
var last = +new Date - timestamp;
if (last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function() {
context = this;
args = arguments;
timestamp = +new Date;
var callNow = immediate && !timeout;
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
}
2017-05-25 23:56:33 +03:00
function search(value) {
2017-07-10 01:06:04 +03:00
var hiddenCounter = 0,
2017-07-10 13:56:28 +03:00
value = normalizeSearchTerm(value);
2017-05-25 23:56:33 +03:00
icons.forEach(function(e, i) {
if (e.indexOf(value) > -1) {
$icons[i].classList.remove('hidden');
} else {
2017-07-10 01:06:04 +03:00
hiddenCounter++;
2017-05-25 23:56:33 +03:00
$icons[i].classList.add('hidden');
}
})
2017-07-10 01:06:04 +03:00
$grid.classList.toggle('search__empty', hiddenCounter == icons.length);
2017-05-26 02:09:08 +03:00
}
2017-07-10 13:56:28 +03:00
function normalizeSearchTerm(value) {
return value.toLowerCase().replace(/ /g, '');
}
2017-05-26 02:09:08 +03:00
$search.addEventListener('input', debounce(function(e) {
e.preventDefault();
var value = e.target.value;
if (value) {
$search.classList.add('search--active');
} else {
$search.classList.remove('search--active');
}
search(value);
2017-07-09 23:58:53 +03:00
}, 50), false);
2017-05-26 02:09:08 +03:00
$searchClose.addEventListener('click', function(e) {
e.stopPropagation();
$searchInput.value = '';
$search.classList.remove('search--active');
search('');
}, false);
2017-05-25 23:56:33 +03:00
})( document );
</script>
</body>
</html>