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
|
import { h, s } from 'lib/h'
export function get(key: string, attrs: object = {}): Element {
const elem = fromKey(key)
if (elem !== undefined) {
Object.entries(attrs).forEach(([key, value]) => {
elem.setAttribute(key, value)
})
return elem
} else {
return h('span', {})
}
}
// https://yqnn.github.io/svg-path-editor/
function fromKey(key: string): Element | undefined {
if (key == 'house') {
return s('svg',
{ viewBox: '0 0 10 10' },
s('g', { 'stroke': 'none' },
s('path', { d: 'M0 4V5H1.5V10H4V7C4.4 6.5 5.6 6.5 6 7V10H8.5V5H10V4L5 0Z' })
)
)
} else if (key == 'music') {
return s('svg',
{ viewBox: '0 0 10 10' },
s('g', { 'stroke': 'none' },
s('ellipse', { cx: '2', cy: '8.5', rx: '2', ry: '1.5' }),
s('ellipse', { cx: '8', cy: '7', rx: '2', ry: '1.5' }),
s('path', { d: 'M2.5 8.5 H4 V4.5 L8.5 3 V7 H10 V0 L2.5 2.5 Z' }),
)
)
} else if (key == 'shopping-cart') {
return s('svg',
{ viewBox: '0 0 10 10' },
s('circle', { cx: '3.3', cy: '8.5', r: '0.8' }),
s('circle', { cx: '7.3', cy: '8.5', r: '0.8' }),
s('path', { d: 'M.5.6C1.3.6 1.8.7 2.1 1L2.3 6H8.5', fill: 'transparent' }),
s('path', { d: 'M2.3 1.9H9.4L8.6 4H2.4' }),
)
} else if (key == 'medical') {
return s('svg',
{ viewBox: '0 0 10 10' },
s('path', { d: 'M5 1V9M1 5H9', style: 'stroke-width: 3' }),
)
} else if (key == 'envelope') {
return s('svg',
{ viewBox: '0 0 10 10' },
s('path', { d: 'M.5 2.5H9.5V7.5H.5ZM.5 3.4 3.5 5Q5 5.8 6.6 5L9.5 3.4', style: 'fill: transparent' }),
)
}
}
// Good to add:
// - loisir / cinéma / piscine
// - école
// - gare
// - bus
export function keys(): string[] {
return [ 'house',
'music',
'shopping-cart',
'medical',
'envelope',
]
}
|
