mirror of
https://github.com/simple-icons/simple-icons.git
synced 2024-12-16 01:10:30 +02:00
745 lines
29 KiB
HTML
745 lines
29 KiB
HTML
---
|
|
---
|
|
|
|
{% 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 %}
|
|
{% assign class = "grid-item--dark" %}
|
|
{% else %}
|
|
{% 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 }},{{ forloop.index }}{% 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 }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% assign iconsArray = iconsUnsortedString | split: ";" | sort %}
|
|
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | 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>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-100751516-2', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
font-size: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
abbr {
|
|
text-decoration: none;
|
|
}
|
|
|
|
body {
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #263238;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
font-size: 0.875rem;
|
|
height: 100%;
|
|
line-height: 1.5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
svg {
|
|
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;
|
|
margin-top: auto;
|
|
padding: 1.5rem;
|
|
}
|
|
@media (min-width: 45rem) {
|
|
.footer {
|
|
display: flex;
|
|
align-items: center;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
margin: 0;
|
|
padding: 3rem 1.5rem 1.5rem;
|
|
text-align: center;
|
|
}
|
|
@media (min-width: 45rem) {
|
|
.hero {
|
|
padding: 4.5rem 3rem 1.5rem;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
display: flex;
|
|
align-items: center;
|
|
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;
|
|
}
|
|
|
|
.sort-btn {
|
|
cursor: pointer;
|
|
margin-left: .5rem;
|
|
opacity: .5;
|
|
}
|
|
.sort-btn.active {
|
|
opacity: 1;
|
|
}
|
|
.sort-btn:first-of-type {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.sort-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
.sort-btn:hover path:first-of-type {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#sort-color:hover path:nth-of-type(2) {
|
|
fill: #E57373;
|
|
}
|
|
#sort-color:hover path:nth-of-type(3) {
|
|
fill: #F44336;
|
|
}
|
|
#sort-color:hover path:nth-of-type(4) {
|
|
fill: #D32F2F;
|
|
}
|
|
#sort-color:hover path:nth-of-type(5) {
|
|
fill: #B71C1C;
|
|
}
|
|
|
|
#sort-alphabetically:hover path:nth-of-type(2),
|
|
#sort-alphabetically:hover path:nth-of-type(3) {
|
|
opacity: 1;
|
|
}
|
|
|
|
.grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
margin: 1.5rem;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
}
|
|
@media (min-width: 45rem) {
|
|
.grid {
|
|
margin: 3rem;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.grid.search__empty:after {
|
|
content: 'No matching icons found.';
|
|
font-size: 1.25em;
|
|
line-height: 1.5em;
|
|
text-align: center;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@supports (display: grid) {
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
|
grid-auto-rows: min-content;
|
|
grid-column-gap: 0.375rem;
|
|
grid-row-gap: 0.375rem;
|
|
grid-auto-flow: dense;
|
|
}
|
|
.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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
.grid-item--light {
|
|
color: #FFF;
|
|
}
|
|
.grid-item--dark {
|
|
color: #222;
|
|
}
|
|
.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;
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
@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;
|
|
}
|
|
|
|
.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 Icons</a></li>
|
|
<li class="navbar__nav-item"><a href="https://github.com/simple-icons/simple-icons/blob/develop/README.md">About</a></li>
|
|
<li class="navbar__nav-item"><a href="https://github.com/simple-icons/simple-icons">GitHub</a></li>
|
|
<li class="navbar__nav-item"><a href="https://www.npmjs.com/package/simple-icons">NPM</a></li>
|
|
</ul>
|
|
</header>
|
|
<main role="main">
|
|
<p class="hero">Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular brands</p>
|
|
<div class="search">
|
|
<div class="search__wrapper">
|
|
<div class="search__close"><span>×</span></div>
|
|
<input type="text" placeholder="Search by brand …" title="Search not available when JavaScript is disabled" disabled />
|
|
</div>
|
|
|
|
<svg id="sort-color" class="sort-btn active" aria-labelledby="sort-color" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-color">Sort by color</title><path d="M9.219 18.857H6.648V.429A.414.414 0 0 0 6.219 0H3.648a.418.418 0 0 0-.308.121.418.418 0 0 0-.121.308v18.428H.648a.4.4 0 0 0-.402.268c-.071.17-.04.326.094.469l4.286 4.287c.098.08.2.119.308.119a.447.447 0 0 0 .308-.119l4.272-4.273a.506.506 0 0 0 .134-.32.417.417 0 0 0-.429-.431z"/><path d="M12.219 3.429h3.429A.412.412 0 0 0 16.076 3V.429A.416.416 0 0 0 15.648 0h-3.429a.414.414 0 0 0-.429.429V3a.414.414 0 0 0 .429.429z"/><path d="M12.219 10.286h6a.42.42 0 0 0 .309-.12.42.42 0 0 0 .121-.308V7.286a.418.418 0 0 0-.121-.308.417.417 0 0 0-.309-.121h-6a.414.414 0 0 0-.308.121.417.417 0 0 0-.12.308v2.572c0 .125.04.228.12.308a.42.42 0 0 0 .308.12z"/><path d="M12.219 17.143h8.572c.125 0 .229-.039.309-.119s.119-.184.119-.309v-2.572c0-.125-.039-.227-.119-.307s-.184-.121-.309-.121h-8.572a.418.418 0 0 0-.308.121.415.415 0 0 0-.12.307v2.572c0 .125.04.229.12.309.081.08.183.119.308.119z"/><path d="M23.67 20.693a.408.408 0 0 0-.307-.121H12.219a.416.416 0 0 0-.429.428v2.572c0 .125.04.227.121.309a.42.42 0 0 0 .308.119h11.144a.414.414 0 0 0 .307-.119.424.424 0 0 0 .121-.309V21a.416.416 0 0 0-.121-.307z"/></svg>
|
|
<svg id="sort-alphabetically" class="sort-btn" aria-labelledby="sort-alphabetically" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-alphabetically">Sort alphabetically</title><path d="M10.096 18.857H7.525V.429A.414.414 0 0 0 7.096 0H4.525a.414.414 0 0 0-.429.429v18.429H1.525c-.196 0-.331.089-.402.268-.072.17-.04.326.094.469l4.286 4.286c.098.079.2.119.308.119.116 0 .219-.04.308-.12l4.272-4.272a.506.506 0 0 0 .134-.321.414.414 0 0 0-.429-.43z"/><path d="M20.102 22.474H16.78c-.188 0-.322.009-.402.026l-.188.026V22.5l.148-.147c.133-.16.227-.276.281-.348l4.941-7.099v-1.191h-7.594v3.066h1.607v-1.54h3.107c.16 0 .295-.014.4-.04a.856.856 0 0 0 .102-.007c.039-.004.068-.007.086-.007v.04l-.146.121c-.08.08-.176.2-.281.361L13.9 22.795V24h7.82v-3.12h-1.619v1.594h.001z"/><path d="M21.977 8.866L18.895 0h-2.168l-3.082 8.866h-.936v1.419h3.842V8.866h-1.004l.631-1.929h3.254l.629 1.929h-1.004v1.419h3.857V8.866h-.937zm-5.358-3.402l.977-2.92c.037-.107.07-.236.102-.388s.047-.232.047-.241l.039-.268h.055c0 .036.008.125.025.268l.162.629.963 2.92h-2.37z"/></svg>
|
|
</div>
|
|
<ul class="grid">
|
|
<li class="grid-item grid-item--ad">
|
|
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&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] }}" order="{{ iconArray[7] }}">
|
|
<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] }}" order="{{ iconArray[7] }}">
|
|
<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/simple-icons/simple-icons/blob/develop/LICENSE.md">CC0</a> project maintained by the <a href="https://github.com/simple-icons/simple-icons/graphs/contributors">Simple Icons Contributors</a>.<br>
|
|
Use <a href="https://github.com/simple-icons/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">
|
|
(function(document) {
|
|
var icons = [{{ allIconNames }}].map(normalizeSearchTerm),
|
|
queryParameter = 'q',
|
|
$grid = document.querySelector('.grid'),
|
|
$icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
|
|
$search = document.querySelector('.search'),
|
|
$searchClose = $search.querySelector('.search__close'),
|
|
$searchInput = $search.querySelector('input'),
|
|
$sortColor = document.getElementById('sort-color'),
|
|
$sortAlpha = document.getElementById('sort-alphabetically');
|
|
|
|
// Remove the "disabled" attribute from the search input
|
|
$searchInput.setAttribute('title', 'Search Simple Icons');
|
|
$searchInput.removeAttribute('disabled');
|
|
|
|
// 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;
|
|
};
|
|
}
|
|
|
|
// Get any parameter from the URL's search section (location.search).
|
|
// see
|
|
// - https://davidwalsh.name/query-string-javascript
|
|
// - https://github.com/WebReflection/url-search-params
|
|
function getUrlParameter(parameter) {
|
|
name = parameter.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
|
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
|
var results = regex.exec(location.search);
|
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
|
}
|
|
|
|
function search(value) {
|
|
var hiddenCounter = 0,
|
|
query = normalizeSearchTerm(value);
|
|
|
|
icons.map(function(icon, iconIndex) {
|
|
var letters = query.split(''),
|
|
indexes = [],
|
|
index = 0;
|
|
|
|
if (icon === query) {
|
|
return {element: $icons[iconIndex], score: 1};
|
|
}
|
|
|
|
for (var i = 0; i < letters.length; i++) {
|
|
var letter = letters[i];
|
|
index = icon.indexOf(letter, index);
|
|
|
|
if (index === -1) {
|
|
$icons[iconIndex].classList.add('hidden');
|
|
return null;
|
|
}
|
|
|
|
indexes.push(index);
|
|
index++;
|
|
}
|
|
|
|
return {
|
|
element: $icons[iconIndex],
|
|
score: indexes.reduce(function(a, b) {
|
|
return a + b;
|
|
}, 2)
|
|
};
|
|
}).filter(function(item) {
|
|
return item !== null;
|
|
}).sort(function(a, b) {
|
|
return a.score - b.score;
|
|
}).forEach(function(item, index) {
|
|
item.element.classList.remove('hidden');
|
|
|
|
if (query !== '') {
|
|
// Order according to relevance (i.e. score) if there is a query
|
|
item.element.style.order = index;
|
|
} else {
|
|
// Use color-based order if there is no query
|
|
item.element.style.removeProperty('order');
|
|
}
|
|
});
|
|
|
|
$grid.classList.toggle('search__empty', hiddenCounter == icons.length);
|
|
}
|
|
|
|
function normalizeSearchTerm(value) {
|
|
return value.toLowerCase().replace(/ /g, '');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Load search query if present
|
|
var query = getUrlParameter(queryParameter);
|
|
if (query) {
|
|
$search.classList.add('search--active');
|
|
$searchInput.value = query;
|
|
search(query);
|
|
}
|
|
});
|
|
$search.addEventListener('input', debounce(function(e) {
|
|
e.preventDefault();
|
|
|
|
var value = e.target.value;
|
|
if (value) {
|
|
$search.classList.add('search--active');
|
|
window.history.replaceState(null, '', '?' + queryParameter + '=' + value);
|
|
} else {
|
|
$search.classList.remove('search--active');
|
|
window.history.replaceState(null, '', '/');
|
|
}
|
|
search(value);
|
|
}, 50), false);
|
|
$searchClose.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
|
|
$searchInput.value = '';
|
|
$search.classList.remove('search--active');
|
|
window.history.replaceState(null, '', '/');
|
|
search('');
|
|
}, false);
|
|
|
|
$sortColor.addEventListener('click', function() {
|
|
$icons.forEach(icon => { icon.style.order = null; });
|
|
|
|
$sortColor.classList.add('active');
|
|
$sortAlpha.classList.remove('active');
|
|
});
|
|
$sortAlpha.addEventListener('click', function() {
|
|
$icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); });
|
|
|
|
$sortAlpha.classList.add('active');
|
|
$sortColor.classList.remove('active');
|
|
});
|
|
})( document );
|
|
</script>
|
|
</body>
|
|
</html>
|