Added support for custom SVG icons

CHANGELOG.md

@@ -1,3 +1,6 @@
+### v1.6.3 (TBA)
+- Added support for custom SVG icons ([#73](https://github.com/pawelmalak/flame/issues/73))
+
 ### v1.6.2 (2021-08-06)
 - Fixed changelog link
 - Added support for Docker API ([#14](https://github.com/pawelmalak/flame/issues/14))

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=1.6.2
+REACT_APP_VERSION=1.6.3

client/package-lock.json

@@ -6462,6 +6462,14 @@
         }
       }
     },
+    "external-svg-loader": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/external-svg-loader/-/external-svg-loader-1.3.4.tgz",
+      "integrity": "sha512-73h7/rYYA4KnIV74M/0r6zHWPLuY/8QHnwKymwh+46tbQAZ0ZtoN98TJZI+CUYTfP2nXgqslCgSsxcr7eOw45w==",
+      "requires": {
+        "idb-keyval": "^3.2.0"
+      }
+    },
     "extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -7527,6 +7535,11 @@
         "postcss": "^7.0.14"
       }
     },
+    "idb-keyval": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-3.2.0.tgz",
+      "integrity": "sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ=="
+    },
     "identity-obj-proxy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",

client/package.json

@@ -16,6 +16,7 @@
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.21.1",
+    "external-svg-loader": "^1.3.4",
     "http-proxy-middleware": "^2.0.0",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",

client/src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { getConfig, setTheme } from './store/actions';
+import 'external-svg-loader';
 
 // Redux
 import { store } from './store/store';
@@ -40,6 +41,6 @@ const App = (): JSX.Element => {
       <NotificationCenter />
     </Provider>
   );
-}
+};
 
 export default App;

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);
   }
 }
 

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}>
+      <div className={classes.AppCardIcon}>{iconEl}</div>
-        {(/.(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.AppCardDetails}>
         <h5>{props.app.name}</h5>
         <span>{displayUrl}</span>
       </div>
     </a>
-  )
+  );
-}
+};
 
 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,13 +128,14 @@ 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>
+        <InputGroup>
           <label htmlFor='icon'>App Icon</label>
           <input
             type='text'
@@ -143,46 +144,49 @@ const AppForm = (props: ComponentProps): JSX.Element => {
             placeholder='book-open-outline'
             required
             value={formData.icon}
-              onChange={(e) => inputChangeHandler(e)}
+            onChange={e => inputChangeHandler(e)}
           />
           <span>
             Use icon name from MDI.
-              <a
+            <a href='https://materialdesignicons.com/' target='blank'>
-                href='https://materialdesignicons.com/'
+              {' '}
-                target='blank'>
+              Click here for reference
-                {' '}Click here for reference
             </a>
           </span>
           <span
             onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-              className={classes.Switch}>
+            className={classes.Switch}
+          >
             Switch to custom icon upload
           </span>
-          </InputGroup>)
+        </InputGroup>
+      ) : (
         // upload custom icon
-        : (<InputGroup>
+        <InputGroup>
           <label htmlFor='icon'>App Icon</label>
           <input
             type='file'
             name='icon'
             id='icon'
             required
-              onChange={(e) => fileChangeHandler(e)}
+            onChange={e => fileChangeHandler(e)}
-              accept='.jpg,.jpeg,.png'
+            accept='.jpg,.jpeg,.png,.svg'
           />
           <span
             onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-              className={classes.Switch}>
+            className={classes.Switch}
+          >
             Switch to MDI
           </span>
-          </InputGroup>)
+        </InputGroup>
-      }
+      )}
-      {!props.app
+      {!props.app ? (
-        ? <Button>Add new application</Button>
+        <Button>Add new application</Button>
-        : <Button>Update application</Button>
+      ) : (
-      }
+        <Button>Update application</Button>
+      )}
     </ModalForm>
-  )
+  );
-}
+};
 
 export default connect(null, { addApp, updateApp })(AppForm);

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css

@@ -32,4 +32,14 @@
   display: flex;
   margin-top: 3px;
   margin-right: 2px;
