将 SVG 转换为 React 组件

粘贴 SVG,即可得到可直接使用的 React 组件(.tsx):所有属性都已转换为 camelCase(className、strokeWidth……),并透传 props 属性。

示例:

组件名称

源 SVG

这个转换具体做了什么?

JSX(React 所使用的语法)不接受 stroke-width、class 这类 kebab-case 形式的 HTML/SVG 属性,必须写成 camelCase(strokeWidth、className)。本工具会按此规则自动改写 SVG 中的所有属性,并将结果封装为一个 TypeScript 函数组件,可直接复制到 React 项目中使用。

生成的组件支持自定义 props(颜色、尺寸)吗?

支持,组件会将收到的所有 props({...props})直接传递给 <svg> 标签:因此您可以像对待任何 SVG 元素一样,从父组件传入 className、width、height、onClick 等。

这个组件也能用于纯 JavaScript(非 TypeScript)项目吗?

生成的文件是 TypeScript(带有 props 类型),但只需删除类型导入行和 : SVGProps<SVGSVGElement> 注解,就可以直接在普通的 JavaScript 项目中使用。

100% 本地处理:组件生成完全在您的浏览器中进行,您的 SVG 不会被上传到任何服务器。