This topic created in 1100 days ago, the information mentioned may be changed or developed.
介绍
使用 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 配置更改手绘风格。配置支持函数类型，可根据不同形状，返回不同配置
文档中有很多示例：
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 留言
Supplement 1 Apr 23, 2023
与图标库 recharts 集成 => 与图表库 recharts 集成
 | 1 me221 Apr 23, 2023 太牛了! |
 | 2 Alexonx Apr 23, 2023 牛批 一直在找一个漂亮的手绘风格的 Icon 库 现在这个渲染器完美解决了 |
 | 3 justin2018 Apr 23, 2023 这个好~ 感谢分享 |
 | 4 K1W1 Apr 23, 2023 via iPhone 牛哇 |
 | 5 BaffinLee Apr 23, 2023 awesome! |
 | &nbp; 6 IamJ Apr 23, 2023 via Android 不错，喜欢这风格 |
 | 7 Cryse Apr 24, 2023 赞，非常有创意啊 |
 | 8 taylorins Apr 24, 2023 小前端路过，好漂亮收藏了！ |
 | 9 AlanWang3 Apr 24, 2023  1 赞！我之前也用 roughjs 做过类似的东西，不过做的比较粗糙。https://github.com/3Alan/alan-ui |
 | 10 D2h0VL89HMAU417B Apr 28, 2023 收藏了 |
Select Language