From 377945fc62eab4ac7ff72c20db24784733c201f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Arnauts?= Date: Sun, 24 Nov 2019 17:47:22 +0100 Subject: [PATCH] Add instructions for Font Awesome Pro --- README.md | 24 ++++++-- fontawesome-pro.patch | 139 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 158 insertions(+), 5 deletions(-) create mode 100644 fontawesome-pro.patch diff --git a/README.md b/README.md index df587bf..471c3bc 100644 --- a/README.md +++ b/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? diff --git a/fontawesome-pro.patch b/fontawesome-pro.patch new file mode 100644 index 0000000..6fa39e0 --- /dev/null +++ b/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(/\/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(/\/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:)" + } + } + }