mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-08-23 14:12:56 +02:00
Code Issues Releases Wiki Activity

iconfont search

Browse Source
This commit is contained in:
codecalm
2020-05-31 20:08:15 +02:00
parent 66cbdf6b2b
commit b065e0aead
1 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
.build/iconfont.html
View File

@@ -39,6 +39,8 @@
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 3px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.tabler-icons {
@@ -84,6 +86,20 @@
margin: 2rem 0 3rem;
}
.search-bar {
padding: 0.75rem 1.5rem;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 3px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.search-bar input[name=search]{
padding:0.5rem;
background: #fafbfc;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
width:100%;
}
</style>
</head>
@@ -96,6 +112,10 @@
<p class="text-muted">version <%= v %></p>
</header>
<div class="search-bar">
<input type="text" name="search" placeholder="type to search"/>
</div>
<div class="box">
<div class="tabler-icons">
<% glyphs.forEach(function(glyph) { %>
@@ -112,6 +132,25 @@
</div>
</div>
<script type="text/javascript">
const input = document.querySelector("div.search-bar input");
const iconContainer = document.querySelector("div.box div.tabler-icons");
let icons = [];
document.querySelectorAll("div.tabler-icon").forEach(icon => icons.push({
el : icon,
name : icon.querySelector('strong').innerHTML,
}));
input.addEventListener('input', search);
function search(evt){
let searchValue = evt.target.value;
let iconsToShow = searchValue.length ? icons.filter(icon => icon.name.includes(searchValue)) : icons;
iconContainer.innerHTML = "";
iconsToShow.forEach(icon => iconContainer.appendChild(icon.el));
}
</script>
</body>
</html>