46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { type SVGProps, useId } from "react";
|
|
|
|
interface PlusSignsProps extends SVGProps<SVGSVGElement> {
|
|
className?: string;
|
|
}
|
|
|
|
export const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
|
|
const GAP = 16;
|
|
const STROKE_WIDTH = 1;
|
|
const PLUS_SIZE = 6;
|
|
const id = useId();
|
|
const patternId = `plus-pattern-${id}`;
|
|
|
|
return (
|
|
<svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
|
|
<defs>
|
|
<pattern
|
|
id={patternId}
|
|
x="0"
|
|
y="0"
|
|
width={GAP}
|
|
height={GAP}
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<line
|
|
x1={GAP / 2}
|
|
y1={(GAP - PLUS_SIZE) / 2}
|
|
x2={GAP / 2}
|
|
y2={(GAP + PLUS_SIZE) / 2}
|
|
stroke="currentColor"
|
|
strokeWidth={STROKE_WIDTH}
|
|
/>
|
|
<line
|
|
x1={(GAP - PLUS_SIZE) / 2}
|
|
y1={GAP / 2}
|
|
x2={(GAP + PLUS_SIZE) / 2}
|
|
y2={GAP / 2}
|
|
stroke="currentColor"
|
|
strokeWidth={STROKE_WIDTH}
|
|
/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill={`url(#${patternId})`} />
|
|
</svg>
|
|
);
|
|
};
|