1 files changed, 66 insertions, 0 deletions
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
new file mode 100644
index 0000000..8db4e17
--- /dev/null
+++ b/src/lib/icons.ts
@@ -0,0 +1,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',
+  ]
+}