heuzef
/
icon-collection
ミラー元 https://github.com/benc-uk/icon-collection.git
1
0
フォーク 0
コード 課題 0 リリース 1 Wiki アクティビティ
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
53 コミット
8 ブランチ
11 MiB
 
 
 
ブランチ: master
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'master' から
${ noResults }
icon-collection/logos/index.html

385 行
23 KiB
Raw パーマリンク Blame 履歴 

  1. <html lang="en" class="notranslate" translate="no">

  2. <head>

  3.   <meta name="google" content="notranslate" />

  4.   <title>Logos &amp; Brands</title>

  5.   <link rel="icon" type="image/png" href="../favicon.png">

  6.   <style>

  7.     body {

  8.       font-family: 'Segoe UI', Arial;

  9.       background-color: #aaa;

  10.       padding: 0;

  11.       margin: 0;

  12.     }

  13.     .bg-0 {

  14.       background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png")

  15.     }

  16.     .bg-1 {

  17.       background-color: #333;

  18.     }

  19.     .bg-2 {

  20.       background-color: #fff;

  21.     }

  22.     .imgbox img { 

  23.       width: 10.5rem;

  24.       height: 10.5rem;

  25.       object-fit: contain;

  26.       cursor: pointer;

  27.     }

  28.     .imgbox {

  29.       margin: 0.6rem;

  30.       padding: 0.5rem;

  31.       text-align: center;

  32.       width: 12rem;

  33.       height: 12rem;

  34.       background-color: #e0e0e0;

  35.     }

  36.     h1 {

  37.       font-size: 1.8rem;

  38.     }

  39.     .find, .find input {

  40.       font-size: 1.1rem;

  41.     }

  42.     .top {

  43.       position: -webkit-sticky;

  44.       position: sticky;

  45.       top: 0;

  46.       background-color: rgb(211, 211, 211);

  47.       padding: 0.2rem;

  48.       padding-top: 0;

  49.       box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);

  50.     }

  51.     .top button {

  52.       float: right; 

  53.       position: absolute; 

  54.       top: 0.2rem; 

  55.       right: 0.2rem;

  56.       font-size: 1rem;

  57.       border-radius: 4px;

  58.     }

  59.     .pngbox {

  60.       position: absolute; 

  61.       top: 2rem; 

  62.       right: 1rem;

  63.       font-size: 0.9rem;

  64.     }

  65.     input[type="checkbox"] {

  66.       width: 1.6em;

  67.       height: 1.6em;

  68.     }

  69.     .label {

  70.       height: 2.5em;

  71.       line-height: 1em;

  72.       overflow: hidden;

  73.       font-size: 0.9rem;

  74.     }

  75.     .grid {

  76.       display: flex;

  77.       flex-wrap: wrap;

  78.       width: 100%;

  79.     }

  80.     h1 {

  81.       display:inline;

  82.     }

  83.     .home {

  84.       font-size: 2rem;

  85.       text-decoration: none;

  86.       color:rgb(99, 99, 99);

  87.     }

  88.   </style>  

  89. </head>

  90. 

  91. <body>

  92. 

  93.   <div class="top">

  94.     <a href=".." class="home">&#129093;</a> &nbsp; <h1>Logos &amp; Brands</h1>

  95.     <br/>

  96.     <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 

  97.     <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>

  98.     <button onclick="toggleBg()">Toggle Background</button>

  99.   </div>

  100. 

  101.   <div class="grid">

  102.     

  103.       <div id="android-1.svg" class="imgbox"><img src="android-1.svg" class="bg-0" onclick="download('android-1.svg', this)"/><div class="label">android-1.svg</div></div>

  104.     

  105.       <div id="android-mono.svg" class="imgbox"><img src="android-mono.svg" class="bg-0" onclick="download('android-mono.svg', this)"/><div class="label">android-mono.svg</div></div>

  106.     

  107.       <div id="angular.svg" class="imgbox"><img src="angular.svg" class="bg-0" onclick="download('angular.svg', this)"/><div class="label">angular.svg</div></div>

  108.     

  109.       <div id="ansible.svg" class="imgbox"><img src="ansible.svg" class="bg-0" onclick="download('ansible.svg', this)"/><div class="label">ansible.svg</div></div>

  110.     

  111.       <div id="apache.svg" class="imgbox"><img src="apache.svg" class="bg-0" onclick="download('apache.svg', this)"/><div class="label">apache.svg</div></div>

  112.     

  113.       <div id="atom.svg" class="imgbox"><img src="atom.svg" class="bg-0" onclick="download('atom.svg', this)"/><div class="label">atom.svg</div></div>

  114.     

  115.       <div id="azure-logo.svg" class="imgbox"><img src="azure-logo.svg" class="bg-0" onclick="download('azure-logo.svg', this)"/><div class="label">azure-logo.svg</div></div>

  116.     

  117.       <div id="azure-offical.svg" class="imgbox"><img src="azure-offical.svg" class="bg-0" onclick="download('azure-offical.svg', this)"/><div class="label">azure-offical.svg</div></div>

  118.     

  119.       <div id="bash.svg" class="imgbox"><img src="bash.svg" class="bg-0" onclick="download('bash.svg', this)"/><div class="label">bash.svg</div></div>

  120.     

  121.       <div id="bit-bucket.svg" class="imgbox"><img src="bit-bucket.svg" class="bg-0" onclick="download('bit-bucket.svg', this)"/><div class="label">bit-bucket.svg</div></div>

  122.     

  123.       <div id="c-lang.svg" class="imgbox"><img src="c-lang.svg" class="bg-0" onclick="download('c-lang.svg', this)"/><div class="label">c-lang.svg</div></div>

  124.     

  125.       <div id="c-plusplus.svg" class="imgbox"><img src="c-plusplus.svg" class="bg-0" onclick="download('c-plusplus.svg', this)"/><div class="label">c-plusplus.svg</div></div>

  126.     

  127.       <div id="canonical.svg" class="imgbox"><img src="canonical.svg" class="bg-0" onclick="download('canonical.svg', this)"/><div class="label">canonical.svg</div></div>

  128.     

  129.       <div id="chef-1.svg" class="imgbox"><img src="chef-1.svg" class="bg-0" onclick="download('chef-1.svg', this)"/><div class="label">chef-1.svg</div></div>

  130.     

  131.       <div id="chef-2.svg" class="imgbox"><img src="chef-2.svg" class="bg-0" onclick="download('chef-2.svg', this)"/><div class="label">chef-2.svg</div></div>

  132.     

  133.       <div id="cncf-icon.svg" class="imgbox"><img src="cncf-icon.svg" class="bg-0" onclick="download('cncf-icon.svg', this)"/><div class="label">cncf-icon.svg</div></div>

  134.     

  135.       <div id="cncf.svg" class="imgbox"><img src="cncf.svg" class="bg-0" onclick="download('cncf.svg', this)"/><div class="label">cncf.svg</div></div>

  136.     

  137.       <div id="containerd-icon-color.svg" class="imgbox"><img src="containerd-icon-color.svg" class="bg-0" onclick="download('containerd-icon-color.svg', this)"/><div class="label">containerd-icon-color.svg</div></div>

  138.     

  139.       <div id="coredns-icon-color.svg" class="imgbox"><img src="coredns-icon-color.svg" class="bg-0" onclick="download('coredns-icon-color.svg', this)"/><div class="label">coredns-icon-color.svg</div></div>

  140.     

  141.       <div id="csharp-1.svg" class="imgbox"><img src="csharp-1.svg" class="bg-0" onclick="download('csharp-1.svg', this)"/><div class="label">csharp-1.svg</div></div>

  142.     

  143.       <div id="csharp-2.svg" class="imgbox"><img src="csharp-2.svg" class="bg-0" onclick="download('csharp-2.svg', this)"/><div class="label">csharp-2.svg</div></div>

  144.     

  145.       <div id="curl.svg" class="imgbox"><img src="curl.svg" class="bg-0" onclick="download('curl.svg', this)"/><div class="label">curl.svg</div></div>

  146.     

  147.       <div id="dapr.svg" class="imgbox"><img src="dapr.svg" class="bg-0" onclick="download('dapr.svg', this)"/><div class="label">dapr.svg</div></div>

  148.     

  149.       <div id="docker-icon-wh.svg" class="imgbox"><img src="docker-icon-wh.svg" class="bg-0" onclick="download('docker-icon-wh.svg', this)"/><div class="label">docker-icon-wh.svg</div></div>

  150.     

  151.       <div id="docker-icon.svg" class="imgbox"><img src="docker-icon.svg" class="bg-0" onclick="download('docker-icon.svg', this)"/><div class="label">docker-icon.svg</div></div>

  152.     

  153.       <div id="docker-mono.svg" class="imgbox"><img src="docker-mono.svg" class="bg-0" onclick="download('docker-mono.svg', this)"/><div class="label">docker-mono.svg</div></div>

  154.     

  155.       <div id="docker-whale.svg" class="imgbox"><img src="docker-whale.svg" class="bg-0" onclick="download('docker-whale.svg', this)"/><div class="label">docker-whale.svg</div></div>

  156.     

  157.       <div id="dotnet-core.svg" class="imgbox"><img src="dotnet-core.svg" class="bg-0" onclick="download('dotnet-core.svg', this)"/><div class="label">dotnet-core.svg</div></div>

  158.     

  159.       <div id="duffle.svg" class="imgbox"><img src="duffle.svg" class="bg-0" onclick="download('duffle.svg', this)"/><div class="label">duffle.svg</div></div>

  160.     

  161.       <div id="dynamics.svg" class="imgbox"><img src="dynamics.svg" class="bg-0" onclick="download('dynamics.svg', this)"/><div class="label">dynamics.svg</div></div>

  162.     

  163.       <div id="eclipse.svg" class="imgbox"><img src="eclipse.svg" class="bg-0" onclick="download('eclipse.svg', this)"/><div class="label">eclipse.svg</div></div>

  164.     

  165.       <div id="envoy-icon-color.svg" class="imgbox"><img src="envoy-icon-color.svg" class="bg-0" onclick="download('envoy-icon-color.svg', this)"/><div class="label">envoy-icon-color.svg</div></div>

  166.     

  167.       <div id="etcd-icon-color.svg" class="imgbox"><img src="etcd-icon-color.svg" class="bg-0" onclick="download('etcd-icon-color.svg', this)"/><div class="label">etcd-icon-color.svg</div></div>

  168.     

  169.       <div id="flask.svg" class="imgbox"><img src="flask.svg" class="bg-0" onclick="download('flask.svg', this)"/><div class="label">flask.svg</div></div>

  170.     

  171.       <div id="flux-icon.svg" class="imgbox"><img src="flux-icon.svg" class="bg-0" onclick="download('flux-icon.svg', this)"/><div class="label">flux-icon.svg</div></div>

  172.     

  173.       <div id="flux-logo.svg" class="imgbox"><img src="flux-logo.svg" class="bg-0" onclick="download('flux-logo.svg', this)"/><div class="label">flux-logo.svg</div></div>

  174.     

  175.       <div id="git.svg" class="imgbox"><img src="git.svg" class="bg-0" onclick="download('git.svg', this)"/><div class="label">git.svg</div></div>

  176.     

  177.       <div id="github-1.svg" class="imgbox"><img src="github-1.svg" class="bg-0" onclick="download('github-1.svg', this)"/><div class="label">github-1.svg</div></div>

  178.     

  179.       <div id="github-2.svg" class="imgbox"><img src="github-2.svg" class="bg-0" onclick="download('github-2.svg', this)"/><div class="label">github-2.svg</div></div>

  180.     

  181.       <div id="go-lang-old.svg" class="imgbox"><img src="go-lang-old.svg" class="bg-0" onclick="download('go-lang-old.svg', this)"/><div class="label">go-lang-old.svg</div></div>

  182.     

  183.       <div id="go-lang.svg" class="imgbox"><img src="go-lang.svg" class="bg-0" onclick="download('go-lang.svg', this)"/><div class="label">go-lang.svg</div></div>

  184.     

  185.       <div id="gradle.svg" class="imgbox"><img src="gradle.svg" class="bg-0" onclick="download('gradle.svg', this)"/><div class="label">gradle.svg</div></div>

  186.     

  187.       <div id="grafana.svg" class="imgbox"><img src="grafana.svg" class="bg-0" onclick="download('grafana.svg', this)"/><div class="label">grafana.svg</div></div>

  188.     

  189.       <div id="gremlin.svg" class="imgbox"><img src="gremlin.svg" class="bg-0" onclick="download('gremlin.svg', this)"/><div class="label">gremlin.svg</div></div>

  190.     

  191.       <div id="grpc-logo.svg" class="imgbox"><img src="grpc-logo.svg" class="bg-0" onclick="download('grpc-logo.svg', this)"/><div class="label">grpc-logo.svg</div></div>

  192.     

  193.       <div id="helm-icon.svg" class="imgbox"><img src="helm-icon.svg" class="bg-0" onclick="download('helm-icon.svg', this)"/><div class="label">helm-icon.svg</div></div>

  194.     

  195.       <div id="html5.svg" class="imgbox"><img src="html5.svg" class="bg-0" onclick="download('html5.svg', this)"/><div class="label">html5.svg</div></div>

  196.     

  197.       <div id="ios.svg" class="imgbox"><img src="ios.svg" class="bg-0" onclick="download('ios.svg', this)"/><div class="label">ios.svg</div></div>

  198.     

  199.       <div id="istio.svg" class="imgbox"><img src="istio.svg" class="bg-0" onclick="download('istio.svg', this)"/><div class="label">istio.svg</div></div>

  200.     

  201.       <div id="java.svg" class="imgbox"><img src="java.svg" class="bg-0" onclick="download('java.svg', this)"/><div class="label">java.svg</div></div>

  202.     

  203.       <div id="javascript.svg" class="imgbox"><img src="javascript.svg" class="bg-0" onclick="download('javascript.svg', this)"/><div class="label">javascript.svg</div></div>

  204.     

  205.       <div id="jenkins.svg" class="imgbox"><img src="jenkins.svg" class="bg-0" onclick="download('jenkins.svg', this)"/><div class="label">jenkins.svg</div></div>

  206.     

  207.       <div id="jfrog.svg" class="imgbox"><img src="jfrog.svg" class="bg-0" onclick="download('jfrog.svg', this)"/><div class="label">jfrog.svg</div></div>

  208.     

  209.       <div id="kafka.svg" class="imgbox"><img src="kafka.svg" class="bg-0" onclick="download('kafka.svg', this)"/><div class="label">kafka.svg</div></div>

  210.     

  211.       <div id="keda-icon.svg" class="imgbox"><img src="keda-icon.svg" class="bg-0" onclick="download('keda-icon.svg', this)"/><div class="label">keda-icon.svg</div></div>

  212.     

  213.       <div id="keda-logo.svg" class="imgbox"><img src="keda-logo.svg" class="bg-0" onclick="download('keda-logo.svg', this)"/><div class="label">keda-logo.svg</div></div>

  214.     

  215.       <div id="kubernetes-horizontal.svg" class="imgbox"><img src="kubernetes-horizontal.svg" class="bg-0" onclick="download('kubernetes-horizontal.svg', this)"/><div class="label">kubernetes-horizontal.svg</div></div>

  216.     

  217.       <div id="kubernetes-stacked.svg" class="imgbox"><img src="kubernetes-stacked.svg" class="bg-0" onclick="download('kubernetes-stacked.svg', this)"/><div class="label">kubernetes-stacked.svg</div></div>

  218.     

  219.       <div id="kubernetes.svg" class="imgbox"><img src="kubernetes.svg" class="bg-0" onclick="download('kubernetes.svg', this)"/><div class="label">kubernetes.svg</div></div>

  220.     

  221.       <div id="linkedin.svg" class="imgbox"><img src="linkedin.svg" class="bg-0" onclick="download('linkedin.svg', this)"/><div class="label">linkedin.svg</div></div>

  222.     

  223.       <div id="linkerd-icon.svg" class="imgbox"><img src="linkerd-icon.svg" class="bg-0" onclick="download('linkerd-icon.svg', this)"/><div class="label">linkerd-icon.svg</div></div>

  224.     

  225.       <div id="linux-tux-colour.svg" class="imgbox"><img src="linux-tux-colour.svg" class="bg-0" onclick="download('linux-tux-colour.svg', this)"/><div class="label">linux-tux-colour.svg</div></div>

  226.     

  227.       <div id="linux-tux-mono.svg" class="imgbox"><img src="linux-tux-mono.svg" class="bg-0" onclick="download('linux-tux-mono.svg', this)"/><div class="label">linux-tux-mono.svg</div></div>

  228.     

  229.       <div id="logo_pluralsight_mono.svg" class="imgbox"><img src="logo_pluralsight_mono.svg" class="bg-0" onclick="download('logo_pluralsight_mono.svg', this)"/><div class="label">logo_pluralsight_mono.svg</div></div>

  230.     

  231.       <div id="logo_pluralsight_twotone.svg" class="imgbox"><img src="logo_pluralsight_twotone.svg" class="bg-0" onclick="download('logo_pluralsight_twotone.svg', this)"/><div class="label">logo_pluralsight_twotone.svg</div></div>

  232.     

  233.       <div id="logo_sql.svg" class="imgbox"><img src="logo_sql.svg" class="bg-0" onclick="download('logo_sql.svg', this)"/><div class="label">logo_sql.svg</div></div>

  234.     

  235.       <div id="microsoft-logo.svg" class="imgbox"><img src="microsoft-logo.svg" class="bg-0" onclick="download('microsoft-logo.svg', this)"/><div class="label">microsoft-logo.svg</div></div>

  236.     

  237.       <div id="microsoft-sq-1.svg" class="imgbox"><img src="microsoft-sq-1.svg" class="bg-0" onclick="download('microsoft-sq-1.svg', this)"/><div class="label">microsoft-sq-1.svg</div></div>

  238.     

  239.       <div id="microsoft-sq-2.svg" class="imgbox"><img src="microsoft-sq-2.svg" class="bg-0" onclick="download('microsoft-sq-2.svg', this)"/><div class="label">microsoft-sq-2.svg</div></div>

  240.     

  241.       <div id="microsoft.svg" class="imgbox"><img src="microsoft.svg" class="bg-0" onclick="download('microsoft.svg', this)"/><div class="label">microsoft.svg</div></div>

  242.     

  243.       <div id="nginx.svg" class="imgbox"><img src="nginx.svg" class="bg-0" onclick="download('nginx.svg', this)"/><div class="label">nginx.svg</div></div>

  244.     

  245.       <div id="nodejs-1.svg" class="imgbox"><img src="nodejs-1.svg" class="bg-0" onclick="download('nodejs-1.svg', this)"/><div class="label">nodejs-1.svg</div></div>

  246.     

  247.       <div id="nodejs-2.svg" class="imgbox"><img src="nodejs-2.svg" class="bg-0" onclick="download('nodejs-2.svg', this)"/><div class="label">nodejs-2.svg</div></div>

  248.     

  249.       <div id="nodejs-3.svg" class="imgbox"><img src="nodejs-3.svg" class="bg-0" onclick="download('nodejs-3.svg', this)"/><div class="label">nodejs-3.svg</div></div>

  250.     

  251.       <div id="oam.svg" class="imgbox"><img src="oam.svg" class="bg-0" onclick="download('oam.svg', this)"/><div class="label">oam.svg</div></div>

  252.     

  253.       <div id="octopus-deploy.svg" class="imgbox"><img src="octopus-deploy.svg" class="bg-0" onclick="download('octopus-deploy.svg', this)"/><div class="label">octopus-deploy.svg</div></div>

  254.     

  255.       <div id="openshift.svg" class="imgbox"><img src="openshift.svg" class="bg-0" onclick="download('openshift.svg', this)"/><div class="label">openshift.svg</div></div>

  256.     

  257.       <div id="powerbi-mono-black.svg" class="imgbox"><img src="powerbi-mono-black.svg" class="bg-0" onclick="download('powerbi-mono-black.svg', this)"/><div class="label">powerbi-mono-black.svg</div></div>

  258.     

  259.       <div id="prometheus-icon.svg" class="imgbox"><img src="prometheus-icon.svg" class="bg-0" onclick="download('prometheus-icon.svg', this)"/><div class="label">prometheus-icon.svg</div></div>

  260.     

  261.       <div id="puppet.svg" class="imgbox"><img src="puppet.svg" class="bg-0" onclick="download('puppet.svg', this)"/><div class="label">puppet.svg</div></div>

  262.     

  263.       <div id="python-colour.svg" class="imgbox"><img src="python-colour.svg" class="bg-0" onclick="download('python-colour.svg', this)"/><div class="label">python-colour.svg</div></div>

  264.     

  265.       <div id="python-mono.svg" class="imgbox"><img src="python-mono.svg" class="bg-0" onclick="download('python-mono.svg', this)"/><div class="label">python-mono.svg</div></div>

  266.     

  267.       <div id="r-lang.svg" class="imgbox"><img src="r-lang.svg" class="bg-0" onclick="download('r-lang.svg', this)"/><div class="label">r-lang.svg</div></div>

  268.     

  269.       <div id="raspberry-pi.svg" class="imgbox"><img src="raspberry-pi.svg" class="bg-0" onclick="download('raspberry-pi.svg', this)"/><div class="label">raspberry-pi.svg</div></div>

  270.     

  271.       <div id="red-hat-new.svg" class="imgbox"><img src="red-hat-new.svg" class="bg-0" onclick="download('red-hat-new.svg', this)"/><div class="label">red-hat-new.svg</div></div>

  272.     

  273.       <div id="red-hat.svg" class="imgbox"><img src="red-hat.svg" class="bg-0" onclick="download('red-hat.svg', this)"/><div class="label">red-hat.svg</div></div>

  274.     

  275.       <div id="ruby-1.svg" class="imgbox"><img src="ruby-1.svg" class="bg-0" onclick="download('ruby-1.svg', this)"/><div class="label">ruby-1.svg</div></div>

  276.     

  277.       <div id="ruby-mono.svg" class="imgbox"><img src="ruby-mono.svg" class="bg-0" onclick="download('ruby-mono.svg', this)"/><div class="label">ruby-mono.svg</div></div>

  278.     

  279.       <div id="rudr.svg" class="imgbox"><img src="rudr.svg" class="bg-0" onclick="download('rudr.svg', this)"/><div class="label">rudr.svg</div></div>

  280.     

  281.       <div id="rust.svg" class="imgbox"><img src="rust.svg" class="bg-0" onclick="download('rust.svg', this)"/><div class="label">rust.svg</div></div>

  282.     

  283.       <div id="saltstack.svg" class="imgbox"><img src="saltstack.svg" class="bg-0" onclick="download('saltstack.svg', this)"/><div class="label">saltstack.svg</div></div>

  284.     

  285.       <div id="sap.svg" class="imgbox"><img src="sap.svg" class="bg-0" onclick="download('sap.svg', this)"/><div class="label">sap.svg</div></div>

  286.     

  287.       <div id="slack.svg" class="imgbox"><img src="slack.svg" class="bg-0" onclick="download('slack.svg', this)"/><div class="label">slack.svg</div></div>

  288.     

  289.       <div id="smi-icon.svg" class="imgbox"><img src="smi-icon.svg" class="bg-0" onclick="download('smi-icon.svg', this)"/><div class="label">smi-icon.svg</div></div>

  290.     

  291.       <div id="smi-logo.svg" class="imgbox"><img src="smi-logo.svg" class="bg-0" onclick="download('smi-logo.svg', this)"/><div class="label">smi-logo.svg</div></div>

  292.     

  293.       <div id="spark.svg" class="imgbox"><img src="spark.svg" class="bg-0" onclick="download('spark.svg', this)"/><div class="label">spark.svg</div></div>

  294.     

  295.       <div id="stack-overflow.svg" class="imgbox"><img src="stack-overflow.svg" class="bg-0" onclick="download('stack-overflow.svg', this)"/><div class="label">stack-overflow.svg</div></div>

  296.     

  297.       <div id="suse.svg" class="imgbox"><img src="suse.svg" class="bg-0" onclick="download('suse.svg', this)"/><div class="label">suse.svg</div></div>

  298.     

  299.       <div id="terraform-full.svg" class="imgbox"><img src="terraform-full.svg" class="bg-0" onclick="download('terraform-full.svg', this)"/><div class="label">terraform-full.svg</div></div>

  300.     

  301.       <div id="terraform.svg" class="imgbox"><img src="terraform.svg" class="bg-0" onclick="download('terraform.svg', this)"/><div class="label">terraform.svg</div></div>

  302.     

  303.       <div id="trello.svg" class="imgbox"><img src="trello.svg" class="bg-0" onclick="download('trello.svg', this)"/><div class="label">trello.svg</div></div>

  304.     

  305.       <div id="twitter-1.svg" class="imgbox"><img src="twitter-1.svg" class="bg-0" onclick="download('twitter-1.svg', this)"/><div class="label">twitter-1.svg</div></div>

  306.     

  307.       <div id="twitter-2.svg" class="imgbox"><img src="twitter-2.svg" class="bg-0" onclick="download('twitter-2.svg', this)"/><div class="label">twitter-2.svg</div></div>

  308.     

  309.       <div id="ubuntu.svg" class="imgbox"><img src="ubuntu.svg" class="bg-0" onclick="download('ubuntu.svg', this)"/><div class="label">ubuntu.svg</div></div>

  310.     

  311.       <div id="virtualkubelet-icon.svg" class="imgbox"><img src="virtualkubelet-icon.svg" class="bg-0" onclick="download('virtualkubelet-icon.svg', this)"/><div class="label">virtualkubelet-icon.svg</div></div>

  312.     

  313.       <div id="vscode.svg" class="imgbox"><img src="vscode.svg" class="bg-0" onclick="download('vscode.svg', this)"/><div class="label">vscode.svg</div></div>

  314.     

  315.       <div id="vuejs.svg" class="imgbox"><img src="vuejs.svg" class="bg-0" onclick="download('vuejs.svg', this)"/><div class="label">vuejs.svg</div></div>

  316.     

  317.       <div id="windows.svg" class="imgbox"><img src="windows.svg" class="bg-0" onclick="download('windows.svg', this)"/><div class="label">windows.svg</div></div>

  318.     

  319.       <div id="xcode.svg" class="imgbox"><img src="xcode.svg" class="bg-0" onclick="download('xcode.svg', this)"/><div class="label">xcode.svg</div></div>

  320.     

  321.       <div id="youtube.svg" class="imgbox"><img src="youtube.svg" class="bg-0" onclick="download('youtube.svg', this)"/><div class="label">youtube.svg</div></div>

  322.     

  323.   </div>

  324. 

  325.   <script>

  326.     var bgSetting = 0;

  327. 

  328.     function toggleBg() {

  329.       bgSetting++

  330.       if(bgSetting > 2) bgSetting = 0;

  331.       for(let img of document.getElementsByTagName("img")) {

  332.         img.className = `bg-${bgSetting}`;

  333.       }

  334.     }

  335.     

  336.     function search() {

  337.       let query = document.getElementById('finder').value.trim().toLowerCase()

  338.       if(query.length <= 0) {

  339.         for(let imgbox of document.getElementsByClassName("imgbox")) {

  340.           imgbox.style.display = "inline-block"

  341.         }

  342.       }

  343.       for(let imgbox of document.getElementsByClassName("imgbox")) {

  344.         imgbox.style.display = "inline-block"

  345.         if(!imgbox.id.includes(query)) {

  346.           imgbox.style.display = "none"

  347.         }

  348.       }

  349.     }

  350.     

  351.     function download(f, e) {

  352.       if(document.getElementById("pngcheck").checked) {

  353.         var data = getBase64Image(e);

  354.         let a = document.createElement('a')

  355.         a.href = "data:application/octet-stream;base64," + data

  356.         a.download = f.replace('.svg', '.png')

  357.         a.click()

  358.       } else {

  359.         let a = document.createElement('a')

  360.         a.href = f

  361.         a.download = f

  362.         a.click()

  363.       }

  364.     }

  365.     

  366.     // Actual magic

  367.     function getBase64Image(img) {

  368.       var canvas = document.createElement("canvas");

  369.       canvas.width = img.naturalWidth;

  370.       canvas.height = img.naturalHeight;

  371.       console.log(canvas.width , canvas.height)

  372.       var ctx = canvas.getContext("2d");

  373.       ctx.drawImage(img, 0, 0);

  374.       var dataURL = canvas.toDataURL("image/png");

  375.       return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

  376.     }

  377.     

  378.     function updateCount() {

  379.       document.querySelector('#count').innerHTML = ''+document.querySelectorAll(".imgbox").length

  380.     }

  381. 

  382.     updateCount()

  383.   </script>

  384. </body>

  385. </html>