Get Started

Introduction

react-rough-fiber is a React renderer for rendering hand-drawn SVGs.

Installation

pnpm i react-rough-fiber react-reconciler

Quick Start

To render the SVG in a hand-drawn style, you only need to add three lines of code:

import { RoughSVG } from 'react-rough-fiber'
export default function App() {
  return (
    <RoughSVG>
      <svg viewBox="0 0 128 128" width="128" height="128">
        <circle cx={64} cy={64} r={48} stroke="currentColor" fill="#82ca9d" />
      </svg>
    </RoughSVG>
  )
}

Usage

react-rough-fiber can integrate with many existing SVG-based libraries:

Icons

Code

Emoji

Code

Chart

Code

Text

Code