SVG 转 React 组件
粘贴 SVG 代码，得到一个可以直接导入使用的 React 函数组件，属性使用 camelCase 写法。
工作原理
SVG 会用浏览器自带的 DOM 解析器解析，所以它是被真正理解为标记语言，而不只是
简单的模式匹配。每个属性名都会按照 React 自身内部使用的相同映射关系转换为
对应的 React/DOM 写法（stroke-width
→ strokeWidth，class → className，
xlink:href → xlinkHref 等等），然后整棵树被
重新序列化为 JSX，并包裹进一个小型函数组件中。开启 "接受 props" 后，
{...props} 会展开到根元素上，调用者就能以常规 React 方式传入
width、className 或 onClick 处理函数。
解析和转换全部在本页面的 JavaScript 中，针对浏览器根据你的输入构建出的 DOM 进行。不会上传任何内容。
常见问题
SVG 和 JSX 之间有什么变化？
属性名会转换为 camelCase 写法（stroke-width 变成 strokeWidth，fill-rule 变成 fillRule），class 变成 className，自闭合标签会补上 JSX 要求的斜杠。视觉效果完全一致。
可以通过 props 控制大小和颜色吗？
打开 "接受 props" 开关，让组件把 {...props} 展开到根 <svg> 元素上，这样你就可以在任何使用它的地方覆盖 width、height、className 或其他任意属性，这是图标组件的标准写法。
这会把我的 SVG 发送到别的地方吗？
不会。转换只是纯粹的字符串/属性变换，在你的浏览器中完成。不会上传任何内容。