feat: Allow icons to be loaded externally

plugsy · Jul 30, 2021 · 1f3abbb · 1f3abbb
1 parent 29099d2
commit 1f3abbb
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -116,12 +116,12 @@ config.json
             "category": "Other",
             "name": "Beer Tab",
             "state": "GREEN",
-            "icon": "@styled-icons/boxicons-regular/Beer"
+            "icon": "@svg-icons/boxicons-regular/Beer"
           },
           {
             "name": "Beer Tab Dependency",
             "state": "GREEN",
-            "icon": "@styled-icons/ionicons-solid/Beer",
+            "icon": "@svg-icons/ionicons-solid/Beer",
             "parents": ["Beer Tab"]
           }
         ]
@@ -157,8 +157,8 @@ 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)
+`dockerDash.icon: '@svg-icons/simple-icons/Plex'` is to load the `Plex` icon in the [simple-icons](https://styled-icons.js.org/?s=plex) pack
+`dockerDash.icon: '@svg-icons/simple-icons/Homeassistant'` is to load the `Homeassistant` icon in the [simple-icons pack](https://styled-icons.js.org/?s=home%20assistant)
 
 Example using config.json:
 
@@ -170,7 +170,7 @@ Example using config.json:
         "containerMap": {
           "plugsy-container-name": {
             "category": "Home",
-            "icon": "@styled-icons/boxicons-regular/Crown",
+            "icon": "@svg-icons/boxicons-regular/Crown",
             "name": "Plugsy"
           }
         }
@@ -203,12 +203,12 @@ Example using the [raw connector](docs/connectors/raw.md):
             "category": "Other",
             "name": "Beer Tab",
             "state": "GREEN",
-            "icon": "@styled-icons/boxicons-regular/Beer"
+            "icon": "@svg-icons/boxicons-regular/Beer"
           },
           {
             "name": "Beer Tab Dependency",
             "state": "GREEN",
-            "icon": "@styled-icons/ionicons-solid/Beer",
+            "icon": "@svg-icons/ionicons-solid/Beer",
             "parents": ["Beer Tab"]
           }
         ]

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -39,6 +39,7 @@ services:
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
       - .:/home/node/app
+      - ./packages/core/config.json:/config.json
     ports:
       - '3000:3000'
 

