416 lines
15 KiB
HTML
416 lines
15 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 %}
|
||
{% 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 }}{% 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 }}{% 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">
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
font-size: 100%;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
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 {
|
||
height: 1.5rem;
|
||
width: 1.5rem;
|
||
}
|
||
|
||
path, rect, circle {
|
||
fill: #FFF;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
@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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
list-style: none;
|
||
margin: 1.5rem;
|
||
padding: 0;
|
||
}
|
||
@media (min-width: 45rem) {
|
||
.grid {
|
||
margin: 3rem;
|
||
}
|
||
}
|
||
@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;
|
||
}
|
||
}
|
||
|
||
.grid-item {
|
||
background-color: #757575;
|
||
text-align: center;
|
||
}
|
||
@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 {
|
||
color: #FFFFFF;
|
||
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 {
|
||
color: #FFFFFF;
|
||
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;
|
||
}
|
||
</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/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 brands</p>
|
||
<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" style="background-color: #{{ iconArray[4] }}">
|
||
<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" style="background-color: #{{ iconArray[4] }}">
|
||
<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 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>
|
||
<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-97917186-1', 'auto');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
</body>
|
||
</html>
|