-
Notifications
You must be signed in to change notification settings - Fork 2
/
list.html
88 lines (85 loc) · 4.03 KB
/
list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang=en>
<title>Picon list</title>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta name="description" content="Picon iconset icons list">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13,4 13,0 14,0 15,2 15,0 16,0 16,4 15,4 15,4 14,2 14,4 M9,4 9,0 12,0 12,4 M6,4 6,0 8,0 8,1 7,1 7,3 8,3 8,4 M0,4 0,0 3,0 3,2 1,3 1,4 M1,1 1,2 2,2 2,1 M10,1 10,3 11,3 11,1 M6,16 6.25,15 6,8 7.25,7 7.25,5 8.75,5 8.75,7 10,8 9.75,15 10,16 M9,9.5 9,9 7,9 7,9.5 M9,12 9,10 7,10 7,12 7.5,13 8.5,13 M4,4 4,0 5,0 5,4'></path></svg>">
<body onhashchange="let h=decodeURIComponent(location.hash.slice(1)),f=document.forms.f;f.q.value=h;f.icon.forEach(i=>i.hidden=h&&!i.title.match(h))"
onload="const list=document.querySelector('#icons'),name=location.search.slice(1)||'solid';new FontFace('picon',`url(${name}.woff2)`).load().then(f=>document.fonts.add(f));fetch(`${name}.json`,{_cache:'force-cache'}).then(r => r.json()).then(j=>onhashchange(j.icons.forEach(i => list.append(Object.assign(document.createElement('input'),{name:'icon',type:'radio',value:i.properties.ligatures||String.fromCharCode(i.icon.defaultCode), className:'picon',style:`color:${i.icon.color||'inherit'}`,title:JSON.stringify(i)})))));">
<form name=f onsubmit="return false;" onchange="let i=[...icon].find(i=>i.checked);if(!i)return;i=JSON.parse(i.title);
let svg='<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 '+i.icon.grid+' '+i.icon.grid+'%22>'+i.icon.paths.map((path,idx)=>'<path'+((i.icon.colors||[])[idx]?' fill=%22'+encodeURIComponent(i.icon.colors[idx])+'%22':'')+' d=%22'+path+'%22></path>').join('')+'</svg>';
Object.assign(querySelector('#open'),{download:i.properties.name+'.svg',href:'data:image/svg+xml;utf8,'+svg});
querySelector('#edit').href='edit.html#'+svg;
querySelector('#info').hidden=!i;view.style.color=i.icon.color;
text.value=view.value=icon.value;
querySelector('#tags').innerHTML='';
i.icon.tags.forEach(tag=>tags.append(Object.assign(document.createElement('a'),{innerText:'#'+tag,href:'#'+tag})))">
<nav style="top:0;box-shadow: 0 16px 16px -16px">
<div style="display:flex;">
<input type=search placeholder="icon search" name=q style="min-width:1px;font-size:32px;flex:1" oninput="location.hash=value">
<select onchange="document.documentElement.style.setProperty('--size', value);"><option>8px<option>16px<option selected>24px<option>32px<option>64px</select>
</div>
<center>
Search examples:
<a href="#">Show All</a>
<a href='#logo'>logo</a>
<a href='#parent'>parent</a>
<a href='#child'>child</a>
<a href='#"sport"'>"sport"</a>
<a href='#"app"'>"app"</a>
<a href='#"ali\w+"'>"ali\w+"</a>
</center>
</nav>
<div id=icons style="margin:2em 0;min-height:100vh;"></div>
<aside id=info hidden style="bottom:0;box-shadow: 0 -16px 16px -16px">
<div style="display: flex;gap:1em;flex-wrap: wrap;"><!-- can't be sticky AND grid/flex -->
<output name=view class="picon" style="font-size:64px"></output>
<div>
<output name=text style="font-family:monospace;font-size:32px"></output>
<a id=open download="picon.svg">download</a>
<a id=edit rel="noopener" target="_blank">edit</a>
<div id=tags></div>
</div>
</div>
</aside>
</form>
<style>
:root{
--size:24px;
--back:white;
}
body,form{margin-top:0;margin-bottom:0;background:#EEE;}
a{margin-right:.5em}
.picon {font-family: picon; white-space: pre;}
[type=radio][value]{
appearance:none;
font-size:0;
padding: calc(var(--size) / 2);
margin: calc(var(--size) / 8);
width: calc(var(--size) * 2); /* needed for ­ */
outline-offset: 0;
cursor: pointer;
}
[type=radio][value]:hover{
outline:calc(var(--size) / 8) dashed;
}
[type=radio][value]:checked{
outline:calc(var(--size) / 8) solid;
}
[type=radio][value]::after{
content: attr(value);
font-size:var(--size);
vertical-align: middle;
}
nav,aside{
position:sticky;
background:var(--back);
padding:1em;
}
button .picon{
font-size: 24px;
margin: 8px;
}
</style>
</body>