file-icons-js
Version:
File specific icons for the browser from Atom File-icons, https://github.com/file-icons/atom
48 lines (37 loc) • 2.34 kB
HTML
<html spellcheck="false" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="./dist/file-icons.js"></script>
<title>File Icons</title>
<style>
body {color:#444444; margin: 30px 60px;}
/* Icons Container */
.icons-container {display: flex;flex-wrap: wrap;background-color: #f1f1f1;padding: 10px 0 0 10px;}
.icons-container>* { position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer; background-color: #dddddd; border-radius: 4px; width: 64px; height: 64px; margin: 0 10px 10px 0; }
/* Icon */
i[class$=-icon] { font-style: normal; }
i[class$=-icon]:before { font-size: 32px;}
i[class$=-icon]:not(:hover):before { color: inherit;}
i[class$=-icon]:hover{ box-shadow: inset 0 0 0 0.1475em #ccc; }
i[class$=-icon]:hover>*.tooltip{visibility:visible;}
/* Tooltip */
i[class$=-icon]>*.tooltip{font-size: 18px; white-space: nowrap;background-color:#444444;bottom:calc(100% + 2px);color:#fff;;padding:5px 10px;position:absolute;text-align:center;border-radius: 4px;visibility:hidden;z-index:1;}
i[class$=-icon]>*.tooltip::after{border-color:#444444 transparent transparent;border-style:solid;border-width:5px;content:"";left:50%;margin-left:-5px;position:absolute;top:100%;}
</style>
</head>
<body>
<h2>Directory Icons</h2>
<div id="directoryContainer" class="icons-container"></div>
<h2>File Icons</h2>
<div id="fileContainer" class="icons-container"></div>
<script>
var icons = window.FileIcons
const directoryIcons = fileContainer.innerHTML = icons.db.directoryIcons.byName.reduce((acc, { icon, colour }) => ({ ...acc, [icon]: colour[0] }), {})
const fileIcons = fileContainer.innerHTML = icons.db.fileIcons.byName.reduce((acc, { icon, colour }) => ({ ...acc, [icon]: colour[0] }), {})
const getIcon = ([icon, colour]) => `<i class="${colour} ${icon}"><span class="tooltip">${icon.slice(0, -5)}</span></i>`
directoryContainer.innerHTML = Object.entries(directoryIcons).map(getIcon).join('')
fileContainer.innerHTML = Object.entries(fileIcons).map(getIcon).join('')
</script>
</body>
</html>