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 = ; - if (/.(jpeg|jpg|png)$/i.test(icon)) { - iconEl = ( -
- {`${name} -
- ); - } else if (/.(svg)$/i.test(icon)) { - iconEl = ( -
- -
- ); - } else { - iconEl = ( -
- -
- ); + if (bookmark.icon) { + const { icon, name } = bookmark; + + if (/.(jpeg|jpg|png)$/i.test(icon)) { + iconEl = ( +
+ {`${name} +
+ ); + } else if (/.(svg)$/i.test(icon)) { + iconEl = ( +
+ +
+ ); + } else { + iconEl = ( +
+ +
+ ); + } } return ( - {icon && iconEl} + {bookmark.icon && iconEl} {bookmark.name} );