+  justify-content: center;
+  align-items: center;
+}
+
+.BookmarkIconSvg {
+  width: 80%;
+  height: 80%;
+  margin-top: 2px;
+  margin-left: 2px;
+  object-fit: contain;
 }

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -16,31 +16,52 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
         {props.category.bookmarks.map((bookmark: Bookmark) => {
           const redirectUrl = urlParser(bookmark.url)[1];
 
+          let iconEl: JSX.Element;
+          const { icon, name } = bookmark;
+
+          if (/.(jpeg|jpg|png)$/i.test(icon)) {
+            iconEl = (
+              <div className={classes.BookmarkIcon}>
+                <img
+                  src={`/uploads/${icon}`}
+                  alt={`${name} icon`}
+                  className={classes.CustomIcon}
+                />
+              </div>
+            );
+          } else if (/.(svg)$/i.test(icon)) {
+            iconEl = (
+              <div className={classes.BookmarkIcon}>
+                <svg
+                  data-src={`/uploads/${icon}`}
+                  fill='var(--color-primary)'
+                  className={classes.BookmarkIconSvg}
+                ></svg>
+              </div>
+            );
+          } else {
+            iconEl = (
+              <div className={classes.BookmarkIcon}>
+                <Icon icon={iconParser(icon)} />
+              </div>
+            );
+          }
+
           return (
             <a
               href={redirectUrl}
               target={searchConfig('bookmarksSameTab', false) ? '' : '_blank'}
               rel='noreferrer'
-              key={`bookmark-${bookmark.id}`}>
+              key={`bookmark-${bookmark.id}`}
-              {bookmark.icon && (
+            >
-                <div className={classes.BookmarkIcon}>
+              {icon && iconEl}
-                  {(/.(jpeg|jpg|png)$/i).test(bookmark.icon)
-                    ? <img
-                        src={`/uploads/${bookmark.icon}`}
-                        alt={`${bookmark.name} icon`}
-                        className={classes.CustomIcon}
-                      />
-                    : <Icon icon={iconParser(bookmark.icon)} />
-                  }
-                </div>
-              )}
               {bookmark.name}
             </a>
-          )
+          );
         })}
       </div>
     </div>
-  )
+  );
-}
+};
 
 export default BookmarkCard;

client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx

@@ -1,11 +1,31 @@
-import { useState, SyntheticEvent, Fragment, ChangeEvent, useEffect } from 'react';
+import {
+  useState,
+  SyntheticEvent,
+  Fragment,
+  ChangeEvent,
+  useEffect
+} from 'react';
 import { connect } from 'react-redux';
 
 import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
-import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces';
+import {
+  Bookmark,
+  Category,
+  GlobalState,
+  NewBookmark,
+  NewCategory,
+  NewNotification
+} from '../../../interfaces';
 import { ContentType } from '../Bookmarks';
-import { getCategories, addCategory, addBookmark, updateCategory, updateBookmark, createNotification } from '../../../store/actions';
+import {
+  getCategories,
+  addCategory,
+  addBookmark,
+  updateCategory,
+  updateBookmark,
+  createNotification
+} from '../../../store/actions';
 import Button from '../../UI/Buttons/Button/Button';
 import classes from './BookmarkForm.module.css';
 
@@ -22,8 +42,8 @@ interface ComponentProps {
     id: number,
     formData: NewBookmark | FormData,
     category: {
-      prev: number,
+      prev: number;
-      curr: number
+      curr: number;
     }
   ) => void;
   createNotification: (notification: NewNotification) => void;
@@ -34,14 +54,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
   const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [categoryName, setCategoryName] = useState<NewCategory>({
     name: ''
-  })
+  });
 
   const [formData, setFormData] = useState<NewBookmark>({
     name: '',
     url: '',
     categoryId: -1,
     icon: ''
-  })
+  });
 
   // Load category data if provided for editing
   useEffect(() => {
@@ -50,7 +70,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
     } else {
       setCategoryName({ name: '' });
     }
-  }, [props.category])
+  }, [props.category]);
 
   // Load bookmark data if provided for editing
   useEffect(() => {
@@ -60,16 +80,16 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
         url: props.bookmark.url,
         categoryId: props.bookmark.categoryId,
         icon: props.bookmark.icon
-      })
+      });
     } else {
       setFormData({
         name: '',
         url: '',
         categoryId: -1,
         icon: ''
-      })
+      });
     }
