Svg

A declarative SVG canvas rendered natively.

SvgProps packages/core/src/components/svg.ts:151 ↗

Import

import { Svg } from "@tarve/core";

Usage

Svg.tsx

import { Circle, Path, Svg } from "@tarve/core";

<Svg viewBox="0 0 24 24" size={48} stroke="#7c5cff" strokeWidth={2}>
  <Circle cx={12} cy={12} r={9} />
  <Path d="M8 12l3 3 5-6" />
</Svg>

Props

Prop	Type	Default
`color`	`string`	`theme.colors.foreground`
`fill`	`string`	`"none"`
`height`	`number`	—
`nodes`	`readonly SvgNode[]`	`[]`
`size`	`number`	—
`stroke`	`string`	`"currentColor"`
`strokeLinecap`	`"butt" \| "round" \| "square"`	`"round"`
`strokeLinejoin`	`"miter" \| "round" \| "bevel"`	`"round"`
`strokeWidth`	`number`	`2`
`viewBox`	`string \| readonly [number, number, number, number]`	—
`width`	`number`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

SvgNode

type SvgNode =
  | readonly [SvgElementName, SvgAttributes]
  | readonly [SvgElementName, SvgAttributes, readonly SvgNode[]];