Files
72b6c652-a25f-40c1-bc68-d03…/src/components/shared/SvgTextLogo/SvgTextLogo.tsx

38 lines
792 B
TypeScript

import React, { SVGProps } from 'react';
interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
text: string;
className?: string;
textClassName?: string;
}
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className = '',
textClassName = '',
...svgProps
}) => {
return (
<svg
viewBox={`0 0 ${text.length * 60} 100`}
className={`w-full h-auto ${className}`}
{...svgProps}
>
<text
x="50%"
y="50%"
dominantBaseline="middle"
textAnchor="middle"
className={`text-4xl font-bold fill-current ${textClassName}`}
style={{
fontSize: 'clamp(2rem, 8vw, 4rem)',
fontWeight: 700,
}}
>
{text}
</text>
</svg>
);
};
export default SvgTextLogo;