Add instructions for Font Awesome Pro

README.md

@@ -47,15 +47,29 @@ The icons are useable anywhere in Home Assistant - not only in lovelace.
 
 ### Can I use this with my Pro icon set?
 
-You probably can, but you'll need to recompile things yourself.
+Yes you can, but you'll need to build things yourself.
 
-I do not own the Pro Icon set, so I don't even know what structure it has.
+1. Get your personal token first.
 
-You may be able to find some helpful information [here](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers).
+Go to https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers and find your token. The command will look like this:
 
-I also know that people have had success with Pro Icons and the [previous version of this integration](https://github.com/thomasloven/hass-fontawesome/tree/4ed9d97bbb1621d4ff68a0053add29294529f5b0).
+```
+$ npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
+  npm config set "//npm.fontawesome.com/:_authToken" XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+```
 
-PRs with the process are very welcome.
+2. Clone this repository and modify it to build with the `fontawesome-pro` icons. This will also build the `duotone` and `light` series.
+
+```
+$ git clone https://github.com/thomasloven/hass-fontawesome
+$ cd hass-fontawesome/
+$ git apply < fontawesome-pro.patch
+$ npm install && npm run-script build
+```
+
+> Note that the `duotone` serie doesn't seem to work correctly yet in Home Assistant, since all colors are mapped to one color.
+
+3. Copy the output of `custom_components/fontawesome/` to you Home Assistant installation.
 
 ### Can I set this up in configure.yaml instead?
 

fontawesome-pro.patch

@@ -0,0 +1,139 @@
+diff --git a/custom_components/fontawesome/__init__.py b/custom_components/fontawesome/__init__.py
+index 7534066..e72e552 100644
+--- a/custom_components/fontawesome/__init__.py
++++ b/custom_components/fontawesome/__init__.py
+@@ -11,6 +11,8 @@ ICON_FILES = {
+     'regular': 'far.js',
+     'solid': 'fas.js',
+     'brands': 'fab.js',
++    'light': 'fal.js',
++    'duotone': 'fad.js',
+ }
+ 
+ async def async_setup(hass, config):
+diff --git a/custom_components/fontawesome/config_flow.py b/custom_components/fontawesome/config_flow.py
+index e2bf5ac..2007411 100644
+--- a/custom_components/fontawesome/config_flow.py
++++ b/custom_components/fontawesome/config_flow.py
+@@ -42,6 +42,14 @@ class FontawesomeEditFlow(config_entries.OptionsFlow):
+                         "brands",
+                         default=self.config_entry.options.get("brands", False),
+                     ): bool,
++                    vol.Optional(
++                        "light",
++                        default=self.config_entry.options.get("light", False),
++                    ): bool,
++                    vol.Optional(
++                        "duotone",
++                        default=self.config_entry.options.get("duotone", False),
++                    ): bool,
+                 }
+             )
+         )
+\ No newline at end of file
+diff --git a/js/fab.js b/js/fab.js
+index 2aae5d5..7131118 100644
+--- a/js/fab.js
++++ b/js/fab.js
+@@ -1,4 +1,4 @@
+-import txt from "@fortawesome/fontawesome-free/sprites/brands.svg"
++import txt from "@fortawesome/fontawesome-pro/sprites/brands.svg"
+ const iconset = document.createElement("ha-iconset-svg");
+ iconset.name="fab";
+ iconset.size="1024";
+diff --git a/js/fad.js b/js/fad.js
+new file mode 100644
+index 0000000..77fab15
+--- /dev/null
++++ b/js/fad.js
+@@ -0,0 +1,6 @@
++import txt from "@fortawesome/fontawesome-pro/sprites/duotone.svg"
++const iconset = document.createElement("ha-iconset-svg");
++iconset.name="fad";
++iconset.size="1024";
++iconset.innerHTML = txt.replace(/\<symbol/g, '<g').replace(/\<\/symbol\>/g, '</g>');
++document.body.appendChild(iconset);
+diff --git a/js/fal.js b/js/fal.js
+new file mode 100644
+index 0000000..ce948d0
+--- /dev/null
++++ b/js/fal.js
+@@ -0,0 +1,6 @@
++import txt from "@fortawesome/fontawesome-pro/sprites/light.svg"
++const iconset = document.createElement("ha-iconset-svg");
++iconset.name="fal";
++iconset.size="1024";
++iconset.innerHTML = txt.replace(/\<symbol/g, '<g').replace(/\<\/symbol\>/g, '</g>');
++document.body.appendChild(iconset);
+diff --git a/js/far.js b/js/far.js
+index 78445a7..a1c8acb 100644
+--- a/js/far.js
++++ b/js/far.js
+@@ -1,4 +1,4 @@
+-import txt from "@fortawesome/fontawesome-free/sprites/regular.svg"
++import txt from "@fortawesome/fontawesome-pro/sprites/regular.svg"
+ const iconset = document.createElement("ha-iconset-svg");
+ iconset.name="far";
+ iconset.size="1024";
+diff --git a/js/fas.js b/js/fas.js
+index 97bd01c..3e4a307 100644
+--- a/js/fas.js
++++ b/js/fas.js
+@@ -1,4 +1,4 @@
+-import txt from "@fortawesome/fontawesome-free/sprites/solid.svg"
++import txt from "@fortawesome/fontawesome-pro/sprites/solid.svg"
+ const iconset = document.createElement("ha-iconset-svg");
+ iconset.name="fas";
+ iconset.size="1024";
+diff --git a/package.json b/package.json
+index 4d501f5..76f1335 100644
+--- a/package.json
++++ b/package.json
+@@ -17,6 +17,6 @@
+     "webpack-cli": "^3.3.10"
+   },
+   "dependencies": {
+-    "@fortawesome/fontawesome-free": "^5.11.2"
++    "@fortawesome/fontawesome-pro": "^5.11.2"
+   }
+ }
+diff --git a/webpack.config.js b/webpack.config.js
+index 1d7eb2e..ddcbff7 100644
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -37,4 +37,20 @@ module.exports = [
+     },
+     ...common,
+   },
++  {
++    entry: './js/fal.js',
++    output: {
++      filename: 'custom_components/fontawesome/data/fal.js',
++      path: path.resolve(__dirname)
++    },
++    ...common,
++  },
++  {
++    entry: './js/fad.js',
++    output: {
++      filename: 'custom_components/fontawesome/data/fad.js',
++      path: path.resolve(__dirname)
++    },
++    ...common,
++  },
+ ];
+diff --git a/custom_components/fontawesome/.translations/en.json b/custom_components/fontawesome/.translations/en.json
+index 84b9633..d1d0e16 100644
+--- a/custom_components/fontawesome/.translations/en.json
++++ b/custom_components/fontawesome/.translations/en.json
+@@ -13,7 +13,9 @@
+         "data": {
+           "regular": "Include Regular icons (far:)",
+           "solid": "Include Solid icons (fas:)",
+-          "brands": "Include Brand icons (fab:)"
++          "brands": "Include Brand icons (fab:)",
++          "light": "Include Light icons (fal:)",
++          "duotone": "Include Duotone icons (fad:)"
+         }
+       }
+     }