Added support for custom SVG icons

client/src/components/Apps/AppCard/AppCard.module.css

@@ -33,11 +33,11 @@
   .AppCard {
     padding: 2px;
     border-radius: 4px;
-    transition: all 0.10s;
+    transition: all 0.1s;
   }
 
   .AppCard:hover {
-    background-color: rgba(0,0,0,0.2);
+    background-color: rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -47,4 +47,4 @@
   margin-top: 2px;
   margin-left: 2px;
   object-fit: contain;
-}
+}

client/src/components/Apps/AppCard/AppCard.tsx

@@ -13,6 +13,31 @@ interface ComponentProps {
 const AppCard = (props: ComponentProps): JSX.Element => {
   const [displayUrl, redirectUrl] = urlParser(props.app.url);
 
+  let iconEl: JSX.Element;
+  const { icon } = props.app;
+
+  if (/.(jpeg|jpg|png)$/i.test(icon)) {
+    iconEl = (
+      <img
+        src={`/uploads/${icon}`}
+        alt={`${props.app.name} icon`}
+        className={classes.CustomIcon}
+      />
+    );
+  } else if (/.(svg)$/i.test(icon)) {
+    iconEl = (
+      <div className={classes.CustomIcon}>
+        <svg
+          data-src={`/uploads/${icon}`}
+          fill='var(--color-primary)'
+          className={classes.CustomIcon}
+        ></svg>
+      </div>
+    );
+  } else {
+    iconEl = <Icon icon={iconParser(icon)} />;
+  }
+
   return (
     <a
       href={redirectUrl}
@@ -20,22 +45,13 @@ const AppCard = (props: ComponentProps): JSX.Element => {
       rel='noreferrer'
       className={classes.AppCard}
     >
-      <div className={classes.AppCardIcon}>
-        {(/.(jpeg|jpg|png)$/i).test(props.app.icon)
-          ? <img
-              src={`/uploads/${props.app.icon}`}
-              alt={`${props.app.name} icon`}
-              className={classes.CustomIcon}
-            />
-          : <Icon icon={iconParser(props.app.icon)} />
-        }
-      </div>
+      <div className={classes.AppCardIcon}>{iconEl}</div>
       <div className={classes.AppCardDetails}>
         <h5>{props.app.name}</h5>
         <span>{displayUrl}</span>
       </div>
     </a>
-  )
-}
+  );
+};
 
-export default AppCard;
+export default AppCard;

client/src/components/Apps/AppForm/AppForm.tsx

@@ -31,28 +31,28 @@ const AppForm = (props: ComponentProps): JSX.Element => {
         name: props.app.name,
         url: props.app.url,
         icon: props.app.icon
-      })
+      });
     } else {
       setFormData({
         name: '',
         url: '',
         icon: ''
-      })
+      });
     }
-  }, [props.app])
+  }, [props.app]);
 
   const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
     setFormData({
       ...formData,
       [e.target.name]: e.target.value
-    })
-  }
+    });
+  };
 
   const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
     if (e.target.files) {
       setCustomIcon(e.target.files[0]);
     }
-  }
+  };
 
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
@@ -66,7 +66,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
       data.append('url', formData.url);
 
       return data;
-    }
+    };
 
     if (!props.app) {
       if (customIcon) {
@@ -89,10 +89,10 @@ const AppForm = (props: ComponentProps): JSX.Element => {
       name: '',
       url: '',
       icon: ''
-    })
+    });
 
     setCustomIcon(null);
-  }
+  };
 
   return (
     <ModalForm
@@ -108,7 +108,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
           placeholder='Bookstack'
           required
           value={formData.name}
-          onChange={(e) => inputChangeHandler(e)}
+          onChange={e => inputChangeHandler(e)}
         />
       </InputGroup>
       <InputGroup>
@@ -120,7 +120,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
           placeholder='bookstack.example.com'
           required
           value={formData.url}
-          onChange={(e) => inputChangeHandler(e)}
+          onChange={e => inputChangeHandler(e)}
         />
         <span>
           <a
@@ -128,61 +128,65 @@ const AppForm = (props: ComponentProps): JSX.Element => {
             target='_blank'
             rel='noreferrer'
           >
-            {' '}Check supported URL formats
+            {' '}
+            Check supported URL formats
           </a>
         </span>
       </InputGroup>
-      {!useCustomIcon
+      {!useCustomIcon ? (
         // use mdi icon
-        ? (<InputGroup>
-            <label htmlFor='icon'>App Icon</label>
-            <input
-              type='text'
-              name='icon'
-              id='icon'
-              placeholder='book-open-outline'
-              required
-              value={formData.icon}
-              onChange={(e) => inputChangeHandler(e)}
-            />
-            <span>
-              Use icon name from MDI. 
-              <a
-                href='https://materialdesignicons.com/'
-                target='blank'>
-                {' '}Click here for reference
-              </a>
-            </span>
-            <span
-              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-              className={classes.Switch}>
-              Switch to custom icon upload
-            </span>
-          </InputGroup>)
+        <InputGroup>
+          <label htmlFor='icon'>App Icon</label>
+          <input
+            type='text'
+            name='icon'
+            id='icon'
+            placeholder='book-open-outline'
+            required
+            value={formData.icon}
+            onChange={e => inputChangeHandler(e)}
+          />
+          <span>
+            Use icon name from MDI.
+            <a href='https://materialdesignicons.com/' target='blank'>
+              {' '}
+              Click here for reference
+            </a>
+          </span>
+          <span
+            onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+            className={classes.Switch}
+          >
+            Switch to custom icon upload
+          </span>
+        </InputGroup>
+      ) : (
         // upload custom icon
-        : (<InputGroup>
-            <label htmlFor='icon'>App Icon</label>
-            <input
-              type='file'
-              name='icon'
-              id='icon'
-              required
-              onChange={(e) => fileChangeHandler(e)}
-              accept='.jpg,.jpeg,.png'
-            />
-            <span
-              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-              className={classes.Switch}>
-              Switch to MDI
-            </span>
-          </InputGroup>)
-      }
-      {!props.app
-        ? <Button>Add new application</Button>
-        : <Button>Update application</Button>
-      }
+        <InputGroup>
+          <label htmlFor='icon'>App Icon</label>
+          <input
+            type='file'
+            name='icon'
+            id='icon'
+            required
+            onChange={e => fileChangeHandler(e)}
+            accept='.jpg,.jpeg,.png,.svg'
+          />
+          <span
+            onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+            className={classes.Switch}
+          >
+            Switch to MDI
+          </span>
+        </InputGroup>
+      )}
+      {!props.app ? (
+        <Button>Add new application</Button>
+      ) : (
+        <Button>Update application</Button>
+      )}
     </ModalForm>
-  )
-}
+  );
+};
 
-export default connect(null, { addApp, updateApp })(AppForm);
+export default connect(null, { addApp, updateApp })(AppForm);