Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-27 23:09:35 +02:00
Code Issues Releases Wiki Activity

Added support for setting icons via URL

Browse source
This commit is contained in:
Paweł Malak 2021-11-10 11:42:00 +01:00
parent d83e3056c6
commit f5ed85427e
5 changed files with 46 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/src/components/Apps/AppCard/AppCard.tsx
View file

@ -1,6 +1,6 @@
import classes from './AppCard.module.css';
import { Icon } from '../../UI';
import { iconParser, urlParser } from '../../../utility';
import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';
import { App } from '../../../interfaces';
import { useSelector } from 'react-redux';
@ -19,19 +19,23 @@ export const AppCard = (props: Props): JSX.Element => {
let iconEl: JSX.Element;
const { icon } = props.app;
if (/.(jpeg|jpg|png)$/i.test(icon)) {
if (isImage(icon)) {
const source = isUrl(icon) ? icon : `/uploads/${icon}`;
iconEl = (
<img
src={`/uploads/${icon}`}
src={source}
alt={`${props.app.name} icon`}
className={classes.CustomIcon}
/>
);
} else if (/.(svg)$/i.test(icon)) {
} else if (isSvg(icon)) {
const source = isUrl(icon) ? icon : `/uploads/${icon}`;
iconEl = (
<div className={classes.CustomIcon}>
<svg
data-src={`/uploads/${icon}`}
data-src={source}
fill="var(--color-primary)"
className={classes.CustomIcon}
></svg>

14
client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
View file

@ -9,7 +9,7 @@ import classes from './BookmarkCard.module.css';
import { Icon } from '../../UI';
import { iconParser, urlParser } from '../../../utility';
import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';
interface Props {
category: Category;
@ -30,21 +30,25 @@ export const BookmarkCard = (props: Props): JSX.Element => {
if (bookmark.icon) {
const { icon, name } = bookmark;
if (/.(jpeg|jpg|png)$/i.test(icon)) {
if (isImage(icon)) {
const source = isUrl(icon) ? icon : `/uploads/${icon}`;
iconEl = (
<div className={classes.BookmarkIcon}>
<img
src={`/uploads/${icon}`}
src={source}
alt={`${name} icon`}
className={classes.CustomIcon}
/>
</div>
);
} else if (/.(svg)$/i.test(icon)) {
} else if (isSvg(icon)) {
const source = isUrl(icon) ? icon : `/uploads/${icon}`;
iconEl = (
<div className={classes.BookmarkIcon}>
<svg
data-src={`/uploads/${icon}`}
data-src={source}
fill="var(--color-primary)"
className={classes.BookmarkIconSvg}
></svg>