/
index.html
57 lines (49 loc) · 1.58 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>wc-fontawesome demo</title>
<style>
.color-red {
color: red;
}
</style>
</head>
<body>
<select id="select-icon">
<option value="spinner" selected>Spinner</option>
<option value="check">Check</option>
<option value="baby">Baby</option>
<option value="align-center">Align Center</option>
<option value="ambulance">Ambulance</option>
<option value="bars">Bars</option>
</select>
<input type="checkbox" name="shadow" id="use-shadow" /> Use shadow DOM
<div id="container"></div>
<script type="module">
import './fa-icon-examples.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons/index.es.js'
import { configure } from '../src/wc-fontawesome.js'
library.add(fas)
const select = document.querySelector('#select-icon')
const checkbox = document.querySelector('#use-shadow')
const container = document.querySelector('#container')
container.innerHTML =
'<fa-icon-examples icon="spinner"></fa-icon-examples icon="spinner">'
let examples = container.children[0]
select.onchange = (e) => {
examples.icon = e.target.value
}
checkbox.onchange = (e) => {
const shadowDom = e.target.checked
configure({ shadowDom })
const tagName = shadowDom
? 'fa-icon-shadow-examples'
: 'fa-icon-examples'
container.innerHTML = `<${tagName} icon="${select.value}"></${tagName}>`
examples = container.children[0]
}
</script>
</body>
</html>