Files
c70e820e-b452-433b-84de-5e7…/src/components/shared/SvgTextLogo/SvgTextLogo.tsx

49 lines
998 B
TypeScript

import React from 'react';
interface SvgTextLogoProps {
text: string;
className?: string;
fontSize?: number;
fontWeight?: number | string;
letterSpacing?: number;
fillOpacity?: number;
}
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className = '',
fontSize = 48,
fontWeight = 700,
letterSpacing = 0,
fillOpacity = 1,
}) => {
const textMetrics = {
width: text.length * (fontSize as number) * 0.6,
height: (fontSize as number) * 1.2,
};
return (
<svg
viewBox={`0 0 ${textMetrics.width} ${textMetrics.height}`}
className={className}
xmlns="http://www.w3.org/2000/svg"
>
<text
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline="central"
fontSize={fontSize}
fontWeight={fontWeight}
letterSpacing={letterSpacing}
fillOpacity={fillOpacity}
fill="currentColor"
>
{text}
</text>
</svg>
);
};
export default SvgTextLogo;