diff --git a/docs/connectors/docker.md b/docs/connectors/docker.md
@@ -104,17 +104,17 @@ services:
           "vikunjafrontend": {
             "name": "Vikunja",
             "category": "Home",
-            "icon": "@styled-icons/bootstrap/Pencil",
+            "icon": "@svg-icons/bootstrap/Pencil",
             "link": "https://my.vikunja.com"
           },
           "vikunjaapi": {
             "name": "API",
-            "icon": "@styled-icons/boxicons-regular/Server",
+            "icon": "@svg-icons/boxicons-regular/Server",
             "parents": ["Vikunja"]
           },
           "vikunjadb": {
             "name": "DB",
-            "icon": "@styled-icons/fa-solid/Database",
+            "icon": "@svg-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": "@styled-icons/simple-icons/Homeassistant", // Optional, defaults to null
+            "icon": "@svg-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/agent/Dockerfile b/packages/agent/Dockerfile
@@ -21,7 +21,7 @@ WORKDIR /opt/demo
 ##
 
 COPY ${BUILD_DIR}/package.json ${BUILD_DIR}/
-COPY package.json yarn.lock .yarnrc.yml .pnp.js codegen.yml tsconfig.base.json .
+COPY package.json yarn.lock .yarnrc.yml .pnp.js codegen.yml tsconfig.base.json ./
 COPY .yarn/ /opt/demo/.yarn/
 
 ##

diff --git a/packages/core/.dockerignore b/packages/core/.dockerignore
@@ -10,4 +10,5 @@ node_modules
 dist
 *generated*
 .github
-README.md
+README.md
+config.json
diff --git a/packages/core/client/components/DynamicIcon/index.tsx b/packages/core/client/components/DynamicIcon/index.tsx
@@ -1,11 +1,32 @@
 import SVG, { Props as SVGProps } from "react-inlinesvg";
+// We're using react-inlinesvg as the SVGs coming from '@svg-icons' is broken
 
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-export interface DynamicIconProps extends Omit<SVGProps, "src"> {
+export interface DynamicIconProps extends Omit<SVGProps, "src" | "onError"> {
   icon: string;
 }
 
+export const DynamicImage: React.FC<
+  DynamicIconProps & { onError: () => void }
+> = ({ icon, onError, width, height }) => {
+  return <img src={icon} width={width} height={height} onError={onError} />;
+};
+
+export const DynamicSVG: React.FC<DynamicIconProps & { onError: () => void }> =
+  ({ icon, width, height, onError, ...props }) => {
+    return (
+      <SVG
+        width={width}
+        height={height}
+        src={icon.startsWith('http') ? icon : `/icons/${icon}`}
+        loader={<div style={{ width, height }} />}
+        onError={onError}
+        {...props}
+      />
+    );
+  };
+
 export const DynamicIcon: React.FC<DynamicIconProps> = ({
   icon,
   width,
@@ -14,21 +35,33 @@ export const DynamicIcon: React.FC<DynamicIconProps> = ({
 }) => {
   const [error, setError] = useState(false);
   useEffect(() => setError(false), [icon]);
+  const onError = useCallback(() => setError(true), []);
+  const Component = useMemo(
+    () =>
+      icon.startsWith("http") && !icon.endsWith(".svg")
+        ? DynamicImage
+        : DynamicSVG,
+    [icon]
+  );
   return !error ? (
-    <SVG
+    <Component
+      icon={icon}
       width={width}
       height={height}
-      src={`/icons/${icon}`}
-      loader={<div style={{ width, height }} />}
-      onError={() => setError(true)}
+      onError={onError}
       {...props}
     />
   ) : (
     <SVG
       width={width}
       height={height}
-      src={`/icons/@styled-icons/fluentui-system-regular/DocumentError`}
+      src={`/icons/@svg-icons/fluentui-system-regular/DocumentError`}
       loader={<div style={{ width, height }} />}
+      onError={() =>
+        console.error(
+          "Unable to load @svg-icons/fluentui-system-regular/DocumentError icon"
+        )
+      }
       {...props}
     />
   );

diff --git a/packages/core/client/components/Item/index.tsx b/packages/core/client/components/Item/index.tsx
@@ -209,12 +209,12 @@ export const Item: React.FC<ItemProps> = ({
   const ConnectorIcon = useMemo(
     () =>
       connectorType === "DOCKER"
-        ? staticIcon("@styled-icons/ionicons-solid/LogoDocker")
+        ? staticIcon("@svg-icons/ionicons-solid/LogoDocker")
         : connectorType === "RAW"
-        ? staticIcon("@styled-icons/simple-icons/Visualstudiocode")
+        ? staticIcon("@svg-icons/simple-icons/Visualstudiocode")
         : connectorType === "WEBSITE"
-        ? staticIcon("@styled-icons/bootstrap/Globe")
-        : staticIcon("@styled-icons/bootstrap/QuestionCircle"),
+        ? staticIcon("@svg-icons/bootstrap/Globe")
+        : staticIcon("@svg-icons/bootstrap/QuestionCircle"),
     [connectorType]
   );
   const theme = useTheme() as Theme;
@@ -262,7 +262,7 @@ export const Item: React.FC<ItemProps> = ({
             <ExternalLinkContainer>
               {link ? (
                 <DynamicIcon
-                  icon="@styled-icons/feather/ExternalLink"
+                  icon="@svg-icons/feather/ExternalLink"
                   width={10}
                   height={10}
                 />
@@ -271,7 +271,7 @@ export const Item: React.FC<ItemProps> = ({
                 <DynamicIcon
                   width={10}
                   height={10}
-                  icon="@styled-icons/feather/MoreVertical"
+                  icon="@svg-icons/feather/MoreVertical"
                 />
               ) : null}
             </ExternalLinkContainer>

diff --git a/packages/core/config.json b/packages/core/config.json
@@ -15,7 +15,7 @@
       "type": "DOCKER",
       "config": {
         "containerMap": {
-          "plugsy": {
+          "dockerdash-core": {
             "category": "Home",
             "icon": "@styled-icons/boxicons-regular/Crown",
             "name": "Plugsy"
@@ -32,7 +32,7 @@
             "display": {
               "name": "Home Assistant",
               "category": "Home",
-              "icon": "@styled-icons/simple-icons/Plex",
+              "icon": "https://github.com/ground7/unraid-animated-svgs/blob/master/Always%20Animate/downloads.svg",
               "link": "https://my.homeassistant.com"
             }
           },

diff --git a/packages/core/server/icon-handler/index.ts b/packages/core/server/icon-handler/index.ts
@@ -1,7 +1,7 @@
 import { readFileSync } from "fs";
 import { Handler } from "express";
 import { paramCase } from "change-case";
-const EXAMPLES = ["@styled-icons/simple-icons/Plex"];
+const EXAMPLES = ["@svg-icons/simple-icons/Plex"];
 
 export const svgIconHandler: Handler = (req, res) => {
   const { iconPath } = req.params;