outline-text

1import { cn } from "@/lib/utils";
2import type React from "react";
3 
4type OutlineTextProps = React.ComponentProps<"span"> & {
5	strokeWidth?: string;
6};
7 
8export function OutlineText({
9	children,
10	className = "",
11	strokeWidth = "1px",
12	style,
13	...props
14}: OutlineTextProps) {
15	return (
16		<span
17			className={cn(
18				"inline-block bg-clip-text font-extrabold text-transparent",
19				className
20			)}
21			style={{
22				WebkitTextStroke: strokeWidth,
23				WebkitTextFillColor: "transparent",
24				WebkitTextStrokeColor: "currentColor",
25				WebkitBackgroundClip: "text",
26				...style,
27			}}
28			{...props}
29		>
30			{children}
31		</span>
32	);
33}