Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 33x 33x 578x | import React from "react";
import { Path } from "react-konva";
// You can adjust the path string below to match your preferred "zap" (lightning) shape.
const zapPath = "M13 2L3 14h9l-1 8 10-12h-9l1-8z";
type ZapProps = {
x: number;
y: number;
width: number;
height: number;
fill?: string;
};
const Zap: React.FC<ZapProps> = ({
x,
y,
width,
height,
fill = "#eab308",
}) => {
return (
<Path
x={x}
y={y}
data={zapPath}
fill={fill}
// The base SVG path is 24x24, so we scale accordingly.
scaleX={width / 16}
scaleY={height / 16 }
offsetX={12}
offsetY={12}
/>
);
};
export default Zap;
|