feat: Fully move to styled-icons

BREAKING CHANGE: react-icons are no longer supported and will need to be moved over to the new icon format.
plugsy · Jul 28, 2021 · a6a4c0f · a6a4c0f
1 parent 14a236c
commit a6a4c0f
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Plugsy 
+# Plugsy
 
 ![Plugsy Logo](docs/responsive-color-logo.svg)
 
@@ -37,7 +37,7 @@ And this has since grown into something that can give an up to date status on va
 - Raw
   - Have some links that don't have any status attached?
   - Use the included file configuration and show any ol' link that you'd like.
-- *Agent Mode (New in V3)*: Use multiple plugsy containers to gather local states and push to a different instance to aggregate the statuses
+- _Agent Mode (New in V3)_: Use multiple plugsy containers to gather local states and push to a different instance to aggregate the statuses
   - Particularly useful if you have docker instances hosted on different machines or behind firewalls etc
   - See [Agent Mode](/docs/agent-mode.md)
 
@@ -50,7 +50,6 @@ docker-compose.yml:
 ```yml
 version: "2.1"
 services:
-
   plugsy:
     image: plugsy/core
     container_name: plugsy
@@ -60,13 +59,12 @@ services:
       - 3000:3000
     restart: unless-stopped
 
-
   vikunjadb:
     image: mariadb:10
     labels:
-      dockerDash.name: 'DB'
-      dockerDash.parents: 'Todo'
-      dockerDash.icon: 'fi/FiDatabase'
+      dockerDash.name: "DB"
+      dockerDash.parents: "Todo"
+      dockerDash.icon: "fi/FiDatabase"
     container_name: vikunjadb
     command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
     restart: unless-stopped
@@ -76,18 +74,18 @@ services:
     image: vikunja/api
     restart: unless-stopped
     labels:
-      dockerDash.name: 'API'
-      dockerDash.parents: 'Todo'
-      dockerDash.icon: 'fi/FiServer'
+      dockerDash.name: "API"
+      dockerDash.parents: "Todo"
+      dockerDash.icon: "fi/FiServer"
 
   vikunjafrontend:
     image: vikunja/frontend
     container_name: vikunjafrontend
     restart: unless-stopped
     labels:
-      dockerDash.name: 'Todo'
-      dockerDash.category: 'Home'
-      dockerDash.icon: 'fi/FiPenTool'
+      dockerDash.name: "Todo"
+      dockerDash.category: "Home"
+      dockerDash.icon: "fi/FiPenTool"
       dockerDash.link: https://my.vikunja.com
 ```
 
@@ -118,14 +116,14 @@ config.json
             "category": "Other",
             "name": "Beer Tab",
             "state": "GREEN",
-            "icon": "fi/FiBeer"
+            "icon": "@styled-icons/boxicons-regular/Beer"
           },
           {
             "name": "Beer Tab Dependency",
             "state": "GREEN",
-            "icon": "fi/FiBeer",
+            "icon": "@styled-icons/ionicons-solid/Beer",
             "parents": ["Beer Tab"]
-          },
+          }
         ]
       }
     }
@@ -134,10 +132,10 @@ config.json
 ```
 
 docker-compose.yml:
+
 ```yml
 version: "2.1"
 services:
-
   plugsy:
     image: plugsy/core
     container_name: plugsy
@@ -151,22 +149,41 @@ services:
 
 #### Icons
 
