Common graphical elements not supported out of the box by react-konva

Usage no npm install needed!

<script type="module">
  import reactKonvaHelpers from '';



<CircleImage />

Apply a circular mask to an image. Use how you would a normal image, first you must use-image.

import { CircleImage } from "react-konva-helpers";
import useImage from 'use-image';
const [src] = useImage('path/to/file');

// Inside <Stage> etc.
<CircleImage src={src} x={100} y={100} width={50} height={50} />

<SvgIcon />

Use an SVG like an icon font. Provide the raw XML and a fill color.

import { SvgIcon } from "react-konva-helpers";
const GithubForkIcon = `<svg xmlns="" viewBox="0 0 24 24" [...]`

// Inside <Stage> etc.
<SvgIcon xml={GithubForkIcon} fill="red" x={0} />