Shape
Generic SVG shape component with six variants and configurable size, fill, and stroke.
Preview
Import
import { Shape } from "@sigil-ui/components";Usage
<Shape />Variants
<Shape variant="diamond" />
<Shape variant="hexagon" />
<Shape variant="triangle" />
<Shape variant="circle" />
<Shape variant="cross" />
<Shape variant="pill" />Sizes
<Shape size="sm" />
<Shape size="md" />
<Shape size="lg" />
<Shape size="xl" />Filled
<Shape variant="hexagon" filled />
<Shape variant="circle" filled size="lg" />Custom stroke
<Shape variant="triangle" strokeWidth={3} size="xl" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "diamond" | "hexagon" | "triangle" | "circle" | "cross" | "pill" | "diamond" | Shape type |
size | "sm" | "md" | "lg" | "xl" | "md" | Shape size (16/24/32/48 px) |
filled | boolean | false | Fill the shape with --s-primary |
strokeWidth | number | 1.5 | Stroke width |
className | string | — | Additional CSS classes |