Merge pull request #79 from pawelmalak/icon-fix

Bookmark icon fixes

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

@@ -43,3 +43,10 @@
   margin-left: 2px;
   object-fit: contain;
 }
+
+.CustomIcon {
+  width: 90%;
+  height: 90%;
+  margin-top: 2px;
+  object-fit: contain;
+}

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

@@ -3,6 +3,7 @@ import classes from './BookmarkCard.module.css';
 
 import Icon from '../../UI/Icons/Icon/Icon';
 import { iconParser, urlParser, searchConfig } from '../../../utility';
+import { Fragment } from 'react';
 
 interface ComponentProps {
   category: Category;
@@ -16,45 +17,48 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
         {props.category.bookmarks.map((bookmark: Bookmark) => {
           const redirectUrl = urlParser(bookmark.url)[1];
 
-          let iconEl: JSX.Element;
+          let iconEl: JSX.Element = <Fragment></Fragment>;
-          const { icon, name } = bookmark;
 
-          if (/.(jpeg|jpg|png)$/i.test(icon)) {
+          if (bookmark.icon) {
-            iconEl = (
+            const { icon, name } = bookmark;
-              <div className={classes.BookmarkIcon}>
+
-                <img
+            if (/.(jpeg|jpg|png)$/i.test(icon)) {
-                  src={`/uploads/${icon}`}
+              iconEl = (
-                  alt={`${name} icon`}
+                <div className={classes.BookmarkIcon}>
-                  className={classes.CustomIcon}
+                  <img
-                />
+                    src={`/uploads/${icon}`}
-              </div>
+                    alt={`${name} icon`}
-            );
+                    className={classes.CustomIcon}
-          } else if (/.(svg)$/i.test(icon)) {
+                  />
-            iconEl = (
+                </div>
-              <div className={classes.BookmarkIcon}>
+              );
-                <svg
+            } else if (/.(svg)$/i.test(icon)) {
-                  data-src={`/uploads/${icon}`}
+              iconEl = (
-                  fill='var(--color-primary)'
+                <div className={classes.BookmarkIcon}>
-                  className={classes.BookmarkIconSvg}
+                  <svg
-                ></svg>
+                    data-src={`/uploads/${icon}`}
-              </div>
+                    fill="var(--color-primary)"
-            );
+                    className={classes.BookmarkIconSvg}
-          } else {
+                  ></svg>
-            iconEl = (
+                </div>
-              <div className={classes.BookmarkIcon}>
+              );
-                <Icon icon={iconParser(icon)} />
+            } else {
-              </div>
+              iconEl = (
-            );
+                <div className={classes.BookmarkIcon}>
+                  <Icon icon={iconParser(icon)} />
+                </div>
+              );
+            }
           }
 
           return (
             <a
               href={redirectUrl}
               target={searchConfig('bookmarksSameTab', false) ? '' : '_blank'}
-              rel='noreferrer'
+              rel="noreferrer"
               key={`bookmark-${bookmark.id}`}
             >
-              {icon && iconEl}
+              {bookmark.icon && iconEl}
               {bookmark.name}
             </a>
           );