Usage

Props, colors and accessibility.

Props

Prop	Type	Default
`size`	number	24
`trigger`	'hover' \| 'click' \| 'inView' \| 'loop' \| 'none'	'hover'
`preset`	'draw' \| 'pop' \| 'wiggle' \| 'spin' \| 'bounce' \| 'slide' \| 'pulse' \| 'shake' \| 'blink' \| 'float' \| 'swap'	'draw'
`speed`	number	1

Every other prop goes to the underlying svg. The ref exposes startAnimation() and stopAnimation().

Icons draw in currentColor, so they follow the text color around them. Styles with extra colors read these variables:

Variable	Default	Style
`--feta-knockout`	#FFFFFF	Filled. Set it to your surface color.
`--feta-riso`	#FF8A5B	Riso plate. Try #7CC4FF, #AFE67F or #FFD24D.
`--feta-glass-from / -to`	#BFE3FF / #4F8BFF	Glass gradient
`--feta-glass-ink`	#1D3FA0	Glass outline
`--feta-neon-glow / -core`	#FF4FD8 / #FFE6FA	Neon

globals.css

.card {
  --feta-riso: #7cc4ff;
  --feta-knockout: var(--background);
}

Icons are decorative by default and get aria-hidden.
Pass aria-label to make an icon meaningful; it becomes role="img".
Give interactive icons a touch target of at least 44 × 44 px.
Icon ink should reach 3:1 contrast with its background. Check Glass on light surfaces and Neon on dark ones.

save-button.tsx

<button aria-label="Save">
  <BookmarkIcon />
</button>

<StarIcon aria-label="Favorite" />