60 lines
1.1 KiB
TypeScript
60 lines
1.1 KiB
TypeScript
/**
|
|
* Copyright (c) 2025 xwra
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*/
|
|
|
|
interface TintedImageProps {
|
|
src: string;
|
|
colour: string;
|
|
[key: string]: any;
|
|
}
|
|
|
|
export default function TintedImage({
|
|
colour,
|
|
src,
|
|
...props
|
|
}: TintedImageProps) {
|
|
return (
|
|
<svg
|
|
width="100%"
|
|
height="100%"
|
|
{...props}
|
|
>
|
|
<defs>
|
|
<filter
|
|
id="tint"
|
|
x="0%"
|
|
y="0%"
|
|
width="100%"
|
|
height="100%"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feColorMatrix
|
|
type="saturate"
|
|
values="0"
|
|
result="grayscale"
|
|
/>
|
|
<feFlood flood-color={colour} result="tint" />
|
|
<feComposite
|
|
in="tint"
|
|
in2="grayscale"
|
|
operator="arithmetic"
|
|
k1="1"
|
|
k2="0"
|
|
k3="0"
|
|
k4="0"
|
|
/>
|
|
</filter>
|
|
</defs>
|
|
<image
|
|
x="0"
|
|
y="0"
|
|
width="100%"
|
|
height="100%"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
filter={`url(#tint)`}
|
|
href={src}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|