-  }, [props.bookmark])
+  }, [props.bookmark]);
 
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
@@ -84,7 +104,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       data.append('categoryId', `${formData.categoryId}`);
 
       return data;
-    }
+    };
 
     if (!props.category && !props.bookmark) {
       // Add new
@@ -98,7 +118,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
           props.createNotification({
             title: 'Error',
             message: 'Please select category'
-          })
+          });
           return;
         }
 
@@ -114,9 +134,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
           url: '',
           categoryId: formData.categoryId,
           icon: ''
-        })
+        });
 
-        setCustomIcon(null)
+        setCustomIcon(null);
       }
     } else {
       // Update
@@ -128,23 +148,15 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
         // Update bookmark
         if (customIcon) {
           const data = createFormData();
-          props.updateBookmark(
+          props.updateBookmark(props.bookmark.id, data, {
-            props.bookmark.id,
-            data,
-            {
             prev: props.bookmark.categoryId,
             curr: formData.categoryId
-            }
+          });
-          )
         } else {
-          props.updateBookmark(
+          props.updateBookmark(props.bookmark.id, formData, {
-            props.bookmark.id,
-            formData,
-            {
             prev: props.bookmark.categoryId,
             curr: formData.categoryId
-            }
+          });
-          );
         }
 
         setFormData({
@@ -152,36 +164,36 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
           url: '',
           categoryId: -1,
           icon: ''
-        })
+        });
 
-        setCustomIcon(null)
+        setCustomIcon(null);
       }
 
       props.modalHandler();
     }
-  }
+  };
 
   const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
     setFormData({
       ...formData,
       [e.target.name]: e.target.value
-    })
+    });
-  }
+  };
 
   const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
     setFormData({
       ...formData,
       categoryId: parseInt(e.target.value)
-    })
+    });
-  }
+  };
 
   const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
     if (e.target.files) {
       setCustomIcon(e.target.files[0]);
     }
-  }
+  };
 
-  let button = <Button>Submit</Button>
+  let button = <Button>Submit</Button>;
 
   if (!props.category && !props.bookmark) {
     if (props.contentType === ContentType.category) {
@@ -190,9 +202,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       button = <Button>Add new bookmark</Button>;
     }
   } else if (props.category) {
-    button = <Button>Update category</Button>
+    button = <Button>Update category</Button>;
   } else if (props.bookmark) {
-    button = <Button>Update bookmark</Button>
+    button = <Button>Update bookmark</Button>;
   }
 
   return (
@@ -200,8 +212,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       modalHandler={props.modalHandler}
       formHandler={formSubmitHandler}
     >
-      {props.contentType === ContentType.category
+      {props.contentType === ContentType.category ? (
-        ? (
         <Fragment>
           <InputGroup>
             <label htmlFor='categoryName'>Category Name</label>
@@ -212,12 +223,11 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
               placeholder='Social Media'
               required
               value={categoryName.name}
-                onChange={(e) => setCategoryName({ name: e.target.value })}
+              onChange={e => setCategoryName({ name: e.target.value })}
             />
           </InputGroup>
         </Fragment>
-        )
+      ) : (
-        : (
         <Fragment>
           <InputGroup>
             <label htmlFor='name'>Bookmark Name</label>
@@ -228,7 +238,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
               placeholder='Reddit'
               required
               value={formData.name}
-                onChange={(e) => inputChangeHandler(e)}
+              onChange={e => inputChangeHandler(e)}
             />
           </InputGroup>
           <InputGroup>
@@ -240,7 +250,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
               placeholder='reddit.com'
               required
               value={formData.url}
-                onChange={(e) => inputChangeHandler(e)}
+              onChange={e => inputChangeHandler(e)}
             />
             <span>
               <a
@@ -248,7 +258,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                 target='_blank'
                 rel='noreferrer'
               >
-                  {' '}Check supported URL formats
+                {' '}
+                Check supported URL formats
               </a>
             </span>
           </InputGroup>
@@ -258,25 +269,22 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
               name='categoryId'
               id='categoryId'
               required
-                onChange={(e) => selectChangeHandler(e)}
+              onChange={e => selectChangeHandler(e)}
               value={formData.categoryId}
             >
               <option value={-1}>Select category</option>
               {props.categories.map((category: Category): JSX.Element => {
                 return (
-                    <option
+                  <option key={category.id} value={category.id}>
-                      key={category.id}
-                      value={category.id}
-                    >
                     {category.name}
                   </option>
-                  )
+                );
               })}
             </select>
           </InputGroup>
-            {!useCustomIcon
+          {!useCustomIcon ? (
             // mdi
-              ? (<InputGroup>
+            <InputGroup>
               <label htmlFor='icon'>Bookmark Icon (optional)</label>
               <input
                 type='text'
@@ -284,52 +292,53 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                 id='icon'
                 placeholder='book-open-outline'
                 value={formData.icon}
-                  onChange={(e) => inputChangeHandler(e)}
+                onChange={e => inputChangeHandler(e)}
               />
               <span>
                 Use icon name from MDI.
-                  <a
+                <a href='https://materialdesignicons.com/' target='blank'>
-                    href='https://materialdesignicons.com/'
+                  {' '}
-                    target='blank'>
+                  Click here for reference
-                    {' '}Click here for reference
                 </a>
               </span>
               <span
                 onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-                  className={classes.Switch}>
+                className={classes.Switch}
+              >
                 Switch to custom icon upload
               </span>
-              </InputGroup>)
+            </InputGroup>
+          ) : (
             // custom
-              : (<InputGroup>
+            <InputGroup>
               <label htmlFor='icon'>Bookmark Icon (optional)</label>
               <input
                 type='file'
                 name='icon'
                 id='icon'
-                  onChange={(e) => fileChangeHandler(e)}
+                onChange={e => fileChangeHandler(e)}
-                  accept='.jpg,.jpeg,.png'
+                accept='.jpg,.jpeg,.png,.svg'
               />
               <span
                 onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-                  className={classes.Switch}>
+                className={classes.Switch}
+              >
                 Switch to MDI
               </span>
-              </InputGroup>)
+            </InputGroup>
-            }
+          )}
         </Fragment>
-        )
+      )}
-      }
       {button}
     </ModalForm>
