Better icon processing

README.md

@@ -42,13 +42,11 @@ The icons are useable anywhere in Home Assistant - not only in lovelace.
 Yes.
 You need the `.svg` files from the Pro icon set.
 
-Place the icon files in `<Home Assistant config>/custom_components/fontawesome/data/pro/` and access them with the `fapro:` prefix, e.g. `fapro:lightbulb-on`.
-
-This does not work with the duotone icon set.
+Place the icon files in `<Home Assistant config>/custom_components/fontawesome/data/pro/` (the filenames must end with `.svg`) and access them with the `fapro:` prefix, e.g. `fapro:lightbulb-on`.
 
 ### Can I add non-fontawesome icons using this?
 
-Yes, provided you have svg files of the icons which consist of a single `<path>` element.
+Yes, provided you have svg files of the icons which consist one or more `<path>` elements and no transforms or other weird stuff.
 
 Just do the same as for the Pro icon set above. Put svg files in the same directory, and use the same prefix.
 

custom_components/fontawesome/__init__.py

@@ -1,6 +1,8 @@
 import os
-import re
 import logging
+
+from bs4 import BeautifulSoup
+
 from homeassistant.components.frontend import add_extra_js_url
 from homeassistant.components.http import HomeAssistantView
 from homeassistant.core import callback
@@ -17,6 +19,13 @@
 ICONS_URL = f'/{DOMAIN}/icons'
 ICONS_PATH = f'custom_components/{DOMAIN}/data'
 
+FONTAWESOME_CLASSES = {
+    "fa-primary": "primary",
+    "fa-secondary": "secondary",
+    "primary": "primary",
+    "secondary": "secondary",
+}
+
 
 async def async_setup(hass, config):
     hass.http.register_static_path(
@@ -61,10 +70,19 @@ async def get(self, request, filename):
         try:
             with open(path, mode="r", encoding="utf-8", errors="ignore") as fp:
                 data = fp.read()
-                svgPath = re.search('d="([^"]+)"', data)
-                viewBox = re.search('viewBox="([^"]+)"', data)
-                response["viewBox"] = viewBox.group(1) if viewBox else None
-                response["path"] = svgPath.group(1) if svgPath else None
+
+                soup = BeautifulSoup(data, 'html.parser')
+                paths = soup.find_all("path")
+                svgPath = " ".join([p.get("d", "") for p in paths])
+                viewBox = soup.svg.get("viewbox", None) if soup.svg else None
+
+                response["viewBox"] = viewBox
+                response["path"] = svgPath
+                response["paths"] = {}
+                for p in paths:
+                    key = FONTAWESOME_CLASSES.get(p.get("class", [])[0], None)
+                    if key:
+                        response["paths"][key] = p.get("d", "")
         except Exception:
             pass
 

custom_components/fontawesome/manifest.json

@@ -3,6 +3,7 @@
     "name": "Fontawesome icons",
     "documentation": "https://github.com/thomasloven/hass-fontawesome",
     "dependencies": ["frontend"],
+    "after_dependencies": ["scrape"],
     "codeowners": [],
     "requirements": [],
     "config_flow": true,

js/main.js

@@ -32,3 +32,41 @@ window.customIconsets["fab"] = (iconName) => getIcon("brands", iconName);
 window.customIconsets["far"] = (iconName) => getIcon("regular", iconName);
 window.customIconsets["fas"] = (iconName) => getIcon("solid", iconName);
 window.customIconsets["fapro"] = (iconName) => getIcon("pro", iconName);
+
+// Duotone patches
+customElements.whenDefined("ha-icon").then(() => {
+  const HaIcon = customElements.get("ha-icon");
+  HaIcon.prototype._setCustomPath = async function (promise) {
+    const icon = await promise;
+    this._path = icon.path;
+    this._viewBox = icon.viewBox;
+
+    await this.UpdateComplete;
+
+    const el = this.shadowRoot.querySelector("ha-svg-icon");
+    if (!el || !el.setPaths) {
+      return;
+    }
+    el.setPaths(icon.paths);
+  };
+});
+
+customElements.whenDefined("ha-svg-icon").then(() => {
+  const HaSvgIcon = customElements.get("ha-svg-icon");
+
+  HaSvgIcon.prototype.setPaths = async function (paths) {
+    await this.updateComplete;
+    const styleEl =
+      this.shadowRoot.querySelector("style") || document.createElement("style");
+    styleEl.innerHTML =
+      "svg path.secondary { fill: var(--paper-item-icon-color); }";
+    this.shadowRoot.appendChild(styleEl);
+    const root = this.shadowRoot.querySelector("g");
+    for (const k in paths) {
+      const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      el.setAttribute("d", paths[k]);
+      el.classList.add(k);
+      root.appendChild(el);
+    }
+  };
+});