Icon

import { RoughSVG } from 'react-rough-fiber';
import { Bell, Battery, Coffee, Twitter, Camera, Edit, Image } from "react-feather"
export default function App() {
  return (
    <RoughSVG options={{roughness: 0.6, seed: 2, bowing: 15}}>
      <Image size={48} />
    </RoughSVG>
  )
}

import { useState, useRef } from 'react';
import { RoughSVG } from 'react-rough-fiber';
import AlertOutlined from '@ant-design/icons/AlertOutlined';
import useAnimationFrame from 'use-animation-frame';
export default function App() {
  const [seed, setSeed] = useState(0);
  useAnimationFrame(({ time }) => {
    setSeed(Math.floor(time / 0.5));
  });
  return (
    <RoughSVG options={{roughness: 8, seed, fillStyle: 'solid'}}>
      <AlertOutlined style={{fontSize: '64px'}} />
    </RoughSVG>
  )
}

import { RoughSVG } from 'react-rough-fiber';
import { MoonIcon } from '@heroicons/react/24/solid'
export default function App() {
  return (
    <RoughSVG options={{roughness: 0, fillStyle: 'dashed', dashOffset: 1, dashGap: 0.5, hachureGap: 2}}>
      <MoonIcon style={{ width: '64px', height: '64px', color: '#ffa940'}} />
    </RoughSVG>
  )
}