Get Started

Get Started

Introduction

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

Install

pnpm i react-rough-fiber react-reconciler
⚠️

If you are using React 17, you need to install react-reconciler@0.26.2.

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 64 64" width="256" height="256">
        <rect x={12} y={12} width={48} height={48} stroke="#000" fill="#82ca9d" />
      </svg>
    </RoughSVG>
  )
}

Integration

Icons

With react-feather (opens in a new tab):

Code

Chart

With recharts (opens in a new tab):

Code

Even HTML!

See HTML Examples

API