d1-web
Version:
Lightweight responsive front-end framework
224 lines (194 loc) • 11.9 kB
HTML
<html lang="en">
<head>
<title>Icons test - d1</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
body{font:400% sans-serif;}
div{display:flex;flex-wrap:wrap;width:5em;}
a{display:block;color:#03c;text-decoration:none;margin:.1em;}
a:hover{color:c00;}
a:hover .icon{color:inherit;}
.icon{display:inline-block;width:1em;height:1em;vertical-align:-.2em;/*padding-right:.5em;*/color:#666;background:#eee;background-clip:content-box;}
svg{fill:currentColor;}
</style>
<script>
let icons = {
//find: '# M10,50l40,40 40,-80 -40,60z', // path (#x# or 100x100)
//open: '<svg viewBox="0 0 100 100"><path d="M10,50l40,40 40,-80 -40,0z"/></svg>' // svg
//more: [7, 'M3 1h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1z'],
//first1: [8, 'M1.5 1h1v6h-1zm1 3l4-3v6z'],
//last1: [8, 'M1.5 1v6l4-3zm4 0h1v6h-1z'],
//download2: [8, 'M1 1h2v2h-1l2 3 2-3h-1v-2h2v6h-6z'],
//date2: [10, 'M1 1.8h1.5v-1h1.5v1h2v-1h1.5v1h1.5v7h-8zm1 2v4h6v-4z'],
//folder2: [12, 'M1 1h4l.5 2h5.5v7h-10zm1 1v7h8v-5h-5.5l-.5-2z'],
//open-folder: [7, ''],
//play: [8, 'M2 1v6l5-3z'],
//eject: [7, ''],
//refresh2: [10, 'M5 0v1a4 4 0 1 0 4 4h-1a3 3 0 1 1-3-3v1l2-1.5z'],
//place2: [10, 'M5 9C-5.5 -1.5 15.5 -1.5 5 9zM5 2a2 2 0 1 0 .01 0z'],
//user2: [8, 'M4 7C10 -1 -2 -1 4 7zM1 6.5q3 1 6 0-3 -2 -6 0z'],
//user1: [8, 'M4 1a1.7 2.2 0 1 0 .01 0m-3 5.5q3 1 6 0-3 -2.5 -6 0z'],
//gear2: [7, 'M2 3l1-1-1-1 q1.5 .2 2 1v1l2 2q-.2.8 -1 1l-2-2h-1q-.8-.5-1-2z'],
//gear: [20, 'M18.4,12.2 L16.2,16.2 C15.3,15.4 14.1,15.2 13.3,15.7 C12.4,16.2 12.0,17.3 12.2,18.5 L7.7,18.5 C7.9,17.3 7.5,16.2 6.6,15.7 C5.8,15.3 4.6,15.4 3.7,16.2 L1.5,12.2 C2.5,11.8 3.3,10.9 3.3,9.9 C3.3,9 2.5,8.1 1.5,7.7 L3.7,3.7 C4.6,4.5 5.7,4.7 6.6,4.2 C7.5,3.7 7.9,2.6 7.7,1.5 L12.2,1.5 C12.0,2.6 12.4,3.7 13.3,4.2 C14.2,4.7 15.3,4.5 16.2,3.7 L18.4,7.7 C17.4,8.1 16.6,8.9 16.7,10.0 C16.6,11.0 17.4,11.9 18.4,12.2 L18.4,12.2 zM10 6.5a3.5 3.5 0 1 0 .01 0z'],
//gear3: [20, 'M18.4,12.2 L 16.2,16.2 3.7,16.2 L1.5,12.2 7.7,1.5 12.2,1.5 zM 12.2,18.5 7.7,18.5 1.5,7.7 3.7,3.7 16.2,3.7 18.4,7.7 zM10 6.5a3.5 3.5 0 1 0 .01 0za3.5 3.5 0 1 0 .01 0z'],
//attach1ok: [15, 'M11.5 2c-10 9-7 10 0 2l1 1c-9 10-14 8-5-1l-1-1c-11 10-4 16 8 2z'],
//attach2: [15, 'M1 4q0-3 3-3t3 3v8q0 2-2 2t-2-2v-7h1v7q0 1 1 1t1-1v-8q0-2-2-2t-2 2v7h-1z'],
//print1: [10, 'M2 1.5h4v5h-4zm-1 3v4h8v-4zm6 1h1v1h-1z'],
//key3: [10, 'M1 8l3-3v-2l2-2q3 0 3 3l-2 2h-2v1h-1v1h-1v1h-2zm6.7-5.7a.7 .7 0 1 0 .01 .01z'],
//send2: [7, 'M1 3l5-2-2 5-1-2zm0 3c1.5 -3 3 -1.5 0 0z'],
//send3: [7, 'M.8 3.2l5-2-2 5-.8-2.2z'],
//send4: [9, 'M1 4l7-3-3 7-1-2.8 3-3.2-3.2 3z'],
menu: [7, 'M.5 1h6v1h-6zm0 2h6v1h-6zm0 2h6v1h-6z'],
sort: [7, 'M1 1h2v1h-2zm0 2h3.5v1h-3.5zm0 2h5v1h-5z'],
more: [17, 'M7 2h3v3h-3zm0 5h3v3h-3zm0 5h3v3h-3z'],
grid: [7, 'M1 1h2v2h-2zM4 1h2v2h-2zM1 4h2v2h-2zM4 4h2v2h-2z'],
home: [10, 'M1 5h1v4h2v-3h2v3h2v-4h1l-4-4z'],
find: [12, 'M5 1a4 4 0 1 0 .01 0zm0 1a3 3 0 1 1-.01 0m3 5l-1 1 3 3 1-1z'],
config: [220, 'M35 67l75 -44 75 44 0 89-75 44-75-44zm75 8a35 35 0 1 0 .01 0z'],
close: [12, 'M2 1l4 4 4-4 1 1-4 4 4 4-1 1-4-4-4 4-1-1 4-4-4-4z'],
user: [10, 'M5 9C13 -1.5 -3 -1.5 5 9zM1 8.5q4 1 8 0-4 -3 -8 0z'],
exit: [10, 'M1 1h4v1h-3v6h3v1h-4zm2 3h3v-2l3 3-3 3v-2h-3z'],
key: [20, 'M2 16l7-7v-4l3-3q7 0 7 7l-3 3h-4l-6 6h-4zm3 1h1l6-6h-1zm11-12a1.5 1.5 0 1 0 .01 .01z'],
lock: [10, 'M1.5 4h7v5h-7zm1 0c0-4 5-4 5 0h-1c0-3-3-3-3 0zm2 1v2h1v-2z'],
edit: [10, 'M7 1q1.6 .4 2 2l-5 5-3 1 1-3zM2.3 6.3l-.5 1.5.4.4 1.5-.5z'],
add: [7, 'M3 1h1v2h2v1h-2v2h-1v-2h-2v-1h2z'],
delete: [20, 'M5 3l5 5 5-5 2 2-5 5 5 5-2 2-5-5-5 5-2-2 5-5-5-5z'],
ok: [100, 'M10 48l11-9 18 22 40-50 11 9-51 65z'],
north: [10, 'M1 6l4-4 4 4-1 1-3-3-3 3z'],
south: [10, 'M1 4l4 4 4-4-1-1-3 3-3-3z'],
west: [10, 'M6 1l1 1-3 3 3 3-1 1-4-4z'],
east: [10, 'M4 1l4 4-4 4-1-1 3-3-3-3z'],
up: [12, 'M2 7l-1-1 5-5 5 5-1 1 -3.25 -3.2v7h-1.5v-7z'],
down: [12, 'M2 5l-1 1 5 5 5-5-1-1 -3.25 3.2v-7h-1.5v7z'],
left: [12, 'M7 2l-1-1 -5 5 5 5 1-1 -3.2 -3.25h7v-1.5h-7z'],
right: [12, 'M5 2l 1-1 5 5 -5 5 -1-1 3.2 -3.25h-7v-1.5h7z'],
upload: [10, 'M1 8h8v1h-8zm1-4h2v3h2v-3h2l-3-3z'],
download: [10, 'M1 8h8v1h-8zm1-3.7h2v-3h2v3h2l-3 3z'],
first: [12, 'M2 2h1.5v8h-1.5zm1.5 4l6.5-4v8z'],
last: [12, 'M2 2v8l6.5-4zm6.5 0h1.5v8h-1.5z'],
folder: [12, 'M1 1.5h4l1 2h5v7h-10zm1 3v5h8v-5z'],
open: [12, 'M.5 1.5h4l1 2h6.3l-2.3 7h-9zm3 3l-2 5h7l2-5z'],
file: [12, 'M2 1h5l3 3v7h-8zm1 1v8h6v-6h-2v-2z'],
attach: [15, 'M4.5 11q0 3 3 3t3-3v-8q0-2-2-2t-2 2v7h1v-7q0-1 1-1t1 1v8q0 2-2 2t-2-2v-7h-1z'],
audio: [19, 'M8 14h-1v-10l8-2v10h-1v-6.5l-6 1.5za3 2 -20 1 1 0 -.01zm7-2a3 2 -20 1 1 0 -.01z'],
video: [12, 'M1 3h7v2l3-2v6l-3-2v2h-7z'],
image: [12, 'M1 2h10v8h-10zm1 1v5l3-3 2 2 1-1 2 2 v-5zm5 .5a1 1 0 1 0 ,001 0z'],
text: [12, 'M2 1h5l3 3v7h-8zm1 1v8h6v-6h-2v-2zm1 4h4v1h-4zm0 2h4v1h-4z'],
tree: [26, 'M9 3h8v6h-3v3h8v5h2v6h-6v-6h2v-3h-6v3h2v6h-6v-6h2v-3h-6v3h2v6h-6v-6h2v-5h8v-3h-3z'],
list: [7, 'M1 1h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1z M3 1h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3z'],
link: [20, 'M9 7l6-6 4 4-6 6-1-1 5-5-2-2-5 5zm-8 8l6-6 1 1-5 5 2 2 5-5 1 1-6 6zm5.5 -2.5l6-6 1 1-6 6z'],
chart: [10, 'M1 9v-3h2v3zm3 0v-5h2v5zm3 0v-7h2v7z'],
no: [7, 'M1 3h5v1h-5z'],
ban: [20, 'M10 2a8 8 0 1 0 .01 0m0 2a6 6 0 1 1 -.01 0zm-4.5 .5l-1 1 10 10 1-1z'],
warning: [16, 'M8 1l-7 13h14zm0 10a1 1 0 1 1-.01 0m0 -.2c-3-8 3-8 0 0z'],
info: [18, 'M10 2a7 7 0 1 0 .01 0zm-1 2.2h2v2h-2zm-1 3.2h3v5l1 1h-3v-5'],
share: [22, 'M6 8a3 3 0 1 0 .01 0zm10-5a3 3 0 1 0 .01 0zm0 10a3 3 0 1 0 .01 0zm-10-3v2l10 5v-2zv2l10-5v-2z'],
world: [12, 'M6 1.2a4.8 4.8 0 1 0 .01 0zm0 .8a4 4 0 1 1-.01 0za3 4 0 1 0 .01 0za2.2 4 0 1 1-.01 0za.5 4 0 1 0 .01 0zm4 4a4 .2 0 1 0 0 .01z'],
flag: [10, 'M2 1h1v1q2-1 3 0t3-0v4q-2 1-3 0t-3 0v3h-1z'],
pin: [10, 'M2 4a3 3 0 0 1 6 0q0 2 -3 5q-3-3-3-5zm3 -2a2 2 0 1 0 .01 0z'],
date: [10, 'M1 1.8h8v7h-8zm1 2v4h6v-4zm.5-3v2h1.5v-2zm3.5 0v2h1.5v-2z'],
time: [24, 'M12 1a10 10 0 1 1 -.01 0zm0 2a8 8 0 1 0 .01 0zm-1.2 1h2v6.5l3.5 3.5-1.5 1.5-4-4z'],
refresh: [20, 'M10 1.2v3a7 7 0 1 0 7 7h-2a5 5 0 1 1-5-5v3l5-4z'],
view: [12, 'm1 6q5-6 10 0v1q-5 -6-10 0zm5-3a2.8 2.8 0 1 1 -.01 0zm0 1.8a1.1 1.1 0 1 0 .01 0z'],
card: [14, 'M1 3h12v8h-12zm1 1v1h10v-1zm0 3v3h10v-3z'],
sum: [12, 'M2.5 3v-1h7v1h-5l3 3-3 3h5v1h-7v-1l3-3z'],
copy: [9, 'M1 3 h1v4h4v1h-5zm2-2h5v5h-5zm1 1v3h3v-3z'],
help: [18, 'M9 2a7 7 0 1 0 .01 0zm-3 5q0-3 3-3t3 3c0 3-2 2-2 4h-2c0-3 2-2 2-4q0-1-1-1t-1 1zm3 4.5a1.3 1.3 0 1 1 -.01 0z'],
phone: [13, 'M3 1l2 3-1.2 1.2 4 4 1.2-1.2 3 2c-3 6 -15 -6 -9-9z'],
mail: [14, 'M1 2.5h12v9h-12zm1 1v1l5 5 5 -5v-1z'],
chat: [12, 'M6 1.2a5 4 0 1 0 .01 0zm0 1a4 3 0 1 1-.01 0zm-3.8 5.5l-1 3 4-2z'],
send: [12, 'M1 2l10 4-10 4 1.5-3.6 6-.4-6-.4z'],
bookmark: [8, 'M4 5l-2 2v-6h4v6z'],
star2: [32, 'M16 2 l9 28-23-18 28 0-23 18z'],
heart: [6, 'M3 2c2-2 4 1 0 3c-4-2-2-5 0-3z'],
tag: [9, 'M1 5.2l4-4h3v3l-4 4zm6-3.1a.6 .6 0 1 0 .01 .01z'],
expand: [10, 'M1 1h3v1h-2v2h-1zm5 0h3v3h-1v-2h-2zm2 5h1v3h-3v-1h2zm-7 0h1v2h2v1h-3z'],
collapse: [10, 'M4 4h-3v-1h2v-2h1zm2 0v-3h1v2h2v1zm0 2h3v1h-2v2h-1zm-2 0v3h-1v-2h-2v-1z'],
box: [26, 'M3 6l10-2.7 10 2.7-10 3zm-.8 1.2l10 3v13l-10-4zm21.6 0l-10 3v13l10-4z'],
columns: [16, 'M1.5 2.5h13v11h-13zm1 2v8h5v-8zm6 0v8h5v-8z'],
storage: [9, 'M1 1h7v3h-7zm0 4h7v3h-7zm4-3v1h2v-1zm0 4v1h2v-1z'],
settings: [11, 'M1 2h9v1h-9zm0 3h9v1h-9zm0 3h9v1h-9zm2-7h1v3h-1zm4 3h1v3h-1zm-3 3h1v3h-1z'],
power: [18, 'M6 3a6.7 6.7 0 1 0 6 0v2a4.9 4.9 0 1 1 -6 0zm2-1.5h2v8h-2z'],
energy: [11, 'M5 1l-2 4h2l-2 5 5-6h-2l2-3z'],
sound: [9, 'M3 6h-2v-3h2l3-2v7zm3.7-3q2 1.5 0 3z'],
mic: [20, 'M7 5 a3 3 0 1 1 6 0v4a3 3 0 1 1 -6 0zm-2 4a5 5 0 1 0 10 0zm4 4v3h-3v2h8v-2h-3v-3z'],
photo: [10, 'M1 3h2l1-1h2l1 1h2v5h-8zm4 .5a1.8 1.8 0 1 0 .01 0z'],
print: [10, 'M1 2.5h2v-1h4v1h2v4h-8zm2 2l-1 4h6l-1-4zm4-1h1v-.5h-1z'],
play: [12, 'M3 2v8l7-4z'],
pause: [9, 'M2 2h2v5h-2zm3 0h2v5h-2z'],
stop: [9, 'M2 2h5v5h-5z'],
rec: [10, 'M5 2a3 3 0 1 0 .01 0z'],
layer: [14, 'M1 4l6-3 6 3-6 3zm0 3l2-1 4 2 4-2 2 1-6 3zm0 3l2-1 4 2 4-2 2 1-6 3z'],
// https://github.com/danklammer/bytesize-icons
// outline icons; must end with space; class="icon line"
/*
heart: [32, 'M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16Z '],
message: [32, 'M2 4 L30 4 30 22 16 22 8 29 8 22 2 22Z '],
mail: [32, 'M2 26 L30 26 30 6 2 6 Z M2 6 L16 16 30 6 '],
home: [32, 'M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20Z '],
login: [32, 'M3 16 L23 16 M15 8 L23 16 15 24 M21 4 L29 4 29 28 21 28 '],
logout: [32, 'M28 16 L8 16 M20 8 L28 16 20 24 M11 28 L3 28 3 4 11 4 '],
file: [32, 'M6 2 L6 30 26 30 26 10 18 2 Z M18 2 L18 10 26 10 '],
folder: [32, 'M2 26 L30 26 30 7 14 7 10 4 2 4Z '],
date: [32, 'M2 6 L2 30 30 30 30 6 Z M2 15 L30 15 M7 3 L7 9 M13 3 L13 9 M19 3 L19 9 M25 3 L25 9 '],
upload: [32, 'M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 12 L16 4 24 12 '],
download: [32, 'M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16 '],
send: [32, 'M2 16 L30 2 16 30 12 20 Z M30 2 L12 20 '],
link: [32, 'M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15 '],
options: [32, 'M28 6 L4 6 M28 16 L4 16 M28 26 L4 26 M24 3 L24 9 M8 13 L8 19 M20 23 L20 29 '],
star: [32, 'M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12Z '],
warning: [32, 'M16 3 L30 29 2 29 Z M16 11 L16 19 M16 23 L16 25 '],
refresh: [32, 'M29 16 C29 22 24 29 16 29 8 29 3 22 3 16 3 10 8 3 16 3 21 3 25 6 27 9 M20 10 L27 9 28 2 '],
// not single path
more: '<svg viewBox="0 0 32 32"><circle cx="16" cy="7" r="2"/><circle cx="16" cy="16" r="2"/><circle cx="16" cy="25" r="2"/></svg> ',
info: '<svg viewBox="0 0 32 32"><path d="M16 14 L16 23 M16 8 L16 10"/><circle cx="16" cy="16" r="14"/></svg> ',
clock: '<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="14"/><path d="M16 8 L16 16 20 20"/></svg> ',
photo: '<svg viewBox="0 0 32 32"><path d="M20 24 L12 16 2 26 2 2 30 2 30 24 M16 20 L22 14 30 22 30 30 2 30 2 24"/><circle cx="10" cy="9" r="3"/></svg> ',
lock: '<svg viewBox="0 0 32 32"><path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 9 9 5 16 5 23 5 23 9 23 15 M16 20 L16 23"/><circle cx="16" cy="24" r="1"/></svg> ',
search: '<svg viewBox="0 0 32 32"><circle cx="14" cy="14" r="12" /><path d="M23 23 L30 30" /></svg> '
*/
};
let addIcon = function(i, n, clr){
n.insertBefore(svg(i), n.firstChild);
n.removeChild(n.lastChild, n);
}
let svg = function(ico, alt){
let a = ico.split(/\//);
ico = a[0];
let svg = icons[ico];
if(svg && typeof svg !== 'string'){
svg = '<svg viewBox="0 0 ' + svg[0] + ' ' + svg[0] + '"><path d="' + svg[1] + '"/></svg>';
}
let n = null;
if(svg){
let div = document.createElement('div');
div.innerHTML = svg;
n = div.firstChild;
n.setAttribute('width', 24);
n.setAttribute('height', 24);
n.setAttribute('class', 'icon');
}
return n;
}
document.addEventListener('DOMContentLoaded', function(n){
let d = document.getElementById('demo-all-icons');
if(d && icons){
let i = 0;
Object.keys(icons).forEach(function(k){
let a = document.createElement('a');
a.textContent = k;
a.href = a.title = '#' + (++i) + '-' + k;
addIcon(k, a, 0);
d.appendChild(a);
});
}
}, false);
</script>
</head>
<body>
<div id="demo-all-icons"></div>
</body>
</html>