使用 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 (
)
}
与 SVG Icon / SVG Emoji 集成：
与图标库 recharts 集成：
可以传入 Roug.js 配置更改手绘风格。配置支持函数类型，可根据不同形状，返回不同配置
文档中有很多示例：
Chart
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 基于或灵感来自以下开源项目：
如果你发现了任何 Bug ，可以在 Issue 提出；有任何讨论、建议，可以在这里或者 Github Discussions 留言
