This repository has been archived by the owner on Feb 3, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (76 loc) · 2.18 KB
/
index.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
<!DOCTYPE html>
<html class="dfds-icons-manual-load">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #333;
}
.root-icons {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.icon-container {
display: inline-flex;
margin: 0.5rem;
}
.icon {
outline: 1px solid gray;
fill: purple;
color: deeppink;
object-fit: cover;
background: cyan;
}
</style>
</head>
<body>
<div class="root-icons" id="root-icons"></div>
<script src="dist/core/icons.js"></script>
<script>
_DFDS_.icons.core({ callback });
function callback(ajax) {
ajax.status === 200 &&
setTimeout(() => {
// wait until available in the DOM
let svgIcons = document.querySelector(".dfds-svg-in-the-dom > svg");
apply(svgIcons);
}, 0);
}
function apply(svgIcons) {
let rootIcons = document.querySelector(".root-icons");
let ids = [].slice.call(svgIcons.querySelectorAll("[id]"));
let fragment = document.createDocumentFragment();
let div;
for (let element of ids) {
div = document.createElement("div");
div.className = "icon-container";
let id = element.getAttribute("id");
let title = element.querySelector("title") || "";
if (title) {
title = title.textContent;
}
let viewBox = element.getAttribute("viewBox");
let viewBoxDim = viewBox.split(/\s+|,/);
let x = viewBoxDim[2] * 2;
let y = viewBoxDim[3] * 2;
div.innerHTML = `
<svg role="img" class="icon" width="${x}" height="${y}">
<title>${title}</title>
<use xlink:href="#${id}"></use>
</svg>
`;
fragment.appendChild(div);
}
rootIcons.appendChild(fragment);
}
</script>
</body>
</html>