fix: make themed SVG fit the width

Signed-off-by: Matej Focko <mfocko@redhat.com>
This commit is contained in:
Matej Focko 2023-07-20 20:53:14 +02:00
parent ffd1572e98
commit 62e0bfeb85
Signed by: mfocko
GPG key ID: 7C47D46246790496
2 changed files with 7 additions and 2 deletions

View file

@ -2,18 +2,20 @@ import React from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import styles from './styles.module.css';
export default function ThemedSVG(props): JSX.Element { export default function ThemedSVG(props): JSX.Element {
const { source, className: parentClassName, alt, ...propsRest } = props; const { source, className: parentClassName, alt, ...propsRest } = props;
return ( return (
<> <>
<embed <embed
className={clsx("light-mode-only", parentClassName)} className={clsx("light-mode-only", parentClassName, styles.themed_svg)}
type="image/svg+xml" type="image/svg+xml"
src={`${source}_light.svg`} src={`${source}_light.svg`}
/> />
<embed <embed
className={clsx("dark-mode-only", parentClassName)} className={clsx("dark-mode-only", parentClassName, styles.themed_svg)}
type="image/svg+xml" type="image/svg+xml"
src={`${source}_dark.svg`} src={`${source}_dark.svg`}
/> />

View file

@ -0,0 +1,3 @@
.themed_svg {
max-width: 100%;
}