[开源] react-rough-fiber 一个以手绘风格绘制已有 SVG 库的 React 渲染器

介绍

使用 react-rough-fiber ，可以非常方便地集成已有的 SVG 库，将它们渲染成手绘风格的图形

仓库地址

文档地址

它的实现原理是 React Renderer + Rough.js 。如果你对实现的过程有兴趣，可以看看我的这篇 博客

测试用例 涵盖 React 17 & 18

安装

npm i react-rough-fiber react-reconciler

⚠️：如果你使用的是 React 17 ，则需要安装 [email protected]

使用

最少只需要加三行代码，就可以将 SVG 渲染成手绘风格，一个最基本的演示

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>
  )
}

与 SVG Icon / SVG Emoji 集成：

与图标库 recharts 集成：

可以传入 Roug.js 配置更改手绘风格。配置支持函数类型，可根据不同形状，返回不同配置

文档中有很多示例：

• Icon
• Chart
  • recharts 柱状图
  • visx 地图
  • react-d3-tree 树型图
• Text
• SVG string
• Remove SVG
• Emoji

FAQ

Q: 适用于所有 SVG 库吗

A：并不是。react-rough-fiber 是一个 React renderer ，只适用于用 React 创建的元素。例如 ECharts 等，它们是不基于任何框架的渲染逻辑（比如 ECharts 的 ZRender)，所以无法适用 react-rough-fiber

Q：那也无法适用于本地 /网络 SVG 文件？

A：可以使用 SVGR 将本地的 SVG 转化为 React Component ；可以使用 react-inlinesvg 加载 SVG 字符串 /网络 SVG 文件，转换为 React Component. 这里有一个简单的 例子

关于

react-rough-fiber 基于或灵感来自以下开源项目：

• roughjs
• nextra
• perfect-freehand
• react-three-fiber
• preact
• shadcn/ui

如果你发现了任何 Bug ，可以在 Issue 提出；有任何讨论、建议，可以在这里或者 Github Discussions 留言