-  )
+  );
-}
+};
 
 const mapStateToProps = (state: GlobalState) => {
   return {
     categories: state.bookmark.categories
-  }
+  };
-}
+};
 
 const dispatchMap = {
   getCategories,
@@ -338,6 +347,6 @@ const dispatchMap = {
   updateCategory,
   updateBookmark,
   createNotification
-}
+};
 
 export default connect(mapStateToProps, dispatchMap)(BookmarkForm);

controllers/apps.js

@@ -126,11 +126,19 @@ exports.getApps = asyncWrapper(async (req, res, next) => {
     });
   }
 
+  if (process.env.NODE_ENV === 'production') {
     // Set header to fetch containers info every time
     res.status(200).setHeader('Cache-Control', 'no-store').json({
       success: true,
       data: apps
     });
+    return;
+  }
+
+  res.status(200).json({
+    success: true,
+    data: apps
+  });
 });
 
 // @desc      Get single app

db.js

@@ -6,7 +6,7 @@ const sequelize = new Sequelize({
   dialect: 'sqlite',
   storage: './data/db.sqlite',
   logging: false
-})
+});
 
 const connectDB = async () => {
   try {
@@ -24,9 +24,9 @@ const connectDB = async () => {
     logger.log(`Unable to connect to the database: ${error.message}`, 'ERROR');
     process.exit(1);
   }
-}
+};
 
 module.exports = {
   connectDB,
   sequelize
-}
+};

middleware/multer.js

@@ -12,9 +12,9 @@ const storage = multer.diskStorage({
   filename: (req, file, cb) => {
     cb(null, Date.now() + '--' + file.originalname);
   }
-})
+});
 
-const supportedTypes = ['jpg', 'jpeg', 'png'];
+const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml'];
 
 const fileFilter = (req, file, cb) => {
   if (supportedTypes.includes(file.mimetype.split('/')[1])) {
@@ -22,7 +22,7 @@ const fileFilter = (req, file, cb) => {
   } else {
     cb(null, false);
   }
-}
+};
 
 const upload = multer({ storage, fileFilter });