Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 67b508defb | |||
| ea8b146b17 | |||
| c49ed74a90 | |||
| d16b90e65a | |||
| c8710233bd | |||
| fab0651c19 | |||
| 901713ee01 | |||
| 0855841c6a |
@@ -1,32 +1,38 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
|
||||
interface SvgTextLogoProps {
|
||||
text: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: string;
|
||||
letterSpacing?: string;
|
||||
fill?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo: FC<SvgTextLogoProps> = ({ text, className = "", ...props }) => {
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
className = '',
|
||||
fontSize = 48,
|
||||
fontWeight = '700',
|
||||
letterSpacing = '0.05em',
|
||||
fill = 'currentColor',
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox={`0 0 ${text.length * 60} 100`}
|
||||
className={`w-full h-auto ${className}`}
|
||||
{...props}
|
||||
viewBox={`0 0 ${text.length * (fontSize * 0.6)} ${fontSize * 1.2}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<defs>
|
||||
<style>{`
|
||||
.svg-text {
|
||||
font-size: 72px;
|
||||
font-weight: bold;
|
||||
fill: currentColor;
|
||||
}
|
||||
`}</style>
|
||||
</defs>
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
className="svg-text"
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
letterSpacing={letterSpacing}
|
||||
fill={fill}
|
||||
>
|
||||
{text}
|
||||
</text>
|
||||
@@ -34,4 +40,4 @@ const SvgTextLogo: FC<SvgTextLogoProps> = ({ text, className = "", ...props }) =
|
||||
);
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user