From 5f679f6a20423d06c7c63ee907515be25e5e971d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Fri, 14 May 2021 22:07:42 +0000
Subject: [PATCH] Add fullcolor icons

---
 README.md                                   | 40 ++++++++++-----------
 custom_components/fontawesome/main.js       | 33 ++++++++++++++++-
 custom_components/fontawesome/manifest.json |  2 +-
 js/main.js                                  | 31 +++++++++++++---
 4 files changed, 79 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index 4a355e5..1b335c7 100644
--- a/README.md
+++ b/README.md
@@ -38,23 +38,32 @@ So,
 
 The icons are useable anywhere in Home Assistant - not only in lovelace.
 
-# FAQ
+## Using with custom icons
 
-### Can I use this with my Pro icon set?
+If you have other svg icons you want to use (including but not limited to the Fontawesome Pro set), you can do so by placing the `.svg` files in `<Home Assistant Config>/custom_icons/`. You will need to create this directory yourself.
 
-Yes.
-You need the `.svg` files from the Pro icon set.
+You can then use those icons with the `fapro:` prefix. E.g. `fapro:lamp` will get the icon in the file `<Home Assistant Config>/custom_icons/lamp.svg`.
 
-Place the icon files in `<Home Assistant config>/custom_icons/`.
-You will need to create this directory yourself, and the filenames must end with `.svg`
+### Duotone icons
 
