React SVG 组件生成器
将SVG文件转换为React功能组件。生成JSX/TSX，包含TypeScript类型、尺寸和颜色属性以及样式选项。
SVG to React Component
Options
import React, { FC, SVGProps } from 'react';
interface MyIconProps extends SVGProps<SVGSVGElement> {
size?: number;
}
export const MyIcon: FC<MyIconProps> = ({ size, width, height, fill = 'currentColor', stroke = 'currentColor', className, ...rest }) => (
<svg role="img" aria-label="Icon" viewBox="0 0 24 24" width={width || 24} height={height || 24} fill={fill} stroke={stroke} className={className} {...rest} xmlns="http://www.w3.org/2000/svg">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
);
export default MyIcon;
What is React SVG 组件生成器?
React SVG组件生成器是一款在线代码生成工具，可将原始可缩放矢量图形（SVG）标记转换为整洁惯用的React功能组件，可立即在React和Next.js应用程序中使用。虽然您可以将原始SVG粘贴到JSX中，但生成的代码通常不是最佳的：它使用SVG原生属性而不是React驼峰等效项，缺少用于自定义的宽度、高度、颜色和className属性，不能正确处理aria-label和role等可访问性属性，并且可能包含应该被剥离的编辑器元数据。本生成器解决了所有这些问题，生产了可用于生产的React SVG组件。工具将所有SVG属性转换为React驼峰等效项（strokeWidth、strokeLinecap、className等），剥离仅XML声明和元数据，添加用于宽度、高度、填充颜色、描边颜色、描边宽度和className的可配置组件属性，应用具有role img和aria-label属性的可访问性最佳实践，如果选中则在TSX模式下添加TypeScript接口定义，并可选将SVG包装在forwardRef中以进行引用转发。其他选项包括使颜色接受感知主题的颜色属性、生成使用CSS自定义属性进行样式设置的组件、同时支持.jsx和.tsx输出格式以及添加SVGR标准viewBox处理。生成的组件代码与语法高亮一起显示在原始SVG预览旁边，并包含一键复制按钮以及作为.jsx或.tsx文件的下载选项。所有处理在客户端进行，SVG代码不会发送到任何服务器。
When to Use React SVG 组件生成器
用于将SVG图标导入React或Next.js项目、构建可重用的React SVG图标库、为TypeScript React应用程序生成类型化SVG组件、为可主题化的React UI准备SVG资源，或避免大型图标集手动SVG到JSX转换。
How to Use React SVG 组件生成器
粘贴SVG代码或上传SVG文件。选择输出格式（JSX或带TypeScript的TSX）。配置组件选项（尺寸和颜色的自定义属性、TypeScript类型、forwardRef、可访问性属性）。在渲染的SVG旁边预览生成的React组件代码。复制到剪贴板或下载为.jsx或.tsx文件。