Add fullcolor icons

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>

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"
 }

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("-"));
+      }
     }
   };
 });