wheat

Animated React component — Wheat / WheatIcon

Hover the wheat icon above to see the default draw animation.

Import

Tree-shakable named import — only the icons you reference end up in your bundle.

import { Wheat } from "lucide-motion";

Also exported as WheatIcon for the Lucide-suffix naming convention.

Quick start

Drop the component into your JSX. The default trigger plays the draw animation on hover.

import { Wheat } from "lucide-motion";

<Wheat size={32} />

Timing presets · hover to play

Snappy

duration={0.2} stagger={0}

Cinematic

duration={1.5} stagger={0.4}

Linear

easing="linear"

Spinner

trigger="mount" repeat={Infinity}

Raw node data

The icon's underlying SVG node tree — useful if you need to render or transform it yourself instead of using the component.

Show IconNode[]

[
  [
    "path",
    {
      "d": "M2 22 16 8"
    }
  ],
  [
    "path",
    {
      "d": "M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"
    }
  ],
  [
    "path",
    {
      "d": "M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"
    }
  ],
  [
    "path",
    {
      "d": "M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"
    }
  ],
  [
    "path",
    {
      "d": "M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z"
    }
  ],
  [
    "path",
    {
      "d": "M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"
    }
  ],
  [
    "path",
    {
      "d": "M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"
    }
  ],
  [
    "path",
    {
      "d": "M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"
    }
  ]
]