Icon

Built-in stroke icons, or any icon from an SVG node list.

IconProps packages/core/src/components/icon.ts:52 ↗

Native render. The live version loads when this comes into view.

Import

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

Usage

Icon.tsx

import { Icon, Row } from "@tarve/core";

<Row gap={12} align="center">
  <Icon name="settings" size={20} />
  <Icon name="heart" size={20} color="#f472b6" />
  <Icon iconNode={[["path", { d: "M5 12h14M12 5l7 7-7 7" }]]} size={20} strokeWidth={2} />
</Row>

Props

Prop	Type	Default
`color`	`string`	`theme.colors.foreground`
`iconNode`	`readonly SvgNode[]`	—
`name`	`IconName`	—
`size`	`number`	`16`
`strokeWidth`	`number`	`1.75`

Common props

Shared by every component. See descriptions →

childrenclassclassNamehighlightidkeymotionFromonHighlightonPasteonPointerLeaveonPointerMoveonSizeonTransitionEndrovingGroupstyle

Types

IconName

type IconName =
  | "check" | "x" | "plus" | "minus"
  | "chevron-down" | "chevron-up" | "chevron-right" | "chevron-left"
  | "search" | "info"
  | "house" | "settings" | "user" | "bell" | "heart" | "star"
  | "download" | "trash-2" | "folder" | "mail"
  | "play" | "pause" | "skip-back" | "skip-forward";

SvgNode

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