diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css index ec5cbfd..b840a42 100644 --- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css +++ b/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; +} diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx index d3c0b2d..b332a6f 100644 --- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx +++ b/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; - const { icon, name } = bookmark; + let iconEl: JSX.Element = <Fragment></Fragment>; - 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> - ); + if (bookmark.icon) { + 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' + rel="noreferrer" key={`bookmark-${bookmark.id}`} > - {icon && iconEl} + {bookmark.icon && iconEl} {bookmark.name} </a> );