使用 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 配置更改手绘风格。配置支持函数类型,可根据不同形状,返回不同配置
文档中有很多示例:
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 留言
1
me221 2023-04-23 13:56:36 +08:00
太牛了!
|
2
Alexonx 2023-04-23 14:22:42 +08:00
牛批 一直在找一个漂亮的手绘风格的 Icon 库 现在这个渲染器完美解决了 ❤
|
3
justin2018 2023-04-23 18:05:46 +08:00
这个好~ 感谢分享
|
4
K1W1 2023-04-23 18:21:53 +08:00 via iPhone
牛哇
|
5
BaffinLee 2023-04-23 19:24:24 +08:00
awesome!
|
6
IamJ 2023-04-23 20:18:58 +08:00 via Android
不错,喜欢这风格
|
7
Cryse 2023-04-24 03:57:27 +08:00
赞,非常有创意啊
|
8
taylorins 2023-04-24 10:23:00 +08:00
小前端路过,好漂亮收藏了!
|
9
AlanWang3 2023-04-24 15:49:23 +08:00 1
赞!我之前也用 roughjs 做过类似的东西,不过做的比较粗糙。https://github.com/3Alan/alan-ui
|
10
D2h0VL89HMAU417B 2023-04-28 09:36:59 +08:00
收藏了
|