mirror of
https://github.com/mfocko/blog.git
synced 2024-11-22 04:53:47 +01:00
fix: make themed SVG fit the width
Signed-off-by: Matej Focko <mfocko@redhat.com>
This commit is contained in:
parent
ffd1572e98
commit
62e0bfeb85
2 changed files with 7 additions and 2 deletions
|
@ -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`}
|
||||||
/>
|
/>
|
||||||
|
|
3
src/components/ThemedSVG/styles.module.css
Normal file
3
src/components/ThemedSVG/styles.module.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
.themed_svg {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
Loading…
Reference in a new issue