forked from blikblum/wc-fontawesome
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (61 loc) · 2.3 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>wc-fontawesome demo</title>
</head>
<body>
<label for="select-icon">Select Icon</label><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" /><label for="use-shadow"> Use shadow DOM</label>
<input type="checkbox" name="regular" id="use-regular" /><label for="use-regular"> Use regular</label>
<input type="checkbox" name="brands" id="show-brands" /><label for="show-brands"> Show brands</label>
<div id="container"></div>
<script type="module">
import './fa-icon-examples.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { configure } from '../src'
library.add(fab)
library.add(far)
library.add(fas)
const select = document.querySelector('#select-icon')
const checkbox = document.querySelector('#use-shadow')
const regular = document.querySelector('#use-regular')
const brands = document.querySelector('#show-brands')
const container = document.querySelector('#container')
container.innerHTML =
'<fa-icon-examples type="solid" icon="spinner"></fa-icon-examples>'
let examples = container.children[0]
select.onchange = (e) => {
examples.icon = e.target.value
}
regular.onchange = (e) => {
brands.checked = false
examples.type = e.target.checked ? 'regular' : 'solid'
}
brands.onchange = () => {
regular.checked = false
examples.type = 'brands'
examples.icon = 'github'
}
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>