-Then access your icons with the `fapro:` prefix, e.g. `fapro:lightbulb-on`.
+If you have duotone icons, they should contain path elements with the `id`s `fa-primary` and `fa-secondary` or `primary` and `secondary`.
+
+You can adjust how the icons look a bit by using the suffixes `#invert`, `#color` or `#volor-invert`
+![image](https://user-images.githubusercontent.com/1299821/118324014-bf0fa380-b501-11eb-890b-126951d67cef.png)
 
-### Can I add non-fontawesome icons using this?
+### More advanded icons
 
-Yes, provided you have svg files of the icons which consist one or more `<path>` elements and no transforms or other weird stuff.
+You can also use more advanced icons, e.g. with multiple colors if you add the suffix `#fullcolor`.
+![ISmIwO2TJN](https://user-images.githubusercontent.com/1299821/118335863-d4d89500-b510-11eb-8d01-2ccf5bbbbba5.gif)
 
-Just do the same as for the Pro icon set above. Put svg files in the same directory, and use the same prefix.
+You can find some nice ones over at [flaticons.com](https://www.flaticon.com/).
+
+> Note: SVG files can also contain embedded CSS inside `<style>` tags... <br>
+> This gives you some [interesting](https://user-images.githubusercontent.com/1299821/118336065-41539400-b511-11eb-810b-e99f6c089eed.gif)... [posibilities](https://user-images.githubusercontent.com/1299821/118336069-4284c100-b511-11eb-8b62-4d2a860a1b3c.gif)...
+>
+> Hass-fontawesome will not allow any embedded javascript, though.
+
+# FAQ
 
 ### Can I set this up in configure.yaml instead?
 
@@ -66,17 +75,6 @@ fontawesome:
 
 That's it.
 
-### Does this work with duotone icons?
-
-Yes. Finally!
-
-> Note, though, that the free fontawesome icon sets do not contain any duotone icons, and thus are not bundled with this integration.
-
-If the `<path>` elements of your custom svg file have the classes `fa-primary` and `fa-secondary` or `primary` and `secondary`, they will be colored differently.
-
-If you don't like how it looks, try adding `#invert`, `#color` or `#color-invert` to the icon name, e.g: `fapro:my-custom-icon#invert`
-![image](https://user-images.githubusercontent.com/1299821/118324014-bf0fa380-b501-11eb-890b-126951d67cef.png)
-
 ---
 
 <a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
diff --git a/custom_components/fontawesome/main.js b/custom_components/fontawesome/main.js
index fccc976..325e4b6 100644
--- a/custom_components/fontawesome/main.js
+++ b/custom_components/fontawesome/main.js
@@ -1 +1,32 @@
-(()=>{const t={},o={"fa-primary":"primary","fa-secondary":"secondary",primary:"primary",secondary:"secondary"},e=(e,s)=>new Promise((async(n,a)=>{const r=`${e}:${s}`;t[r]&&n(t[r]),t[r]=(async(t,e)=>{const[s,n]=e.split("#"),a=await fetch(`/fontawesome/icons/${t}/${s}.svg`),r=await a.text(),c=(new DOMParser).parseFromString(r,"text/html");if(!c||!c.querySelector("svg"))return{};const i=c.querySelector("svg").getAttribute("viewBox"),l=c.querySelectorAll("path"),d={};let h="";for(const t of l){h+=t.getAttribute("d");const e=t.classList[0];o[e]&&(d[o[e]]=t.getAttribute("d"))}return{viewBox:i,path:h,paths:d,format:n}})(e,s),n(t[r])}));"customIconsets"in window||(window.customIconsets={}),window.customIconsets.fab=t=>e("brands",t),window.customIconsets.far=t=>e("regular",t),window.customIconsets.fas=t=>e("solid",t),window.customIconsets.fapro=t=>e("pro",t),window.customIconsets.facustom=t=>e("pro",t),customElements.whenDefined("ha-icon").then((()=>{customElements.get("ha-icon").prototype._setCustomPath=async function(t){const o=await t;this._path=o.path,this._viewBox=o.viewBox,await this.UpdateComplete;const e=this.shadowRoot.querySelector("ha-svg-icon");e&&e.setPaths&&(e.setPaths(o.paths),o.format&&e.classList.add(...o.format.split("-")))}})),customElements.whenDefined("ha-svg-icon").then((()=>{customElements.get("ha-svg-icon").prototype.setPaths=async function(t){if(await this.updateComplete,null==t||0===Object.keys(t).length)return;const o=this.shadowRoot.querySelector("style")||document.createElement("style");o.innerHTML="\n      .secondary {\n        opacity: 0.4;\n      }\n      :host(.invert) .secondary {\n        opacity: 1;\n      }\n      :host(.invert) .primary {\n        opacity: 0.4;\n      }\n      :host(.color) .primary {\n        opacity: 1;\n      }\n      :host(.color) .secondary {\n        opacity: 1;\n      }\n      :host(.color:not(.invert)) .secondary {\n        fill: var(--icon-secondary-color, var(--disabled-text-color));\n      }\n      :host(.color.invert) .primary {\n        fill: var(--icon-secondary-color, var(--disabled-text-color));\n      }\n      ",this.shadowRoot.appendChild(o);const e=this.shadowRoot.querySelector("g");e.firstElementChild&&(e.firstElementChild.style.display="none");for(const o in t){const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",t[o]),s.classList.add(o),e.appendChild(s)}}}))})();
\ No newline at end of file
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./js/main.js":
+/*!********************!*\
+  !*** ./js/main.js ***!
+  \********************/
+/***/ (() => {
+
+eval("const DOMAIN = \"fontawesome\";\n\nconst ICON_STORE = {};\n\nconst PREFIXES = {\n  fab: \"brands\",\n  far: \"regular\",\n  fas: \"solid\",\n  fapro: \"pro\",\n  facustom: \"pro\",\n};\n\nconst PATH_CLASSES = {\n  \"fa-primary\": \"primary\",\n  \"fa-secondary\": \"secondary\",\n  primary: \"primary\",\n  secondary: \"secondary\",\n};\n\nconst preProcessIcon = async (iconSet, iconName) => {\n  const [icon, format] = iconName.split(\"#\");\n  const data = await fetch(`/${DOMAIN}/icons/${iconSet}/${icon}.svg`);\n  const text = await data.text();\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(text, \"text/html\");\n\n  if (!doc || !doc.querySelector(\"svg\")) return {};\n\n  const viewBox = doc.querySelector(\"svg\").getAttribute(\"viewBox\");\n  const _paths = doc.querySelectorAll(\"path\");\n  const paths = {};\n  let path = \"\";\n  for (const pth of _paths) {\n    path = path + pth.getAttribute(\"d\");\n    const cls = pth.classList[0];\n    if (PATH_CLASSES[cls]) {\n      paths[PATH_CLASSES[cls]] = pth.getAttribute(\"d\");\n    }\n  }\n\n  // Don't allow full code to be used if the svg may contain javascript\n  let fullCode = null;\n  const svgEl = doc.querySelector(\"svg\");\n  const hasOn = Array.from(svgEl.attributes).some((a) =>\n    a.name.startsWith(\"on\")\n  );\n  if (!hasOn) {\n    if (!svgEl.getElementsByTagName(\"script\").length) {\n      fullCode = svgEl;\n    }\n  }\n\n  return { viewBox, path, paths, format, fullCode };\n};\n\nconst getIcon = (iconSet, iconName) => {\n  return new Promise(async (resolve, reject) => {\n    const icon = `${iconSet}:${iconName}`;\n    if (ICON_STORE[icon]) resolve(ICON_STORE[icon]);\n\n    ICON_STORE[icon] = preProcessIcon(iconSet, iconName);\n\n    resolve(ICON_STORE[icon]);\n  });\n};\n\nwindow.getIcon = getIcon;\n\nif (!(\"customIconsets\" in window)) {\n  window.customIconsets = {};\n}\n\nwindow.customIconsets[\"fab\"] = (iconName) => getIcon(\"brands\", iconName);\nwindow.customIconsets[\"far\"] = (iconName) => getIcon(\"regular\", iconName);\nwindow.customIconsets[\"fas\"] = (iconName) => getIcon(\"solid\", iconName);\nwindow.customIconsets[\"fapro\"] = (iconName) => getIcon(\"pro\", iconName);\nwindow.customIconsets[\"facustom\"] = (iconName) => getIcon(\"pro\", iconName);\n\n// Duotone patches\ncustomElements.whenDefined(\"ha-icon\").then(() => {\n  const HaIcon = customElements.get(\"ha-icon\");\n  HaIcon.prototype._setCustomPath = async function (promise) {\n    const icon = await promise;\n    this._path = icon.path;\n    this._viewBox = icon.viewBox;\n\n    await this.UpdateComplete;\n\n    const el = this.shadowRoot.querySelector(\"ha-svg-icon\");\n    if (!el || !el.setPaths) {\n      return;\n    }\n    if (icon.fullCode && icon.format === \"fullcolor\") {\n      await el.updateComplete;\n      const root = el.shadowRoot.querySelector(\"g\");\n      if (root.firstElementChild) {\n        root.firstElementChild.style.display = \"none\";\n      }\n      root.appendChild(icon.fullCode.cloneNode(true));\n    } else {\n      el.setPaths(icon.paths);\n      if (icon.format) {\n        el.classList.add(...icon.format.split(\"-\"));\n      }\n    }\n  };\n});\n\ncustomElements.whenDefined(\"ha-svg-icon\").then(() => {\n  const HaSvgIcon = customElements.get(\"ha-svg-icon\");\n\n  HaSvgIcon.prototype.setPaths = async function (paths) {\n    await this.updateComplete;\n    if (paths == undefined || Object.keys(paths).length === 0) return;\n    const styleEl =\n      this.shadowRoot.querySelector(\"style\") || document.createElement(\"style\");\n    styleEl.innerHTML = `\n      .secondary {\n        opacity: 0.4;\n      }\n      :host(.invert) .secondary {\n        opacity: 1;\n      }\n      :host(.invert) .primary {\n        opacity: 0.4;\n      }\n      :host(.color) .primary {\n        opacity: 1;\n      }\n      :host(.color) .secondary {\n        opacity: 1;\n      }\n      :host(.color:not(.invert)) .secondary {\n        fill: var(--icon-secondary-color, var(--disabled-text-color));\n      }\n      :host(.color.invert) .primary {\n        fill: var(--icon-secondary-color, var(--disabled-text-color));\n      }\n      `;\n    this.shadowRoot.appendChild(styleEl);\n    const root = this.shadowRoot.querySelector(\"g\");\n    if (root.firstElementChild) {\n      root.firstElementChild.style.display = \"none\";\n    }\n    for (const k in paths) {\n      const el = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n      el.setAttribute(\"d\", paths[k]);\n      el.classList.add(k);\n      root.appendChild(el);\n    }\n  };\n});\n\n\n//# sourceURL=webpack://fontawesome/./js/main.js?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__["./js/main.js"]();
+/******/ 	
+/******/ })()
+;
\ No newline at end of file
diff --git a/custom_components/fontawesome/manifest.json b/custom_components/fontawesome/manifest.json
index b4002fc..1e1a49e 100644
--- a/custom_components/fontawesome/manifest.json
+++ b/custom_components/fontawesome/manifest.json
@@ -6,6 +6,6 @@
     "codeowners": [],
     "requirements": [],
     "config_flow": true,
-    "version": "2.0.1",
+    "version": "2.1.0",
     "iot_class": "local_polling"
 }
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 48b43ec..75c805c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -38,7 +38,19 @@ const preProcessIcon = async (iconSet, iconName) => {
     }
   }
 
-  return { viewBox, path, paths, format };
+  // Don't allow full code to be used if the svg may contain javascript
+  let fullCode = null;
+  const svgEl = doc.querySelector("svg");
+  const hasOn = Array.from(svgEl.attributes).some((a) =>
+    a.name.startsWith("on")
+  );
+  if (!hasOn) {
+    if (!svgEl.getElementsByTagName("script").length) {
+      fullCode = svgEl;
+    }
+  }
+
+  return { viewBox, path, paths, format, fullCode };
 };
 
 const getIcon = (iconSet, iconName) => {
@@ -52,6 +64,8 @@ const getIcon = (iconSet, iconName) => {
   });
 };
 
+window.getIcon = getIcon;
+
 if (!("customIconsets" in window)) {
   window.customIconsets = {};
 }
@@ -76,9 +90,18 @@ customElements.whenDefined("ha-icon").then(() => {
     if (!el || !el.setPaths) {
       return;
     }
-    el.setPaths(icon.paths);
-    if (icon.format) {
-      el.classList.add(...icon.format.split("-"));
+    if (icon.fullCode && icon.format === "fullcolor") {
+      await el.updateComplete;
+      const root = el.shadowRoot.querySelector("g");
+      if (root.firstElementChild) {
+        root.firstElementChild.style.display = "none";
+      }
+      root.appendChild(icon.fullCode.cloneNode(true));
+    } else {
+      el.setPaths(icon.paths);
+      if (icon.format) {
+        el.classList.add(...icon.format.split("-"));
+      }
     }
   };
 });