Refactored Material icon integration - bye bye webfonts

src/assets/javascripts/templates/clipboard/index.tsx

@@ -46,12 +46,17 @@ const css = {
  */
 export function renderClipboard(
   id: string
-): HTMLElement {
+) {
+  const path = require("material-design-icons-svg/paths/content-copy.json")
   return (
     <button
       class={css.container}
       title={translate("clipboard.copy")}
       data-clipboard-target={`#${id} code`}
-    >&#xE14D;</button>
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d={path}></path>
+      </svg>
+    </button>
   )
 }

src/assets/javascripts/templates/search/index.tsx

@@ -52,12 +52,24 @@ const css = {
  */
 export function renderSearchResult(
   { article, sections }: SearchResult
-): HTMLElement {
+) {
+
+  // create page with icon
+  const path = require("material-design-icons-svg/paths/file-search-outline.json")
+
   const children = [article, ...sections].map(document => {
     const { location, title, text } = document
     return (
       <a href={location} class={css.link} tabIndex={-1}>
         <article class={"parent" in document ? css.section : css.article}>
+          {!("parent" in document)
+            ? <div class="md-search-result__icon md-icon__button md-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <path d={path}></path>
+                </svg>
+              </div>
+            : null
+          }
           <h1 class={css.title}>{title}</h1>
           {text.length
             ? <p class={css.teaser}>{truncate(text, 320)}</p>

src/assets/javascripts/templates/source/index.tsx

@@ -48,7 +48,7 @@ const css = {
  */
 export function renderSource(
   facts: SourceFacts
-): HTMLElement {
+) {
   const children = facts.map(fact => (
     <li class={css.fact}>{fact}</li>
   ))

src/assets/javascripts/templates/table/index.tsx

@@ -47,7 +47,7 @@ const css = {
  */
 export function renderTable(
   table: HTMLTableElement
-): HTMLElement {
+) {
   return (
     <div class={css.wrapper}>
       <div class={css.table}>

src/assets/javascripts/utilities/jsx/index.ts

@@ -20,6 +20,8 @@
  * IN THE SOFTWARE.
  */
 
+// tslint:disable no-null-keyword
+
 import { JSX as JSXInternal } from "preact"
 import { keys } from "ramda"
 
@@ -28,7 +30,7 @@ import { keys } from "ramda"
  * ------------------------------------------------------------------------- */
 
 /**
- * HTML attributes
+ * HTML and SVG attributes
  */
 type Attributes =
   & JSXInternal.HTMLAttributes
@@ -40,6 +42,7 @@ type Attributes =
  */
 type Child =
   | HTMLElement
+  | SVGElement
   | Text
   | string
   | number
@@ -48,13 +51,69 @@ type Child =
  * Helper functions
  * ------------------------------------------------------------------------- */
 
+/**
+ * Create an element
+ *
+ * @param tag - HTML or SVG tag
+ *
+ * @return Element
+ */
+function createElement(tag: string): HTMLElement | SVGElement {
+  switch (tag) {
+
+    /* SVG elements */
+    case "svg":
+    case "path":
+      return document.createElementNS("http://www.w3.org/2000/svg", tag)
+
+    /* HTML elements */
+    default:
+      return document.createElement(tag)
+  }
+}
+
+/**
+ * Set an attribute
+ *
+ * @param el - Element
+ * @param name - Attribute name
+ * @param value - Attribute value
+ */
+function setAttribute(
+  el: HTMLElement | SVGElement, name: string, value: string) {
+  switch (name) {
+
+    /* Attributes to be ignored */
+    case "xmlns":
+      break
+
+    /* Attributes of SVG elements */
+    case "viewBox":
+    case "d":
+      if (typeof value !== "boolean")
+        el.setAttributeNS(null, name, value)
+      else if (value)
+        el.setAttributeNS(null, name, "")
+      break
+
+    /* Attributes of HTML elements */
+    default:
+      if (typeof value !== "boolean")
+        el.setAttribute(name, value)
+      else if (value)
+        el.setAttribute(name, "")
+  }
+}
+
 /**
  * Append a child node to an element
  *
  * @param el - Element
  * @param child - Child node(s)
  */
-function appendChild(el: HTMLElement, child: Child | Child[]): void {
+function appendChild(
+  el: HTMLElement | SVGElement, child: Child | Child[]
+): void {
 
   /* Handle primitive types (including raw HTML) */
   if (typeof child === "string" || typeof child === "number") {
@@ -78,7 +137,7 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
 /**
  * JSX factory
  *
- * @param tag - HTML tag
+ * @param tag - HTML or SVG tag
  * @param attributes - HTML attributes
  * @param children - Child elements
  *
@@ -86,16 +145,13 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
  */
 export function h(
   tag: string, attributes: Attributes | null, ...children: Child[]
-): HTMLElement {
-  const el = document.createElement(tag)
+): HTMLElement | SVGElement {
+  const el = createElement(tag)
 
   /* Set attributes, if any */
   if (attributes)
     for (const attr of keys(attributes))
-      if (typeof attributes[attr] !== "boolean")
-        el.setAttribute(attr, attributes[attr])
-      else if (attributes[attr])
-        el.setAttribute(attr, "")
+      setAttribute(el, attr, attributes[attr])
 
   /* Append child nodes */
   for (const child of children)
@@ -111,7 +167,7 @@ export function h(
 
 export declare namespace h {
   namespace JSX {
-    type Element = HTMLElement
+    type Element = HTMLElement | SVGElement
     type IntrinsicElements = JSXInternal.IntrinsicElements
   }
 }