Files
296219fb-6c7f-4412-b14e-ab0…/src/components/shared/SvgTextLogo/SvgTextLogo.tsx

49 lines
959 B
TypeScript

import React from 'react';
interface SvgTextLogoProps {
text: string;
fontSize?: number;
fontFamily?: string;
fill?: string;
className?: string;
}
export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
fontSize = 24,
fontFamily = 'Arial',
fill = 'currentColor',
className,
}) => {
const textLength = text.length;
const charWidth = fontSize * 0.6;
const width = textLength * charWidth + 20;
const height = fontSize + 20;
const padding = 10;
const x = padding;
const y = padding + fontSize * 0.75;
return (
<svg
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
className={className}
xmlns="http://www.w3.org/2000/svg"
>
<text
x={x}
y={y}
fontSize={fontSize}
fontFamily={fontFamily}
fill={fill}
dominantBaseline="middle"
>
{text}
</text>
</svg>
);
};
export default SvgTextLogo;