-You can use any icons available in [react-icons](https://react-icons.github.io/react-icons/)
-I recommend keeping the amount of icon packs used to a minimum to ensure a speedy delivery of
-your dashboard
+**NEW IN V6**
+
+We've moved to styled-icons (In particular the svg-icons packages)
+
+You can use any icons available in [styled-icons](https://styled-icons.js.org/).
+Super simple, go to the page above, click the icon you would like to use, and use it in your config or docker labels.
+
+Example using docker labels:
+`dockerDash.icon: '@styled-icons/simple-icons/Plex'` is to load the `Plex` icon in the [simple-icons](https://styled-icons.js.org/?s=plex) pack
+`dockerDash.icon: '@styled-icons/simple-icons/Homeassistant'` is to load the `Homeassistant` icon in the [simple-icons pack](https://styled-icons.js.org/?s=home%20assistant)
 
-Example:
-`dockerDash.icon: 'fi/FiPenTool'` is to load the `FiPenTool` icon in the [feather pack](https://react-icons.github.io/react-icons/icons?name=fi)
-`dockerDash.icon: 'md/MdAlarm'` is to load the `MdAlarm` icon in the [Material Design pack](https://react-icons.github.io/react-icons/icons?name=md)
+Example using config.json:
 
-You can get the name of the pack looking at the url for the individual pack.
-`https://react-icons.github.io/react-icons/icons?name=fi`
+```jsonc{
+"connectors": [
+    {
+      "type": "DOCKER",
+      "config": {
+        "containerMap": {
+          "plugsy-container-name": {
+            "category": "Home",
+            "icon": "@styled-icons/boxicons-regular/Crown",
+            "name": "Plugsy"
+          }
+        }
+      }
+    }
+  ]
+}
+```
 
 #### Children
 
 In order to show dependent containers, you need only ensure that the item you wish to show has a parents label pointing at the same name as another item.
 
-
 Example using the [raw connector](docs/connectors/raw.md):
 
 ```jsonc
@@ -186,14 +203,14 @@ Example using the [raw connector](docs/connectors/raw.md):
             "category": "Other",
             "name": "Beer Tab",
             "state": "GREEN",
-            "icon": "fi/FiBeer"
+            "icon": "@styled-icons/boxicons-regular/Beer"
           },
           {
             "name": "Beer Tab Dependency",
             "state": "GREEN",
-            "icon": "fi/FiBeer",
+            "icon": "@styled-icons/ionicons-solid/Beer",
             "parents": ["Beer Tab"]
-          },
+          }
         ]
       }
     }
@@ -204,27 +221,26 @@ Example using the [raw connector](docs/connectors/raw.md):
 An example of the same logic being applied using the [docker connector](docs/connectors/docker.md) docker-compose.yml can be shown below:
 
 ```yml
-  vikunjaapi:
-    container_name: vikunjaapi
-    image: vikunja/api
-    restart: unless-stopped
-    labels:
-      dockerDash.name: 'API'
-      dockerDash.parents: 'Todo'
-      dockerDash.icon: 'fi/FiServer'
-
-  vikunjafrontend:
-    image: vikunja/frontend
-    container_name: vikunjafrontend
-    restart: unless-stopped
-    labels:
-      dockerDash.name: 'Todo'
-      dockerDash.category: 'Home'
-      dockerDash.icon: 'fi/FiPenTool'
-      dockerDash.link: https://my.vikunja.com
+vikunjaapi:
+  container_name: vikunjaapi
+  image: vikunja/api
+  restart: unless-stopped
+  labels:
+    dockerDash.name: "API"
+    dockerDash.parents: "Todo"
+    dockerDash.icon: "fi/FiServer"
+
+vikunjafrontend:
+  image: vikunja/frontend
+  container_name: vikunjafrontend
+  restart: unless-stopped
+  labels:
+    dockerDash.name: "Todo"
+    dockerDash.category: "Home"
+    dockerDash.icon: "fi/FiPenTool"
+    dockerDash.link: https://my.vikunja.com
 ```
 
-
 ## Development
 
 Simple enough:
@@ -244,10 +260,10 @@ Based off of [AsyncAPIs blog](https://www.asyncapi.com/blog/automated-releases)
 
 # FAQ
 
-#### I can see the status of the connector, but I can't see my containers? 
+#### I can see the status of the connector, but I can't see my containers?
 
-Ensure that a both a category and a name are defined, 
-if you're using the default docker configuration and labels, 
+Ensure that a both a category and a name are defined,
+if you're using the default docker configuration and labels,
 that will require both the `dockerDash.category` and `dockerDash.name` labels on your container.
 
 **Category is required**, you can only omit category when you want the container to appear as a child of another item on the dashboard.
diff --git a/docs/connectors.md b/docs/connectors.md
@@ -22,7 +22,7 @@ Can use a list of website urls (And other request formats) for Plugsy to ping an
 
 # A full example
 
-```
+```jsonc
 {
   "$schema": "https://github.com/plugsy/core/releases/download/v5.0.1/core-config-schema.json",
   "connectors": [
@@ -51,7 +51,7 @@ Can use a list of website urls (And other request formats) for Plugsy to ping an
           {
             "name": "Home Assistant",
             "category": "Home",
-            "link": https://my.home-assistant.io
+            "link": "https://my.home-assistant.io"
           }
         ]
       }

diff --git a/docs/connectors/docker.md b/docs/connectors/docker.md
@@ -104,17 +104,17 @@ services:
           "vikunjafrontend": {
             "name": "Vikunja",
             "category": "Home",
-            "icon": "fi/FiPenTool",
+            "icon": "@styled-icons/bootstrap/Pencil",
             "link": "https://my.vikunja.com"
           },
           "vikunjaapi": {
             "name": "API",
-            "icon": "fi/FiServer",
+            "icon": "@styled-icons/boxicons-regular/Server",
             "parents": ["Vikunja"]
           },
           "vikunjadb": {
             "name": "DB",
-            "icon": "fi/FiDatabase",
+            "icon": "@styled-icons/fa-solid/Database",
             "parents": ["Vikunja"]
           }
         }

diff --git a/docs/connectors/raw.md b/docs/connectors/raw.md
@@ -37,7 +37,7 @@ Provides items in the dashboard directly from the config itself
           {
             "name": "Home Assisant",
             "category": "My Category", // Optional, defaults to null
-            "icon": "fi/FiBeer", // Optional, defaults to null
+            "icon": "@styled-icons/simple-icons/Homeassistant", // Optional, defaults to null
             "link": "https://my.home-assistant.io/", // Optional, defaults to null
             "state": "GREY", // Optional, defaults to null. Valid options: "RED" | "GREEN" | "YELLOW" | "GREY"
             "status": "", //Optional, defaults to null. Status text will appear under the item in the dashboard

diff --git a/packages/core/config.json b/packages/core/config.json
@@ -32,7 +32,7 @@
             "display": {
               "name": "Home Assistant",
               "category": "Home",
-              "icon": "simple-icons/plex",
+              "icon": "@styled-icons/simple-icons/Plex",
               "link": "https://my.homeassistant.com"
             }
           },
@@ -41,7 +41,7 @@
             "display": {
               "name": "Unifi",
               "category": "Home",
-              "icon": "boxicons-regular/network-chart",
+              "icon": "@styled-icons/boxicons-regular/NetworkChart",
               "link": "https://my.unifi.com"
             }
           },
@@ -50,7 +50,7 @@
             "display": {
               "name": "Unraid",
               "category": "Home",
-              "icon": "fa-solid/server",
+              "icon": "@styled-icons/fa-solid/Server",
               "link": "https://my.unraid.com"
             }
           }